Skip to content

Instantly share code, notes, and snippets.

@pligor

pligor/app.ts

Created May 26, 2015 12:55
Show Gist options
  • Save pligor/1916bab627290b7b8010 to your computer and use it in GitHub Desktop.
Save pligor/1916bab627290b7b8010 to your computer and use it in GitHub Desktop.
Download ZIP
Successful attempt of using Scrollmagic to create a nice scrolling effect where bars are growing according to the amount of scroll. pinning the element on the screen is also important for this to work, scroll magic handles this as well
Raw
app.ts
/**
* Created by pligor on 4/17/15.
*/
/// <reference path="./declarations/greensock.d.ts" />
//declare a variable representing underscore so this typescript file will compile without errors
//declare var _: any;
declare
var ScrollMagic:any;
$(document).ready(function () {
//var offsetOfContainer = $("#tester").offset().top
//instead of using offset we are going to use a trigger object instead, trigger object must (by default)
// be in the middle of the screen at least to fire the pin (but you can configure it)
var controller = new ScrollMagic.Controller() //default settings
var triggerHook = 0.5
//var curOffset = parseInt(($(window).height() / 2).toString()) //because trigger is in the middle of the screen
//remember to set the container to be 100vh, meaning the height of the view is equal to the browser height
new ScrollMagic.Scene({
triggerHook: triggerHook, //values from 0 to 1, so we do not have to calibrate offset
triggerElement: "#trigger", //when this gets to the middle of the window the scene is triggered (unless the offset kicks in)
duration: 1000, //scrolling distance (in pixels)
offset: 0 //start the scene after scrolling for that many pixels
}).setPin("#tester"/*, {pushFollowers: false}*/).addTo(controller)
var durationForEachStepInPixels = 333
//var offsets = [0:N:1000]
var offsets = [0, 333, 666] //in order to get 0 on top
new ScrollMagic.Scene({
offset: offsets[0],
triggerHook: triggerHook, //values from 0 to 1, so we do not have to calibrate offset
triggerElement: "#trigger",
duration: durationForEachStepInPixels
}).setTween(TweenMax.to('#pv_generator_bar', 3, {
css: {width: "25%"}
})).addTo(controller)
new ScrollMagic.Scene({
offset: offsets[0],
triggerHook: triggerHook, //values from 0 to 1, so we do not have to calibrate offset
triggerElement: "#trigger",
duration: durationForEachStepInPixels
}).setTween(TweenMax.to('#consumption_bar', 3, {
css: {width: "20%"}
})).addTo(controller)
///////////////////////////////////
new ScrollMagic.Scene({
offset: offsets[1],
triggerHook: triggerHook, //values from 0 to 1, so we do not have to calibrate offset
triggerElement: "#trigger",
duration: durationForEachStepInPixels
}).setTween(TweenMax.to('#pv_generator_bar', 3, {
css: {width: "75%"}
})).addTo(controller)
new ScrollMagic.Scene({
offset: offsets[1],
triggerHook: triggerHook, //values from 0 to 1, so we do not have to calibrate offset
triggerElement: "#trigger",
duration: durationForEachStepInPixels
}).setTween(TweenMax.to('#consumption_bar', 3, {
css: {width: "55%"}
})).addTo(controller)
///////////////////////////////////
new ScrollMagic.Scene({
offset: offsets[2],
triggerHook: triggerHook, //values from 0 to 1, so we do not have to calibrate offset
triggerElement: "#trigger",
duration: durationForEachStepInPixels
}).setTween(TweenMax.to('#pv_generator_bar', 3, {
css: {width: "100%"}
})).addTo(controller)
new ScrollMagic.Scene({
offset: offsets[2],
triggerHook: triggerHook, //values from 0 to 1, so we do not have to calibrate offset
triggerElement: "#trigger",
duration: durationForEachStepInPixels
}).setTween(TweenMax.to('#consumption_bar', 3, {
css: {width: "100%"}
})).addTo(controller)
/*controller.addScene([
horizontalBarScene
])*/
})
Raw
index.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<header id="topdummy" style="height: 500px;background: #5834FF;">
<p>Hello world!</p>
</header>
<div id="dummy" style="height: 600px;background: #AA3432;">
<p>This is HTML5 Boilerplate!</p>
</div>
<!--<div id="allFlowers"></div>-->
<div id="trigger"></div>
<div id="tester" style="height: 100vh;outline: 1px solid black;">
<p style="text-decoration: line-through">ΧΡΗΜΑΤΙΚΟΣ ΣΥΜΨΗΦΙΣΜΟΣ: ΚΟΣΤΟΣ - ΚΕΡΔΟΣ</p>
<p>ΣΥΜΨΗΦΙΣΜΟΣ ΚΑΘΕ 4-ΜΗΝΟ ΒΑΣΕΙ ΕΝΕΡΓΕΙΑΣ (ΚΙΛΟΒΑΤΩΡΕΣ)</p>
<p>Παράδειγμα:</p>
<div id="horizontal_bars">
<div id="pv_generator_bar" class="horizontal_bar">
</div>
<div id="consumption_bar" class="horizontal_bar">
</div>
</div>
</div>
<div id="copy" style="height: 600px;background: #99F022;">
<p>nothing important here</p>
</div>
<footer style="height: 500px;background: #1090A2;">
<p>nothing really important here either</p>
</footer>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.min.js"></script>-->
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/vendor/underscore.js"></script>
<script src="js/vendor/backbone.js"></script>
<!--TweenMax includes TweenLite, CSSPlugin, EasePack, TimelineLite, TimelineMax, RoundPropsPlugin, BezierPlugin, AttrPlugin, and DirectionalRotationPlugin-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<!-- TODO check to see if more files are need from bower componenets to be loaded -->
<!--<script src="bower_components/greensock/src/uncompressed/TweenMax.js" type="text/javascript"></script>-->
<script src="bower_components/ScrollMagic/scrollmagic/uncompressed/ScrollMagic.js"></script>
<script src="bower_components/ScrollMagic/scrollmagic/uncompressed/plugins/animation.gsap.js"></script>
<script src="js/app.js" type="text/javascript"></script>
<!--currently we are trying with internal modules-->
<!-- but if you want to use external modules, requirejs is important which is
an entirely different approach to including js files in a webpage: -->
<!--Tutorial: http://www.codebelt.com/typescript/typescript-amd-with-requirejs-tutorial/-->
<!-- Tutorial: http://www.ringabell.org/en/un-simple-guide-pour-debuter-avec-requirejs/ -->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js" type="text/javascript"></script>-->
<!--<script type="text/javascript">window.requirejs || document.write('<script src="js/vendor/require.min.js"><\/script>')</script>-->
<!-- Keep the require.js close to main.js! even if they say you can put it anywhere and only data-main matters -->
<!--<script data-main="js/main" src="js/require.js"></script>-->
<!--Do we really need the "?v=1" after require.js (seen in one example) or not ????-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.js" type="text/javascript"></script>-->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<!--<script>
(function (b, o, i, l, e, r) {
b.GoogleAnalyticsObject = l;
b[l] || (b[l] =
function () {
(b[l].q = b[l].q || []).push(arguments)
});
b[l].l = +new Date;
e = o.createElement(i);
r = o.getElementsByTagName(i)[0];
e.src = 'https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e, r)
}(window, document, 'script', 'ga'));
ga('create', 'UA-XXXXX-X', 'auto');
ga('send', 'pageview');
</script>-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment