Parallax content

by M J

HTML

<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<!-- endbuild -->
<!-- build:js scripts/vendor/modernizr.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<!-- endbuild -->
<body>
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

                </button> <a class="navbar-brand" href="#">Project name</a>

            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#top">Home</a>
                    </li>
                    <li><a href="#middle">About</a>
                    </li>
                    <li><a href="#bottom">Contact</a>
                    </li>
                    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"...

CSS

.parallaxParent {
	    height: 100vh;
	    overflow: hidden;
	}
	.parallaxParent > * {
	    height: 200%;
	    position: relative;
	    top: -100%;
	}
	#box {
	    border:1px solid red;
	    position: absolute;
	    color: #ff00ff;
	    font-size: 70px;
	    height: 100px;
	    width: 100px;
	    top: 0px;
	    left: 50%;
	    margin-left: 0%;
	    z-index: 10;
	}
	#box_param {
	    position: absolute;
	    border:1px solid blue;
	    height: 500px;
	    width: 100px;
	    top: 200px;
	    left: 50%;
	}
	/* */
	/*
	General styles
*/
	body {
	    font-family:"Source Sans Pro", Arial, sans-serif;
	    background-color: #c7e1ff;
	    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;
	}
	h1 {
	    font-style: italic;
	    font-weight: bold;
	    font-size: 40px;
	}
	h2 {
	    font-size: 20px;
	}
	a, a:visited {
	    text-decoration: none;
	    color: #2e639e;
	}
	a:hover {
	    text-decoration: underline;
	}
	.touchonly {
	    display: none;
	}
	html.touch .touchonly {
	    display: block;
	}
	.noselect * {
	    user-select: none;
	    -webkit-user-select: none;
	    -khtml-user-select: none;
	    -moz-user-select: none;
	    -o-user-select: none;
	}
	.doselect * {
	    user-select: auto;
	    -webkit-user-select: auto;
	    -khtml-user-select: auto;
	    -moz-user-select: auto;
	    -o-user-select: auto;
	}
	.clearfix:after {
	    content:".";
	    display: block;
	    clear: both;
	    visibility: hidden;
	    line-height: 0;
	    height: 0;
	}
	.clearfix {
	    display: inline-block;
	}
	html[xmlns] .clearfix {
	    display: block;
	}
	* html .clearfix {
	    height: 1%;
	}
	/*
	Containers
*/
	#content-wrapper, #example-wrapper {
	    height: 100%;
	}
	.scrollContainer {
	    overflow-y: scroll;
	    overflow-x: hidden;
	    width: 100%
	}
	.scrollContainer {
	    height: 100%;
	    margin: auto;
	}
	#example-wrapper .scrollContent {
	    height:...

JavaScript

//////////////////////////////////////////////////////
////////////   //// Parallax Animation    ////////////
//////////////////////////////////////////////////////

// init controller
var controller = new ScrollMagic.Controller({
    globalSceneOptions: {
        triggerHook: "onEnter",
        duration: "200%"
    }
});

// build scenes
// build tween1
var tween1 = new TimelineMax();
tween1.to("#parallax1 > div", 1, {
    y: "80%",
    ease: Linear.easeNone
});

var scene = new ScrollMagic.Scene({
    triggerElement: "#parallax1"
})
    .setTween(tween1)
    .addIndicators()
    .addTo(controller);

new ScrollMagic.Scene({
    triggerElement: "#parallax1"
})
    .setTween("#box", 0.10, {
    alpha: 0,
    yPercent: 0,
    y: "800%",
    ease: Linear.easeNone
})
    .addIndicators()
    .addTo(controller);

new ScrollMagic.Scene({
    triggerElement: "#parallax2"
})
    .setTween("#parallax2 > div", {
    y: "80%",
    ease: Linear.easeNone
})
    .addIndicators()
    .addTo(controller);

new ScrollMagic.Scene({
    triggerElement: "#parallax3"
})
    .setTween("#parallax3 > div", {
    y: "80%",
    ease: Linear.easeNone
})
    .addIndicators()
    .addTo(controller);

/////----  End Core Parallax Animation  ---------------------------------------------->>





//////////////////////////////////////////////////////
////////////   ScrollMagic Anchor Links   ////////////
//////////////////////////////////////////////////////


// build tween
// var tween = TweenMax.from("#animate", 0.5, {autoAlpha: 0, scale: 0.7});

// build scene
var scene = new ScrollMagic.Scene({
    triggerElement: "a#top",
    duration: 400,
    triggerHook: "onLeave"
})
//.setTween(tween)
.addIndicators() // add indicators (requires plugin)
.addTo(controller);

// change behaviour of controller to animate scroll instead of jump
controller.scrollTo(function (newpos) {
    TweenMax.to(window, 0.5, {
        scrollTo: {
            y: newpos
        }
    });
});

//  bind scroll to anchor...