Parallax Design Web

What is parallax ?

The Parallax Design is a scrolling technique which helps in conjuring the illusion of the depth of field to the user. The technique uses a combination of multiple layers of information presented through graphics and texts. These clusters of information are sped up to create the effect of movement, depth and 3 dimensional illusions. With one flip of the scrolling wheel, the user can get hold of this illusion.

Why Parallax?

This illusion in parallax can be used to immerse the website visitor into absolute interactivity of the website.

In the business online It can be use to presenting product.

Product with 3d format can angage the user to scroling the product.

Displaying benefit and practices. With parallax, we can make more atract what the benefit user can get more clearly.

In paralax we can tell the story. With the firtual machine in parallax to croling it can make user know the step by step and it more fun.

Who can use parallax?

Actualy it can be use for every kind of website.it depend. But because parallax is many animation it hoo heavy to open it. It not recommended for big company. Ivent tought like that, the company still can use this for promotion their product or service.

This is some example to use for in Parallax design

1. Story telling

2. Engagement

3. Action Trigger

3. Design

Structure parallax

•Create a section category. For instance Front.
Create a front page/welcome page etc. Scroll to the bottom Select Query Sections tab and then select the Front section category.

•Create a Highlight Category called Services.
Create Highlights Web, Video and photo, Graphic design etc. Connect these in with the services category. Scroll below the content creation area and modify the highlights. Add a button (Themify Shortcode) OR a regular link with just the # symbol. Link will be added later.

•There are certain steps one needs to take to see more details from each service highlight.

•The blog page

•Clicking a post so it jumps to a new screen area makes the menu not work.

Some that have to do in parallax

•Only use properties that are cheap for browsers to animate. Those are, more or less: translate3d, scale, rotation and opacity

•Use window.requestAnimationFrame when firing the animations in JS. This basically tells the browser animate stuff before the next repaint.

•Round values appropriately. If you’re animating some object 100px over the course of 200px worth of scroll (so an object at 50% normal speed), don’t let it get pixel values like 54.2356345234578px

•Only animate elements in viewport. Continuing to pass thousands of values during scroll to elements off-screen makes no sense and can be expensive.

•Animate only absolutely and fixed position elements. I’m not 100% why, but I’ve seen significant performance pickup with only animating absolute/fixed elements

•Use natural <body> scroll. Some browsers, specifically Safari I’ve noticed, really take a performance hit on scrolling elements other than the body. Honestly, I can’t think of a good reason to do it. Even in cases when everything on the page is positioned fixed, so there’s no actual scroll height, just use JS to set an appropriate body height to get the height of scroll you need for all your parallaxing goodness.

•Define all your animations in an object, not as messy spaghetti madness.

Some that not have to be done in Parallax

•Avoid background-size:cover unless you’re sure it’s not affecting performance. It’s usually fine if you’re not animating that element, but as soon as you try to translate it, there’s a chance it’ll cause serious problems. If you must have a full-bleed background that parallaxes, try other techniques to ‘full-bleed’ the image.

•Don’t bind directly to scroll event. Use an interval to update element positions. The scroll is called like a bajillion times a second and can cause crazy performance hiccups.

•Don’t animate massive images or dramatically resize them. Forcing browsers to resize images (especially huge ones) can be very costly. Now, that’s not to say using scale on an image element is bad — in fact in my experience it seems to work quite well — but resizing a 4000px wide image to be 500px wide makes no sense and it just expensive all around.

•Avoid animating 100 things at once if you’re seeing performance problems. Honestly, I’ve not run into the issue of moving too many elements at once (even when animating upwards to 15 things simultaneously), but I’m positive it can happen. I have seen occasional performance problems when animating a parent and child at the same time though — avoid it if you can.

to make it more easy to understand i ive my own parallax design web example

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.

T-WORLD

Parallax Design Web