A Pen by Dariel Noel Vila Plagado on CodePen.
Created
March 26, 2015 03:37
-
-
Save rafszul/27d4aee02707b84bd294 to your computer and use it in GitHub Desktop.
AniJS ScrollReveal Quick Start
This file contains 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
| <title>AniJS ScrollReveal</title> | |
| <head> | |
| <link rel="stylesheet" href="http://anijs.github.io/lib/animationcss/animate.css" /> | |
| </head> | |
| <body> | |
| <!-- The example --> | |
| <div class="container center"> | |
| <p>Just scroll the window ;)</p> | |
| <div class="item orange" | |
| data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat"> | |
| <i class="fa fa-behance"></i> | |
| </div> | |
| <div class="item pink" | |
| data-anijs="if: scroll, on: window, do: bounceIn animated, before: $scrollReveal"> | |
| <i class="fa fa-pinterest"></i> | |
| </div> | |
| <div class="item green" | |
| data-anijs="if: scroll, on: window, do: rotateIn animated, before: $scrollReveal"> | |
| <i class="fa fa-dribbble"></i> | |
| </div> | |
| <div class="item blue" | |
| data-anijs="if: scroll, on: window, do: rubberBand animated, before: $scrollReveal"> | |
| <i class="fa fa-dropbox"></i> | |
| </div> | |
| <div class="item orange" | |
| data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal"> | |
| <i class="fa fa-html5"></i> | |
| </div> | |
| <div class="item pink" | |
| data-anijs="if: scroll, on: window, do: bounceIn animated, before: $scrollReveal"> | |
| <i class="fa fa-wordpress"></i> | |
| </div> | |
| <div class="item green" | |
| data-anijs="if: scroll, on: window, do: rotateIn animated, before: $scrollReveal"> | |
| <i class="fa fa-reddit"></i> | |
| </div> | |
| <div class="item blue" | |
| data-anijs="if: scroll, on: window, do: rubberBand animated, before: $scrollReveal"> | |
| <i class="fa fa-umbrella"></i> | |
| </div> | |
| </div> | |
| <!-- End example --> | |
| <script src="http://anijs.github.io/lib/anijs/anijs.js"></script> | |
| <script src="http://anijs.github.io/lib/anijs/helpers/scrollreveal/anijs-helper-scrollreveal.js"></script> | |
| </body> |
This file contains 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
| /*The CSS example*/ | |
| .item{ | |
| padding: 100px; | |
| color: white; | |
| width: 70px; | |
| text-align: center; | |
| font-size: 3em; | |
| display: inline-block; | |
| margin-right:10px; | |
| margin-top: 10px; | |
| } | |
| .item i{ | |
| } | |
| .blue{ | |
| background-color: #3498db; | |
| } | |
| .orange{ | |
| background-color: #FBB44C; | |
| } | |
| .pink{ | |
| background-color: #FC797A; | |
| } | |
| .green{ | |
| background-color:#2ABB9B; | |
| } | |
| .container p{ | |
| color: #888; | |
| padding: 40px 0; | |
| } | |
| /*End CSS example*/ | |
| /*Other CSS*/ | |
| body{ | |
| font-family: helvetica; | |
| font-size: 1.2em; | |
| } | |
| .center{ | |
| display: block; | |
| margin-left: auto; | |
| margin-right: auto; | |
| position:relative; | |
| width: 50%; | |
| } | |
| .container{ | |
| margin-top: 50px; | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment