1<!DOCTYPE html> 2 3<html lang="en"> 4<head> 5 <meta charset="utf-8"> 6 <title>ScrollMagic Documentation</title> 7 8
8<script src="scripts/prettify/prettify.js"> </script>
8 9
9<script src="scripts/prettify/lang-css.js"> </script>
9 10 <!--[if lt IE 9]> 11
11<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
11 12 <![endif]--> 13 <link type="text/css" rel="stylesheet" href="styles/sunlight.default.css"> 14 <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css"> 15 <link rel="shortcut icon" href="../assets/img/favicon.ico" type="image/x-icon"> 16 17 18 <link type="text/css" rel="stylesheet" href="styles/site.cosmo.css"> 19 20</head> 21 22<body> 23<div class="container-fluid"> 24 <div class="navbar navbar-fixed-top navbar-inverse"> 25 <div class="navbar-inner"> 26 <a class="brand" href="index.html">ScrollMagic</a> 27 <ul class="nav"> 28 29 <li class="dropdown"> 30 <a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b 31 class="caret"></b></a> 32 33 <ul class="dropdown-menu "> 34 35 <li> 36 <a href="ScrollMagic.Controller.html">Controller</a> 37 </li> 38 39 <li> 40 <a href="ScrollMagic.Scene.html">Scene</a> 41 </li> 42 43 44 </ul> 45 </li> 46 47 <li class="dropdown"> 48 <a href="events.list.html" class="dropdown-toggle" data-toggle="dropdown">Events<b 49 class="caret"></b></a> 50 51 <ul class="dropdown-menu "> 52 53 <li> 54 <a href="ScrollMagic.Scene.html#event:add">add</a> 55 </li> 56 57 <li> 58 <a href="ScrollMagic.Scene.html#event:change">change</a> 59 </li> 60 61 <li> 62 <a href="ScrollMagic.Scene.html#event:destroy">destroy</a> 63 </li> 64 65 <li> 66 <a href="ScrollMagic.Scene.html#event:end">end</a> 67 </li> 68 69 <li> 70 <a href="ScrollMagic.Scene.html#event:enter">enter</a> 71 </li> 72 73 <li> 74 <a href="ScrollMagic.Scene.html#event:leave">leave</a> 75 </li> 76 77 <li> 78 <a href="ScrollMagic.Scene.html#event:progress">progress</a> 79 </li> 80 81 <li> 82 <a href="ScrollMagic.Scene.html#event:remove">remove</a> 83 </li> 84 85 <li> 86 <a href="ScrollMagic.Scene.html#event:shift">shift</a> 87 </li> 88 89 <li> 90 <a href="ScrollMagic.Scene.html#event:start">start</a> 91 </li> 92 93 <li> 94 <a href="ScrollMagic.Scene.html#event:update">update</a> 95 </li> 96 97 98 </ul> 99 </li> 100 101 <li class="dropdown"> 102 <a href="mixins.list.html" class="dropdown-toggle" data-toggle="dropdown">Plugins<b 103 class="caret"></b></a> 104 105 <ul class="dropdown-menu "> 106 107 <li> 108 <a href="animation.GSAP.html">GSAP</a> 109 </li> 110 111 <li> 112 <a href="animation.Velocity.html">Velocity</a> 113 </li> 114 115 <li> 116 <a href="debug.addIndicators.html">addIndicators</a> 117 </li> 118 119 <li> 120 <a href="framework.jQuery.html">jQuery</a> 121 </li> 122 123 124 </ul> 125 </li> 126 127 </ul> 128 </div> 129 </div> 130 131 <div class="row-fluid"> 132 133 134 <div class="span8"> 135 136 <div id="main"> 137 138 139 140 141 <span class="page-title">Documentation</span> 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 <section> 164 <article><h1 id="scrollmagic-a-href-https-github-com-janpaepke-scrollmagic-blob-master-changelog-md-class-version-title-whats-new-v2-0-7-a-build-status">ScrollMagic <a href='https://github.com/janpaepke/ScrollMagic/blob/master/CHANGELOG.md' class='version' title='Whats New?'>v2.0.7</a> <a href="https://travis-ci.org/janpaepke/ScrollMagic"><img src="https://api.travis-ci.org/janpaepke/ScrollMagic.svg?branch=master" alt="Build Status"></a></h1> 165<h3 id="the-javascript-library-for-magical-scroll-interactions-">The javascript library for magical scroll interactions.</h3> 166<p><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=8BJC8B58XHKLL" title="Shut up and take my money!"><img src="https://scrollmagic.io/assets/img/btn_donate.svg" alt="Donate" title="Shut up and take my money!"></a></p> 167<p><strong>Quicklinks:</strong> <a href="#about-the-library">About</a> | <a href="#availability">Download</a> | <a href="#installation">Installation</a> | <a href="#usage">Usage</a> | <a href="#help">Help</a> | <a href="#browser-support">Compatibility</a> | <a href="#about-the-author">Author</a> | <a href="#license">License</a> | <a href="#thanks">Thanks</a></p> 168<hr> 169<p>ScrollMagic helps you to easily react to the user's current scroll position.<br>It's the perfect library for you, if you want to ...</p> 170<ul> 171<li>animate based on scroll position â either trigger an animation or synchronize it to the scrollbar movement (like a playback scrub control).</li> 172<li>pin an element starting at a specific scroll position â either indef
172initely or for a limited amount of scroll progress (sticky elements).</li> 173<li>toggle CSS classes of elements on and off based on scroll position.</li> 174<li>effortlessly add parallax effects to your website.</li> 175<li>create an infinitely scrolling page (ajax load of additional content).</li> 176<li>add callbacks at specific scroll positions or while scrolling past a specific section, passing a progress parameter.</li> 177</ul> 178<p>Check out <a href="http://scrollmagic.io">the demo page</a>, browse <a href="http://scrollmagic.io/examples/index.html">the examples</a> or read <a href="http://scrollmagic.io/docs/index.html">the documentation</a> to get started.<br>If you want to contribute please <a href="mailto:[email protected]">get in touch</a> and let me know about your specialty and experience.</p> 179<h2 id="about-the-library">About the Library</h2> 180<p>ScrollMagic is a scroll interaction library.</p> 181<p>It's a complete rewrite of its predecessor <a href="https://github.com/johnpolacek/superscrollorama">Superscrollorama</a> by <a href="http://johnpolacek.com">John Polacek</a>.<br>A plugin-based architecture offers easy customizability and extendability.</p> 182<p>To implement animations, ScrollMagic can work with multiple frameworks.<br>The recommended solution is the <a href="http://www.greensock.com/gsap-js/">Greensock Animation Platform (GSAP)</a> due to its stability and feature richness. For a more lightweight approach the <a href="http://VelocityJS.org">VelocityJS</a> framework is also supported. Alternatively custom extensions can be implemented or the necessity of a framework can be completely avoided by animating simply using CSS and class toggles.</p> 183<p>ScrollMagic was developed with these principles in mind:</p> 184<ul> 185<li>optimized performance</li> 186<li>lightweight (6KB gzipped)</li> 187<li>flexibility and extendibility</li> 188<li>mobile compatibility</li> 189<li>event management</li> 190<li>support for responsive web design</li> 191<li>object oriented programming and object chaining</li> 192<li>readable, centralized code and intuitive development</li> 193<li>support for both x and y direction scorlling (even both on one page)</li> 194<li>support for scrolling inside div containers (even multiple on one page)</li> 195<li>extensive debugging and logging capabilities</li> 196<li>detailed documentation</li> 197<li>many application examples</li> 198</ul> 199<p><strong>Is ScrollMagic the right library for you?</strong><br>ScrollMagic takes an object oriented approach using a controller for each scroll container and attaching multiple scenes defining what should happen at what part of the page. While this offers a great deal of control, it might be a little confusing, especially if you're just starting out with javascript.<br>If the above points are not crucial for you and you are just looking for a simple solution to implement css animations I would strongly recommend taking a look at the awesome <a href="http://prinzhorn.github.io/skrollr/">skrollr</a> project. It almost solely relies on element attributes and thus requires minimal to no javascript knowledge.</p> 200<h2 id="availability">Availability</h2> 201<p>To get your copy of ScrollMagic you have the choice between four options:</p> 202<p><strong>
202Option 1: GitHub</strong><br>Download a zip file containing the source code, demo page, all examples and documentation from the <a href="https://github.com/janpaepke/ScrollMagic/releases">GitHub releases page</a> or clone the package to your machine using the git command line interface:</p> 203<pre class="prettyprint source lang-bash"><code>git clone git://github.com/janpaepke/ScrollMagic.git</code></pre><p><strong>Option 2: Bower</strong><br>ScrollMagic is also <a href="http://bower.io/search/?q=scrollmagic">available on bower</a> and will only install the necessary source code, ignoring all example and documentation files.<br>Please mind that since they are not core dependencies, you will have to add frameworks like GSAP, jQuery or Velocity manually, should you choose to use them.</p> 204<pre class="prettyprint source lang-bash"><code>bower install scrollmagic</code></pre><p><strong>Option 3: npm</strong><br>If you prefer the <a href="https://www.npmjs.com/package/scrollmagic">node package manager</a>, feel free to use it.<br>Keep in mind that like with bower non-crucial files will be ignored (see above).</p> 205<pre class="prettyprint source lang-bash"><code>npm install scrollmagic</code></pre><p><strong>Option 4: CDN</strong><br>If you don't want to host ScrollMagic yourself, you can include it from <a href="https://cdnjs.com/libraries/ScrollMagic">cdnjs</a>:</p> 206<pre class="prettyprint source"><code>http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js</code></pre><p>All plugins and uncompressed files are also available on cdnjs.<br>For example:</p> 207<pre class="prettyprint source"><code>http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.js 208http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js</code></pre><h2 id="installation">Installation</h2> 209<p>Include the <strong>core</strong> library in your HTML file:</p> 210<pre class="prettyprint source lang-html"><code><script src="js/scrollmagic/uncompressed/ScrollMagic.js"></script></code></pre><p>And you're ready to go!<br>For deployment use the minified version <strong>instead</strong>:</p> 211<pre class="prettyprint source lang-html"><code><script src="js/scrollmagic/minified/ScrollMagic.min.js"></script></code></pre><p><em><strong>NOTE:</strong> The logging feature is removed in the minified version due to file size considerations.</em></p> 212<p>To use <strong>plugins</strong> like the indicators visualization, simply include them additionally to the main library:</p> 213<pre class="prettyprint source lang-html"><code><script src="js/scrollmagic/uncompressed/plugins/debug.addIndicators.js"></script></code></pre><p>To learn how to configure <strong>RequireJS</strong>, when using AMD, please <a href="https://github.com/janpaepke/ScrollMagic/wiki/Getting-Started-:-Using-AMD">read here</a>.</p> 214<h2 id="usage">Usage</h2> 215<p>The basic ScrollMagic design pattern is one controller, which has one or more scenes attached to it.<br>Each scene is used to define what happens when the container is scrolled to a specific offset.</p> 216<p>Here's a basic workflow example:</p> 217<pre class="prettyprint source lang-javascript"><code>// init controller 218var controller = new ScrollMagic.Controller(); 219 220// create a scene 221new ScrollMagic.Scene({ 222 duration: 100, // the scene should last for a scroll distance of 100px 223 offset: 50 // start this scene after scrolling for 50px 224}) 225 .setPin('#my-sticky-element') // pins the element for the the scene's duration 226 .addTo(controller); // assign the scene to the controller</code></pre><p>To learn more about the ScrollMagic code structure, please <a href="https://github.com/janpaepke/ScrollMagic/wiki/Getting-Started-:-How-to-use-ScrollMagic">read here</a>.</p> 227<h2 id="help">Help</h2> 228<p>To get started, check out the available learning resources <a href="https://github.com/janpaepke/ScrollMagic/wiki">in the wiki section</a>.<br>Be sure to have a look at the <a href="http://janpaepke.github.com/ScrollMagic/examples/index.html">examples</a> to get source code pointers and make use of the <a href="http://janpaepke.github.com/ScrollMagic/d
228ocs/index.html">documentation</a> for a complete reference.</p> 229<p>If you run into trouble using ScrollMagic please follow the <a href="https://github.com/janpaepke/ScrollMagic/wiki/Troubleshooting-Guide">Troubleshooting guide</a>.</p> 230<p><strong>Please do not post support requests in the github issue section</strong>, as it's reserverd for issue and bug reporting.<br>If all above options for self-help fail, please use <a href="https://stackoverflow.com/questions/tagged/scrollmagic">Stack Overflow</a> or the <a href="https://support.scrollmagic.io/?utm_source=github&utm_medium=link">ScrollMagic Premium Support</a>.</p> 231<h2 id="browser-support">Browser Support</h2> 232<p>ScrollMagic aims to support all major browsers even in older versions:<br>Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+</p> 233<h2 id="about-the-author">About the Author</h2> 234<p>I am a creative coder based in Vienna, Austria.</p> 235<p><a href="http://www.janpaepke.de">Learn more on my website</a> or <a href="http://twitter.com/janpaepke">Follow me on Twitter</a></p> 236<h2 id="license">License</h2> 237<p>ScrollMagic is dual licensed under the MIT license and GPL.<br>For more information click <a href="https://github.com/janpaepke/ScrollMagic/blob/master/LICENSE.md">here</a>.</p> 238<h2 id="thanks">Thanks</h2> 239<p>This library was made possible by many people who have supported it with passion, donations or advice. Special thanks go out to: <a href="https://github.com/johnpolacek">John Polacek</a>, <a href="https://github.com/greensock">Jack Doyle</a>, <a href="https://github.com/paulirish">Paul Irish</a>, <a href="https://github.com/ncerminara">Nicholas Cerminara</a>, <a href="https://github.com/krnlde">Kai Dorschner</a>, <a href="https://github.com/petr-tichy">Petr Tichy</a> and <a href="https://github.com/grayghostvisuals">Dennis Gaebel</a>.</p></article> 240 </section> 241 <style type="text/css"> 242 h1.page-title { 243 display: none; 244 } 245 header h2 { 246 display: none; 247 } 248 span.page-title { 249 margin-bottom: 20px; 250 } 251 </style> 252 253 254 255 256 257 258 259 </div> 260 261 <div class="clearfix"></div> 262 <footer> 263 264 265 <span class="copyright"> 266 © Jan Paepke 2015 267 </span> 268 <br /> 269 270 <span class="jsdoc-message"> 271 Documentation generated by <a href="https://github.com/jsdoc3/jsdoc" target="_blank">JSDoc 3.5.5</a> 272 using a customized version of the <a href="https://github.com/terryweiss/docstrap" target="_blank">DocStrap template</a>. 273 </span> 274 </footer> 275 </div> 276 277 278 <div class="span3"> 279 <div id="toc"></div> 280 </div> 281 282 <br clear="both"> 283 </div> 284 285 </div> 286
286<script src="scripts/sunlight.js"></script>
286 287
287<script src="scripts/sunlight.javascript.js"></script>
287 288
288<script src="scripts/sunlight-plugin.doclinks.js"></script>
288 289
289<script src="scripts/sunlight-plugin.linenumbers.js"></script>
289 290
290<script src="scripts/sunlight-plugin.menu.js"></script>
290 291
291<script src="scripts/jquery.min.js"></script>
291 292
292<script src="scripts/jquery.scrollTo.js"></script>
292 293
293<script src="scripts/jquery.localScroll.js"></script>
293 294
294<script src="scripts/bootstrap-dropdown.js"></script>
294 295
295<script src="scripts/toc.js"></script>
295 296 297
297<script> prettyPrint(); </script>
297 298
298<script> Sunlight.highlightAll({lineNumbers:true, showMenu: true, enableDoclinks :true}); </script>
298 299 300
300<script> 301 function openDeeplinkedElement (skipAni) { 302 try { 303 $("dt h4.member-collapsed").filter(window.location.hash.substring(1).replace(":", "\\:")).trigger("click", skipAni); 304 } catch (e) { 305 console.warn("ah ah ah! :p"); 306 } 307 } 308 $( function () { 309 $( "#toc" ).toc( { 310 anchorName : function(i, heading, prefix) { 311 return $(heading).attr("id") || ( prefix + i ); 312 }, 313 selectors : "h1:visible,h2:visible,h3:visible,h4:visible", 314 onScrollFinish : openDeeplinkedElement, 315 highlightOffset : 10, 316 scrollOffset: 60 317 } ); 318 $( "#toc>ul" ).addClass( "nav nav-pills nav-stacked" ); 319 $( "#main span[id^='toc']" ).addClass( "toc-shim" ); 320 321 } ); 322 </script>
322 323 324 325
325<script> 326 $( function () { 327 // $('#main').localScroll({ 328 // offset: { top: 56 } //offset by the height of your header (give or take a few px, see what works for you) 329 // }); 330 // workaround for anchors below header... 331 window.setTimeout(function () { 332 $(document).scrollTop($(document).scrollTop()-60); 333 }, 1) 334 335 var hash = window.location.hash.substring(1).replace(":", "\\:"); 336 $( "dt h4.name" ).each( function () { 337 var $this = $( this ); 338 var icon = $( "<i/>" ).addClass( "icon-plus-sign" ).addClass( "pull-right" ).addClass( "icon-white" ); 339 var dt = $this.parents( "dt" ); 340 var children = dt.next( "dd" ); 341 342 $this.append( icon ).css( {cursor : "pointer"} ); 343 $this.addClass( "member-collapsed" ).addClass( "member" ); 344 if (hash != $this.attr("id")) { 345 children.hide(); 346 } 347 $this.toggle( function (e, skipAni) { 348 var scrollPos = $(document).scrollTop(); 349 window.location.hash = $(this).attr("id"); 350 $(document).scrollTop(scrollPos); 351 icon.addClass( "icon-minus-sign" ).removeClass( "icon-plus-sign" ).removeClass( "icon-white" ); 352 $this.addClass( "member-open" ).removeClass( "member-collapsed" ); 353 children.slideDown(skipAni ? 0 : undefined); 354 }, function () { 355 icon.addClass( "icon-plus-sign" ).removeClass( "icon-minus-sign" ).addClass( "icon-white" ); 356 $this.addClass( "member-collapsed" ).removeClass( "member-open" ); 357 children.slideUp(); 358 } ); 359 } ); 360 // open if deeplinked 361 if (hash.length > 0) 362 openDeeplinkedElement(true); 363 } ); 364 </script>
364 365 366 367
367<script type="text/javascript" src="../assets/js/tracking.js"></script>
367 368</body> 369</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.