File: /home/guardianhealthsolutions/public_html/ScrollTrigger-master/example/horizontal.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ScrollTrigger - Scroll based animations with ease</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Erik Terwan">
<link href="style.css" rel="stylesheet">
<link href="demo.css" rel="stylesheet">
<style>
body
{
overflow: auto;
width: 800vw;
}
div.block
{
width: 70vw;
float: left;
}
div.block svg
{
position: absolute;
bottom: 50%;
width: 30px;
right: 50px;
animation: none;
transform: rotate(270deg);
}
</style>
</head>
<body>
<div class="block">
<h1 data-scroll="toggle(.scaleUpIn, .scaleUpOut) offset(-200px,0) addWidth">Scroll<span></span>Trigger</h1>
<h2 data-scroll="toggle(.fromBottomIn, .fromBottomOut) offset(-200px,0) addWidth">Add scroll based animations to your site with ease.</h2>
<svg viewBox="0 0 60 60">
<path d="M52.254 18.327c0.816-0.804 2.127-0.804 2.937 0s0.813 2.103 0 2.907l-23.724 23.49c-0.81 0.804-2.121 0.804-2.937 0l-23.724-23.49c-0.81-0.804-0.81-2.103 0-2.907 0.813-0.804 2.127-0.804 2.937 0l22.257 21.423 22.254-21.423z"></path>
</svg>
</div>
<div class="block">
<h1 data-scroll="toggle(.fromTopIn, .fromTopOut) centerHorizontal">CSS Animations</h1>
<h2 data-scroll="toggle(.fromBottomIn, .fromBottomOut) centerHorizontal">All animations are triggered by classes, so you can take advantage of the power that CSS3 animations give you.</h2>
</div>
<div class="block">
<h1 data-scroll="toggle(.fromLeftIn, .fromLeftOut) centerHorizontal">Vanilla JS</h1>
<h2 data-scroll="toggle(.fromRightIn, .fromRightOut) centerHorizontal">It's written in vanilla javascript, so you can use it with any framework.</h2>
</div>
<div class="block">
<h1 data-scroll="toggle(.scaleDownIn, .scaleDownOut) offset(-200px,0) addWidth">Request Animation Frame</h1>
<h2 data-scroll="toggle(.fromBottomIn, .fromBottomOut) offset(-200px,0) addWidth">It uses the window.requestAnimationFrame method so it doesn't jack the users scroll. Animations are triggered when the browser is ready for it.</h2>
</div>
<div class="block">
<h1 data-scroll="toggle(.fromRightIn, .fromRightOut) offset(-200px,0) addWidth">Simple syntax</h1>
<h2 data-scroll="toggle(.fromLeftIn, .fromLeftOut) offset(-200px,0) addWidth">You define the options inside the HTML attribute, so after you have initialised the ScrollTrigger you don't have to touch JavaScript again.</h2>
</div>
<div class="block">
<h1 data-scroll="toggle(.fromRightIn, .fromRightOut) offset(-200px,0) addWidth">Custom<span></span>izable</h1>
<h2 data-scroll="toggle(.fromLeftIn, .fromLeftOut) offset(-200px,0) addWidth">ScrollTrigger offers a range of options, from calling custom JavaScript functions to defining custom offsets and classes.</h2>
<h3 data-scroll="toggle(.fromRightIn, .fromRightOut) offset(-200px,0) addWidth" data-scroll-showCallback="counter">You scrolled past this block <span>0</span> times.</h3>
</div>
<div class="block">
<h1 data-scroll="toggle(.fromRightIn, .fromRightOut) offset(-200px,0) addWidth once">Versatile</h1>
<h2 data-scroll="toggle(.fromLeftIn, .fromLeftOut) offset(-200px,0) addWidth once">ScrollTrigger supports vertical and horizontal scrolling, check out the <a href="index.html">vertical demo</a>.</h2>
<h3 data-scroll="toggle(.fromRightIn, .fromRightOut) offset(-200px,0) addWidth once">This block only animates once.</h3>
</div>
<div class="block">
<h1>Open source</h1>
<h2>The project, with documentation, is on <a href="https://github.com/terwanerik/ScrollTrigger">GitHub</a>. Give it some love!</h2>
<h3>Written by <a href="https://erikterwan.com" target="_blank">Erik Terwan</a></h3>
</div>
<script src="../ScrollTrigger.min.js"></script>
<script>
window.counter = function() {
// this refers to the html element with the data-scrollCall tag
var span = this.querySelector('span');
var current = parseInt(span.textContent);
span.textContent = current + 1;
};
document.addEventListener('DOMContentLoaded', function(){
var trigger = new ScrollTrigger();
});
</script>
<link href="https://fonts.googleapis.com/css?family=Work+Sans:200,300,500,700" rel="stylesheet">
</body>
</html>