Demo for ScrollMagic. Customized by making the layout liquid and using transforms w/multiple panel transitions to create cool sliding effects that are curtain-esque.
http://janpaepke.github.io/ScrollMagic
Forked from Dennis Gaebel's Pen HowTo : ScrollMagic Paneling.
| <div id="content-wrapper"> | |
| <section id="pin" class="scroll-magic-section"> | |
| <h3 id="hlpin">Pinned Yo!</h3> | |
| <div id="wipe"> | |
| <div class="container"> | |
| <h3>Wipe Uno TranslateY</h3> | |
| </div> | |
| </div> | |
| <div id="second-wipe"> | |
| <div class="container"> | |
| <h3>Wipe Dos TranslateY</h3> | |
| </div> | |
| </div> | |
| <div id="slide"> | |
| <div class="container"> | |
| <h3>Slide Bounce Brosicle</h3> | |
| <h3> ZOMG Colors!</h3> | |
| </div> | |
| </div> | |
| <div id="slide-dos"> | |
| <div class="container"> | |
| <h3>Slide TranslateX</h3> | |
| </div> | |
| </div> | |
| <div id="unpin"> | |
| <div class="container"> | |
| <h3>Unpinzd Dawg</h3> | |
| </div> | |
| </div> | |
| </section> | |
| </div> |
| // init the controller | |
| var controller = new ScrollMagic({ | |
| globalSceneOptions: { | |
| triggerHook: "onLeave" | |
| } | |
| }); | |
| // pinani | |
| var pinani = new TimelineMax() | |
| // panel wipe uno | |
| .add(TweenMax.to("#wipe", 1, {transform: "translateY(0)"})) | |
| // panel wipe dos | |
| .add(TweenMax.to("#second-wipe", 1, {transform: "translateY(0)"})) | |
| // panel slide bounce | |
| .add(TweenMax.to("#slide", 1, {top: "0%", ease: Bounce.easeOut, delay: 0.2})) | |
| // panel slide color | |
| .add([ | |
| TweenMax.to("#slide h3:first-child", 0.2, {autoAlpha: 0}), | |
| TweenMax.from("#slide h3:last-child", 0.2, {autoAlpha: 0}) | |
| ]) | |
| .add([ | |
| TweenMax.to("#slide", 0.3, {backgroundColor: "yellow"}), | |
| TweenMax.to("#slide h3:last-child", 0.3, {color: "blue"}) | |
| ]) | |
| .add([ | |
| TweenMax.to("#slide", 0.3, {backgroundColor: "green"}), | |
| TweenMax.to("#slide h3:last-child", 0.3, {color: "red"}) | |
| ]) | |
| .add([ | |
| TweenMax.to("#slide", 0.3, {backgroundColor: "red"}), | |
| TweenMax.to("#slide h3:last-child", 0.3, {color: "white"}) | |
| ]) | |
| .add([ | |
| TweenMax.to("#slide", 0.3, {backgroundColor: "#c7e1ff"}), | |
| TweenMax.to("#slide h3:last-child", 0.3, {color: "black"}) | |
| ]) | |
| // panel slide translateX | |
| .add(TweenMax.to("#slide-dos", 1, {transform: "translateX(0)"})) | |
| // panel unpinned | |
| .add(TweenMax.from("#unpin", .5, {top: "100%"})); | |
| // panel section pin | |
| new ScrollScene({ | |
| triggerElement: "section#pin", | |
| duration: 1100 | |
| }) | |
| .setTween(pinani) | |
| .setPin("section#pin") | |
| .addTo(controller); |
| @import "compass/css3"; | |
| // General Styles | |
| // ==================================================================== | |
| body { | |
| background: #c7e1ff; | |
| font-family: "Source Sans Pro", Arial, sans-serif; | |
| font-size: 13px; | |
| -webkit-tap-highlight-color: rgba(0,0,0,0); | |
| } | |
| body, | |
| html { | |
| height: 100% | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4 { | |
| font-family: "Josefin Slab", serif; | |
| font-weight: bold; | |
| } | |
| h1 { | |
| font-style: italic; | |
| font-weight: bold; | |
| font-size: 22px; | |
| } | |
| h2 { | |
| font-size: 18px; | |
| } | |
| .noselect * { | |
| user-select: none; | |
| } | |
| // ScrollMagic Containers | |
| // ==================================================================== | |
| .container { | |
| height: 100%; | |
| margin: 0 auto; | |
| max-width: 900px; | |
| position: relative; | |
| width: 100%; | |
| } | |
| #content-wrapper { | |
| height: 100%; | |
| min-height: 500px; | |
| width: 100%; | |
| } | |
| .scroll-magic-section { | |
| height: 100%; | |
| } | |
| // ScrollMagic Pin Panel | |
| // ==================================================================== | |
| #pin { | |
| overflow: hidden; | |
| width: 100%; | |
| h3 { | |
| margin: -40px 0 0 0; | |
| position: relative; | |
| top: 50%; | |
| font-size: 80px; | |
| line-height: 80px; | |
| text-align: center; | |
| } | |
| } | |
| // ScrollMagic Wipe Panels | |
| // ==================================================================== | |
| #wipe { | |
| height: 100%; | |
| overflow: hidden; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| transform: translateY(100%); | |
| width: 100%; | |
| background: #2e639e; | |
| h3 { | |
| color: white; | |
| } | |
| } | |
| #second-wipe { | |
| height: 100%; | |
| overflow: hidden; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| transform: translateY(100%); | |
| width: 100%; | |
| background: red; | |
| } | |
| // ScrollMagic Slide Panels | |
| // ==================================================================== | |
| #slide { | |
| height: 100%; | |
| position: absolute; | |
| top: -100%; | |
| width: 100%; | |
| background: #c7e1ff; | |
| h3 { | |
| position: absolute; | |
| width: 100%; | |
| } | |
| } | |
| #slide-dos { | |
| height: 100%; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| transform: translateX(-100%); | |
| width: 100%; | |
| background: tan; | |
| } | |
| // ScrollMagic Unpin Panel | |
| // ==================================================================== | |
| #unpin { | |
| height: 100%; | |
| position: absolute; | |
| top: 0; | |
| width: 100%; | |
| background: maroon; | |
| } |