What is the word parallax effect, so ... unfamiliar.
This technique seems to give an illusion of depth using the parallax effect was often used in video games such as the initial side-scrolling.
Scrolling (layer at the back slowly, fast scrolling layer in front), so that which It is said that there is a depth seem to give different speeds in each parallax effect, the several layers.
This time, we put together a few web site design well applied to this parallax effect.
How to recreate Silverback's parallax effect
First of all, from how to apply to web design the parallax effect. There seems to be a depth unlike the speed of the scroll each PNG image Experimenting with the width of the browser, are arranged in four layers. Because it is published as well as sample code, will try to challenge or how. Miso specified in% of the properties of the background-position CSS, is changing the percent of each layer.
Silverback - guerrilla usability testing
↑ here the site has been described in the site. I can not very well.
Креативная разработка
Here is the site of Russia. Balance and the man in the middle, trees in the upper right corner, the background is a good feeling.
We All Hate Quickbooks, Do You?
If you change the width of the browser, part of the flame at the bottom of the page is scrolled.
Dromaeo
Scroll the header cute dinosaur.
Percentage Backgrounds - Large numbers do interesting things
It is a fun scroll. Please try playing with changing the width of the browser.
A parallax optical illusion with CSS: The Horse in Motion
This is great! Horse has been running.
Dumago: Be carefree what you wish for
It is simple and very beautiful parallax effect has come out.
Starry Night by CSS-Tricks
I feel the depth and try to resize horizontally and vertically, of the browser.
JavaScript system
jParallax
Script that is to scroll through the image layer in response to movement of the mouse. We can also sample well.
jParallax Demos
is a demonstration using a jParallax. It is a very good feeling.
40 JAAR SIRE - U mag het zeggen
Is the site of the Netherlands. Also using a script here, and move the mouse, the background will move accordingly.
! jQuery Parallax Scrolling - Build your own 1980's video game: Locomotivation
how to use jQuery, auto-scroll to have been introduced.
Parallax Demo
Here, the design of the Silverback was first introduced, is a sample of the animation using the prototype. Scroll down and click on the link to Shrink! In the middle of the page.
Parallax Background with Javascript and CSS
Is a script that corresponds to the vertical scroll. Since it was parallax effect of the background check and image, to scroll through clouds, page frame, is a strange feeling.
JavaScript Example: Fly + Parallax Scrolling Effect
Is an example of a starry sky with the script too.
Flash system
Flash Kit
Examples that use Flash. Because you can also download Flash files, will be helpful.
Javier Ferrer Vidal
If you take advantage of the previous sample of Flash, what is not like they could build parallax effect site.
And try to design a site to take advantage of the parallax effect you also, what is not positively impact it will differentiate itself from other sites.
This technique seems to give an illusion of depth using the parallax effect was often used in video games such as the initial side-scrolling.
Scrolling (layer at the back slowly, fast scrolling layer in front), so that which It is said that there is a depth seem to give different speeds in each parallax effect, the several layers.
This time, we put together a few web site design well applied to this parallax effect.
How to recreate Silverback's parallax effect
First of all, from how to apply to web design the parallax effect. There seems to be a depth unlike the speed of the scroll each PNG image Experimenting with the width of the browser, are arranged in four layers. Because it is published as well as sample code, will try to challenge or how. Miso specified in% of the properties of the background-position CSS, is changing the percent of each layer.
↑ here the site has been described in the site. I can not very well.
Here is the site of Russia. Balance and the man in the middle, trees in the upper right corner, the background is a good feeling.
If you change the width of the browser, part of the flame at the bottom of the page is scrolled.
Scroll the header cute dinosaur.
It is a fun scroll. Please try playing with changing the width of the browser.
This is great! Horse has been running.
It is simple and very beautiful parallax effect has come out.
I feel the depth and try to resize horizontally and vertically, of the browser.
jParallax
Script that is to scroll through the image layer in response to movement of the mouse. We can also sample well.
is a demonstration using a jParallax. It is a very good feeling.
Is the site of the Netherlands. Also using a script here, and move the mouse, the background will move accordingly.
how to use jQuery, auto-scroll to have been introduced.
Here, the design of the Silverback was first introduced, is a sample of the animation using the prototype. Scroll down and click on the link to Shrink! In the middle of the page.
Is a script that corresponds to the vertical scroll. Since it was parallax effect of the background check and image, to scroll through clouds, page frame, is a strange feeling.
Is an example of a starry sky with the script too.
Flash Kit
Examples that use Flash. Because you can also download Flash files, will be helpful.
If you take advantage of the previous sample of Flash, what is not like they could build parallax effect site.
The post is pretty interesting. I really never thought I could have a good read by this time until I found out this site.
ReplyDelete