What is parallax (general concept):
Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines The term is derived from the Greek παράλλαξις (parallaxis), meaning "alteration". Nearby objects have a larger parallax than more distant objects when observed from different positions, so parallax can be used to determine distances.
What is parallax scrolling
Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion. The technique grew out of the multiplane camera technique used in traditional animation since the 1940s, and was popularized in the 1982 arcade game Moon Patrol
Libraries:
PARALLAX-JS
There are multiple ways to do parallax scrolling on your website. This library provides a way of scrolling through multiple section tags which have different backgrounds moving a little slower than the content. As author proposes combined with side-nav.js gives your website nice look & feel. All animations are done using CSS3 transformations but if your browser does not support those don’t worry cause it will gently switch to CSS positioning.
Observaciones:
-It is not flexible, can not customize the animations, are predefined
-Is is easy to implement
-Modifies the url
-It is for scroll parallax
Demo:
JQUERY.PARALLAX
You will be amazed with that little jQuery plugin if your requirement is to move layers in response to mouse movement. The tricky part is that parallax effect is done by differentiating layer sizes making smaller layers move slower, and opposite. Simple and effective script with good documentation. Try it out, you won’t regret.
Observations:
-It is only to create the parallax effect with mouse movement.
-It is quite easy to implement, you need to have images of different sizes, the largest is the last and moves slower, the smaller is the first and moves faster.
-It is a JQuery plugin.
DEMO:
STELLAR.JS
Stellar is another jQuery plugin that allows you to apply parallax effects on your project. You won’t have problems using it cause all you need to do is to include stellar.js into your website and call $.stellar(); Interesting feature is the way the plugin is configured - and by all means the word “interesting” was used in the most positive way – because stellar is configured by HTML5 data-* attribute.
Observations:
-It is not flexible, can not customize the animations, are predefined
-It is for scroll parallax
-Based in JQuery
DEMO:
SKROLLR
Skrollr is much more that just parallax scrolling library and if your project has to react in response to scroll event Skrollr probably will be the best tool for you. A dozen of examples present quite good what this 3.4k (gzipped) library is capable of. Transforming animating page elements, drawing SVG path, background animation, snapping to “slides” it has all. It’s worth to mention that it was used by The Guardian. Squareup, Happy.is and it rocks. Oh, You will be glad hear that it supports Android and iPhone. Go and grab it.
Observations:
-It is very flexible, powerful and easy to use.
- CSS, Javascript skills needed
-It is for scroll parallax
-It is compatible with IE8
-Patience
DEMO:
ToolKit
-skrollr (v 0.5.14)
-jparallax
-imagePreLoader
Considerations for designing and creating Parallax assets.
-When designing the assets, be aware of the size and resolution of small monitors
- .png files optimisation
-Try to use jpgs when possible
-Define how the transitions are going to happen, mainly the enter and exit ones. One change
after everything is done will affect the rest of the animations.
-Try to use text when possible to reduce the k size of the page.
-Be patient, doing transitions and making everything match is not as easy as programming where you have control of everything.
No hay comentarios:
Publicar un comentario