Egy kis móka a Skrollr JS library-val.

Ha nem akarod a HTML-be írogatni a data attribútumokat, akkor az eskrollr-stylesheets bővítménnyel közvetlenül CSS fájlba írva is lehet használni a cuccot. Nekem az eredeti változat áttekinthetőbbnek bizonyult úgyhogy a videóban is ezt használtam.

A működő kódot ide kattintva tudod megnézni.

Videó

HTML forráskód


	<div id="progress-wrapper">
		<div id="progress" data-0="width:1%;background:rgba(255,255,255,0.3);" data-end="width:100%;background:rgba(255,255,255,0.3);"></div>
	</div>

	<section id="slide-1">
		<div class="content"
			data-0="opacity:0;top:40%; transform:scale(0)"
			data-1000="opacity:1; transform:scale(1)"
			data-2000=""			
			data-3000="opacity:0; top: -10%;">
			Parallax Scrolling
		</div>
	</section>

	<section id="slide-2" data-2000="top:100%;opacity:0" data-3000="top:0%;opacity:1">
		<div class="content"
			data-3500="transform:scale(0) rotate(180deg)"
			data-5000="transform:scale(1) rotate(360deg)"
			data-6000="transform:scale(1) rotate(360deg); opacity:1"
			data-7000="transform:scale(5) rotate(360deg); opacity:0">
			<h1>Lorem Ipsum</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lacinia massa quis tellus porta mollis. Morbi condimentum erat massa, eu scelerisque magna auctor at. Maecenas eu velit eget diam pulvinar egestas sed vitae sapien. Nam commodo mattis varius.</p>
		</div>
	</section>

	<section id="slide-3" data-6500="top:100%;opacity:0" data-7000="top:0%;opacity:1">
		<div class="content"
			data-7000="opacity:0; left:-200%; transform:rotate(90deg);"
			data-7500="opacity:1; left:0%; transform:rotate(0deg)">
			And so on...
		</div>
	</section>

CSS forráskód


* {
	padding:0;
	margin:0;
	font-family: 'Roboto', sans-serif;
}
body {
	background-color: #000;
}
section {
	position: fixed;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	height: 100%;
	width: 100%;
}
#progress-wrapper {
	position: fixed;
	width: 60%;
	height: 10px;
	padding: 4px;
	right: 0;
	left: 0;
	bottom: 0;
	margin: 2% auto;
	background: rgba(0,0,0,0.5);
	border-radius: 5px;
	z-index: 1000
}
#progress {
	height: 10px;
	z-index: 2000;
	border-radius: 5px;
}
#slide-1  { background-image: url('1.jpg') }
#slide-2  { background-image: url('2.jpg') }
#slide-3  { background-image: url('3.jpg') }
.content { width:100%; position: fixed }

#slide-1 .content  {
	color: #fff;
	text-align: center;
	font-size: 800%;
	font-weight: bold;
	text-shadow: 5px 5px 5px rgba(0,0,0,0.3);
}

#slide-2 h1 {
	font-size: 400%
}
#slide-2 .content {
	width: 40%;
	left: 50%;
	top: 3%;
	color: #000;
	font-size: 130%;
	font-weight: bold
}
#slide-3 .content {
	width: 60%;
	background: rgba(0,0,0,0.8);
	color: #fff;
	padding: 2% 3%;
	left: 50%;
	top: 30%;
	text-align: right;
	font-size: 800%;
	font-weight: bold
}