I'd used may things and many ways. First i learnt and implemented, it wasnt working then i copied each and every code from internet. Followed "ihatetomatoes" and all his tutorials. But, it isn't working.
http://codepen.io/sumit_95/pen/MpVPxK
this what i did, please help me.
<!DOCTYPE html>
<html>
<head>
<title>Rooms Hourly</title>
<link rel="stylesheet" type="text/css" href="animate.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Snippet" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans" rel="stylesheet">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="newtry.css">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<link rel="shortcut icon" href="key.png" />
<!-- Bootstrap CDN -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/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/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
<script src="js/app.js"></script>
<script src="newtry.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenLite.min.js"></script>
</head>
<body>
<div class="parallax slide" id="parallax">
<div class="row">
<h1>ROOMS HOURLY</h1>
</div>
</div>
<div class="slidein slide" id="slidein">
<div class="row">
<h1>Slide and pin</h1>
</div>
</div>
<div class="slidein2 slide" id="slidein2">
<div class="row">
<div id="left">
<h1>From left</h1>
</div>
<div id="opacity">
<h1>Fade in</h1>
</div>
<div id="bottom">
<h1>From bottom</h1>
</div>
</div>
</div>
</body>
</html>
body {
margin: 0;
font-family: sans-serif;
}
.slide .row {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: white;
text-align: center;
}
.intro {
background: #305a5b;
}
.parallax {
background: 50% 0,url(bg50.png);
}
.slidein {
background: #5b3030;
}
.slidein2 {
background: #304b5b;
}
.slidein2 .row {
justify-content: space-around;
}
$(document).ready(function(){
//init ScrollMagic
var controller = new ScrollMagic.Controller();
//build a scene
var ourscene1 = new ScrollMagic.Scene({
triggerElemet: "#parallax",
triggerHook: "onEnter";
});
.duration('200%');
.setTween("parallax", {
backgroundPosition: "50% 100%",
ease: Linear.easeNone
});
.addIndicators();
.addTo(Controller);
var ourscene2 = new ScrollMagic.Scene({
triggerElement: "#slidein",
triggerHook: "onLeave",
});
.setPin("#slidein");
//.addIndicators() // add indicators (requires plugin)
.addTo(controller);
var ourscene3 = new ScrollMagic.Scene({
triggerElement: "#slidein2",
triggerHook: "onLeave",
});
.setPin("#slidein2");
//.addIndicators() // add indicators (requires plugin)
.addTo(controller);
});
Help me @PointC
