RootZanli & NinjaCr3

: / home / o5t6x7pgljbm / public_html / tuitioncoin.org / assets / vendor / rellax / tests /
Filename : destroy.html
back
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<style>
		html, body{
			color: #223;
			font-size: 21pt;
			margin: 0; padding: 0;
		}
		nav{
			font-size: 21pt;
			line-height: 1.5em;
			position: fixed;
			bottom: 0; left: 0;
		}
		nav a{ color: inherit; }

		.col{
			text-align: center;
			width: 50%;
			float: left;
			box-sizing: border-box;
		}

		h4{ text-align: center;}

		.container{
			display: flex;
			align-items: center;
			outline: 1px solid #eed;
			font-size: 42pt;
			/*padding: 37.5vh 12.5vw;*/
			padding: 0 12.5vw;
			height: 200vh;
		}
		.block{
			background: #223;
			color: #eed;
			line-height: 25vh;
			text-align: right;
			/*padding: 0 42pt;*/
			margin-top: 20vh;
			height: 200px;
			width: 400px;
			position: relative;
		}
		span{
			background: #eed;
			color: #223;
			line-height: 25vh;
			text-align: left;
			padding: 0 42pt;
			display: block;
			width: 50%;
			position: absolute;
			top: 0; left: 0;
			box-sizing: border-box;
		}
    button {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
    }
	</style>
</head>
<body>
  <h4>cancelAnimation upon destroy <br><small>(check performance panel)</small></h4>
  <button id="destroy">destroy</button>
	<section>
		<div class="col">
			<br>With Percentage (0.5) <br><br>
			<div id="21" class="container"><div class="block">#1<span class="rellax" data-rellax-percentage="0.5">#1</span></div></div>
			<div id="22" class="container"><div class="block">#2<span class="rellax" data-rellax-percentage="0.5">#2</span></div></div>
			<div id="23" class="container"><div class="block">#3<span class="rellax" data-rellax-percentage="0.5">#3</span></div></div>
			<div id="24" class="container"><div class="block">#4<span class="rellax" data-rellax-percentage="0.5" style="transition: transform 10s cubic-bezier(0,1,.5,1);">#4</span></div></div>
			<div id="25" class="container"><div class="block">#5<span class="rellax" data-rellax-percentage="0.5" style="transition: transform 10s cubic-bezier(0,1,.5,1);">#5</span></div></div>
			<div id="26" class="container"><div class="block">#6<span class="rellax" data-rellax-percentage="0.5" style="transition: transform 10s cubic-bezier(0,1,.5,1);">#6</span></div></div>
		</div>
		<div class="col">
			<br>Without Percentage <br><br>
			<div id="21" class="container"><div class="block">#1<span class="rellax" style="transition: transform 10s cubic-bezier(0,1,.5,1);">#1</span></div></div>
			<div id="22" class="container"><div class="block">#2<span class="rellax" style="transition: transform 10s cubic-bezier(0,1,.5,1);">#2</span></div></div>
			<div id="23" class="container"><div class="block">#3<span class="rellax" style="transition: transform 10s cubic-bezier(0,1,.5,1);">#3</span></div></div>
			<div id="24" class="container"><div class="block">#4<span class="rellax">#4</span></div></div>
			<div id="25" class="container"><div class="block">#5<span class="rellax">#5</span></div></div>
			<div id="26" class="container"><div class="block">#6<span class="rellax">#6</span></div></div>
		</div>
	</section>

	<!-- Scripts -->
	<script src="../rellax.js"></script>
	<script>

    var rellax = new Rellax('.rellax', {
      center: true,
      callback: function(positions) {
        // callback every position change
        console.log(positions);
      }
    });

    // test cancaelAnimation on Rellax destroy
    document.querySelector('#destroy').addEventListener('click', function() {

      rellax.destroy();

    }, false);
	</script>
</body>
</html>