cyntss/Parallax-img-scroll

Go to file

cyntss add right positioning

Latest commit 66a054e

Apr 30, 2017

History

2 contributors

Users who have contributed to this file

75 lines (74 sloc) 5 KB

Raw Blame

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Parallax Images Scroll</title>
	<script src="js/jquery.js" type="text/javascript"></script>
	<script src="js/jquery.nicescroll.min.js" type="text/javascript"></script>
	<script src="js/parallaxImg.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="css/demotheme.css">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<script type="text/javascript">
	$(document).on("ready", function() {
	var parallaxSettings = {
	initialOpacity: 1, //from 0 to 1, e.g. 0.34 is a valid value. 0 = transparent, 1 = Opaque
	opacitySpeed: 0.1, //values from 0.01 to 1 -> 0.01: slowly appears on screen; 1: appears as soon as the user scrolls 1px
	pageLoader: true
	};

	parallaxImgScroll(parallaxSettings);
	});
	</script>
	</head>
	<body>
	<header>
	<nav>
	<a href="http://cyntss.github.io/Parallax-img-scroll/">Home</a><a href="http://cynt.co.nf/">Cyntss Page</a><a href="">Documentation</a>
	</nav>
	</header>
	<section>
	<article class="parallax-img-container">
	<h1>Parallax Image Scroll</h1>
	<h3>Give life to your website</h3>
	<a class="btn-download-init" href="js/parallaxImg.js">Download .JS</a>
	<!-- images for parallax -->
	<img src="img/assassins/smoke-01.png" class="parallax-move" data-ps-z-index="1" data-ps-speed="1" data-ps-vertical-position="700" data-ps-horizontal-position="420" />
	<img src="img/assassins/smoke-02.png" class="parallax-move" data-ps-z-index="1" data-ps-speed="0.5" data-ps-vertical-position="700" data-ps-horizontal-position="220" />
	<img src="img/assassins/smoke-03.png" class="parallax-move" data-ps-z-index="1" data-ps-speed="1" data-ps-vertical-position="700" data-ps-horizontal-position="300" />
	<img src="img/assassins/smoke-04.png" class="parallax-move" data-ps-z-index="1" data-ps-speed="0.5" data-ps-vertical-position="500" data-ps-horizontal-position="620" />
	<img src="img/assassins/smoke-05.png" class="parallax-move" data-ps-z-index="1" data-ps-speed="1" data-ps-vertical-position="600" data-ps-horizontal-position="0" />
	<img src="img/assassins/smoke-06.png" class="parallax-move" data-ps-z-index="1" data-ps-speed="0.4" data-ps-vertical-position="200" data-ps-horizontal-position="520" />
	<img src="img/assassins/smoke-07.png" class="parallax-move" data-ps-z-index="1" data-ps-speed="0.3" data-ps-vertical-position="300" data-ps-horizontal-position="320" />
	<img src="img/assassins/smoke-06.png" class="parallax-move" data-ps-z-index="1" data-ps-speed="0.2" data-ps-vertical-position="-900" data-ps-horizontal-position="220" />
	<img src="img/assassins/smoke-05.png" class="parallax-move" data-ps-z-index="1" data-ps-speed="0.3" data-ps-vertical-position="-600" data-ps-horizontal-position="150" />
	<img src="img/assassins/stick.png" class="parallax-move" data-ps-z-index="2" data-ps-speed="1" data-ps-vertical-position="1200" data-ps-horizontal-position-right="0" />
	<img src="img/assassins/003.png" class="parallax-move" data-ps-z-index="2" data-ps-speed="0.4" data-ps-vertical-position="-200" data-ps-horizontal-position="0" />
	<img src="img/assassins/002.png" class="parallax-move" data-ps-z-index="3" data-ps-speed="0.5" data-ps-vertical-position="-400" data-ps-horizontal-position="0" />
	<img src="img/assassins/birds.png" class="parallax-move" data-ps-z-index="4" data-ps-speed="1" data-ps-vertical-position="-300" data-ps-horizontal-position="600" />
	<img src="img/assassins/black-cloud.png" class="parallax-move" data-ps-z-index="5" data-ps-speed="0.35" data-ps-vertical-position="-400" data-ps-horizontal-position="0">
	</article>
	</section>
	<section>
	<article class="parallax-img-container">
	<h2>Fixed content</h2>
	<p>All the content inside the article will not be affected by parallaximg.js</p>
	<h3>I made this inspired by PlayStation and Assassins Unity</h3>
	<img id="parallax-img-2" class="parallax-move" src="img/triangle.png" />
	<img id="parallax-img-3" class="parallax-move" src="img/square.png" />
	<img id="parallax-img-4" class="parallax-move" src="img/circle.png" />
	<img id="parallax-img-5" class="parallax-move" src="img/ex.png" />
	<img id="parallax-img-6" class="parallax-move" src="img/triangle.png" />
	<img id="parallax-img-7" class="parallax-move" src="img/square.png" />
	<img id="parallax-img-7" class="parallax-move" src="img/circle.png" />
	<img id="parallax-img-5" class="parallax-move" src="img/ex.png" />
	<img id="parallax-img-1" class="parallax-move" src="img/triangle.png" />
	<img id="parallax-img-4" class="parallax-move" src="img/square.png" />
	<img id="parallax-img-3" class="parallax-move" data-ps-vertical-position="200" data-ps-horizontal-position="500" src="img/circle.png" />
	</article>
	<article>
	<h3 class="testOffset">Fork from Github</h3>
	</article>
	</section>
	<footer>
	<p>made by cynthia sanchez</p>
	</footer>
	</body>
	</html>

cyntss / Parallax-img-scroll

Join GitHub today

Parallax-img-scroll/demo/index.html

Users who have contributed to this file

Github