A Pen by Nikesh Suwal on CodePen.
Created
December 7, 2015 17:53
-
-
Save anonymous/43c11e2550199d6a4cfc to your computer and use it in GitHub Desktop.
WrbGMG
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .container | |
| h1 Parallex on Landing Elements | |
| p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis rutrum magna, non ultrices nisi. Vivamus egestas venenatis erat, ultricies cursus metus dapibus sed. Suspendisse eleifend at lacus ac rhoncus. Duis varius ullamcorper magna tempus feugiat. Nullam eleifend ut orci vel maximus. Pellentesque convallis metus eget ex ullamcorper, eu finibus ipsum pellentesque. In pellentesque tellus et turpis rutrum, nec porta velit convallis. Vivamus dignissim sapien non ipsum feugiat, id maximus ex pretium. Nunc enim leo, ullamcorper vitae arcu consectetur, dapibus consequat risus. Nunc et justo sagittis, finibus dui nec, sagittis sapien. Integer nec pellentesque sapien. Curabitur quis finibus massa. Fusce cursus turpis suscipit, accumsan sem non, dictum nulla. Aliquam rutrum lorem augue, ac auctor mauris laoreet cursus. Nam ipsum lorem, feugiat quis elit eu, mattis finibus nunc. Nam rhoncus in enim non fringilla. | |
| .container | |
| .gallery | |
| .container-fluid | |
| .image | |
| .image | |
| .image | |
| .image | |
| .container-fluid | |
| .image | |
| .image | |
| .image | |
| .image | |
| .container-fluid | |
| .image | |
| .image | |
| .image | |
| .image |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(window).scroll(function(){ | |
| var wScroll= $(this).scrollTop(); | |
| if (wScroll > $('.gallery').offset().top - $(window).height()/1.5){ | |
| $('.gallery .image').each(function(i){ | |
| setTimeout(function(){ | |
| $('.gallery .image').eq(i).addClass('is-showing'); | |
| }, 150*(i+1)); | |
| }) | |
| } | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .image | |
| background-color: #ccc | |
| height: 200px | |
| width: 150px | |
| margin: 20px | |
| float: left | |
| opacity: 0 | |
| transform: translateX(-20px) | |
| transition: all 0.3s ease-in-out | |
| &.is-showing | |
| opacity: 1 | |
| transform: translateX(0) | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment