Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
$('#scene').parallax(); function alturaMaxima() { var altura = $(window).height(); $(" .back").css('min-height',altura); } alturaMaxima(); $(window).bind('resize', alturaMaxima);
CSS
body { background:#06b6ff; background-repeat:repeat-y; margin: 0; overflow:hidden; } .container{ } img { display: block; width: 100%; } .scene { } .layer:nth-child(1) { margin-top: 0px; margin-left: -100px; height: 100%; bottom:0px; } .layer:nth-child(1) img { width:initial; bottom:1px; position:absolute; } .layer:nth-child(2) { margin: 10%; } .layer:nth-child(3) { margin-top: 20%; margin-left: 30%; } .layer:nth-child(4) { margin-top: 15%; margin-left: 70%; } .layer:nth-child(5) { margin-top: 10px; margin-left: 60%; } .layer:nth-child(6) { margin-top: -50px; margin-left: 40%; } .layer:nth-child(7) { position:absolute; } h1{ color:white; font-family: helvetica; font-weight: 100; position: absolute; top: 50px; left:100px; }
HTML
<html> <head> <meta charset="utf-8"> <title>Parallax Clouds :)</title> <!-- Behavioral Meta Data --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> </head> <body> <div id="container" class="container"> <ul id="scene" class="scene"> <li class="layer back" data-depth="0.20"><img src="http://imageshack.com/a/img33/8271/oyda.jpg"></li> <li class="layer" data-depth="0.80"><img src="http://imageshack.com/a/img268/1087/9bdz.png" style="width:200px;"></li> <li class="layer" data-depth="0.60"><img src="http://imageshack.com/a/img268/1087/9bdz.png" style="width:200px;"></li> <li class="layer" data-depth="0.90"><img src="http://imageshack.com/a/img268/1087/9bdz.png" style="width:200px;"></li> <li class="layer" data-depth="0.30"><img src="http://imageshack.com/a/img268/1087/9bdz.png" style="width:200px;"></li> <li class="layer" data-depth="0.80"><img src="http://imageshack.com/a/img268/1087/9bdz.png" style="width:200px;"></li> <li class="layer" data-depth="1.5"> <h1>Parallax Clouds by Russian</h1></li> </ul> </div> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://wagerfield.github.io/parallax/deploy/jquery.parallax.js"></script> </body> </html>
Join Effecthub.com
Working with Global Gaming Artists and Developers!
Login
Sign Up
Or Login with Your Email Address:
Email
Password
Remember
Or Sign Up with Your Email Address:
Your Email
This field must contain a valid email
Set Password
Password should be at least 1 character
Stay informed via email
