Parallax Scroll Demo

Developer
Kira
Size
5,600 Kb
Views
30,360
  1. Parallax Scroll Demo Previews
  2. Parallax Scroll Demo HTML Codes
  3. Parallax Scroll Demo CSS Codes
  4. Parallax Scroll Demo JS Codes

How do I make an parallax scroll demo?

What is a parallax scroll demo? How do you make a parallax scroll demo? This script and codes were developed by Kira on 25 August 2022, Thursday.

Parallax Scroll Demo Previews
IQ Test

Parallax Scroll Demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Parallax Scroll Demo</title> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="top"></div>
<a href="#bottom"><section class="hero skrollable skrollable-between" data-bottom-top="background-position:0px 0%;" data-top-bottom="background-position:0px 100%;"> <img src="http://kepixels.com/wp-content/uploads/2016/02/logo.svg" class="logo"> <h1 class="hero-headline">The easiest way to find colocation in Chicago. </h1> <h3 class="sub-headline">Let our Chicago-based experts find the right space for you.</h3>
<!-- <img src="http://kepixels.com/wp-content/uploads/2016/02/mouse.svg" class="mouse"> --> <div class="mouse-wrap">
<div class="mouse"><div class="wheel"></div></div>
<div><span class="unu"></span> <span class="doi"></span> <span class="trei"></span> </div>
</div>
</section>
</a>
<section class="intro skrollable skrollable-between" data-bottom-top="background-position:0px 0%;" data-top-bottom="background-position:0px 600%;"> <div class="container"> <h2>Why is trying to find the right Colo such a pain?</h2> <div class="col-sm-4"> <img src="http://kepixels.com/wp-content/uploads/2016/02/icon-one-1.svg" class="intro-icon icon-one"> <h3>INDUSTRY LINGO & PRACTICES</h3> <p>Colo providers seem to speak a language of their own: rack units, power density, percentile billing, metered power. It can be confusing.</p> </div> <div class="col-sm-4"> <img src="http://kepixels.com/wp-content/uploads/2016/02/icon-two-.svg" class="intro-icon icon-one"> <h3>DIFFICULT AND LENGTHY SALES PROCESS</h3> <p>Some providers will lead you through a lengthy and tiresome sales process that makes you want to throw in the towel.</p> </div> <div class="col-sm-4"> <img src="http://kepixels.com/wp-content/uploads/2016/02/icon-three.svg" class="intro-icon icon-three"> <h3>WHERE TO START?</h3> <p>Whether it’s a city or suburbs, it’s difficult to know where to start when looking for a colo provider around the Chicagoland area.</p> </div> <div class="col-sm-12"> <p class="center-message">There are dozens of providers operationg myraid facilities.<br/>You don’t want to pick the wrong provider. </p> <img src="http://kepixels.com/wp-content/uploads/2016/02/down-arrow.svg" class="arrow"> </div> </div>
</section>
<section class="main-message"> <div class="container"> <div class="col-sm-4"> <img src="http://kepixels.com/wp-content/uploads/2016/02/icon-four.svg" class="mm-icon"> </div> <div class="col-sm-8"> <h3>We make Colocating servers in Chicago fast & easy.</h3> <h5>Take control and let our colocation specialists find the right colocation partner for you. </h5> </div> </div>
</section>
<a href="#top"><img src="http://kepixels.com/wp-content/uploads/2016/02/bottom.jpg" style="width:100%;" class="footer"> <div id="bottom"></div></a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cooleydds.sitewrench.com/SiteFiles/2373/js/skrollr.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Parallax Scroll Demo - Script Codes CSS Codes

a:hover,
a:focus { text-decoration: none !important; outline: none !important;
}
h1,
h2,
h3,
p { font-family: 'montserrat', sans-serif;
}
section.hero { background: url(http://kepixels.com/wp-content/uploads/2016/02/hero.jpg); height: 85vh; min-height: 800px; background-size: 130%; padding: 220px 90px 170px; position: relative;
}
section.hero .logo { max-width: 200px; position: absolute; left: 90px; top: 90px;
}
section.hero .mouse-wrap { position: absolute; bottom: 80px; left: 50%;
}
section.hero span { display: block; width: 7px; height: 7px; -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */ transform: rotate(45deg); border-right: 2px solid white; border-bottom: 2px solid white; margin: 7px 0 5px 9px;
}
section.hero .unu { margin-top: 6px;
}
section.hero .unu,
section.hero .doi,
section.hero .trei { -webkit-animation: mouse-scroll 1s infinite; -moz-animation: mouse-scroll 1s infinite;
}
section.hero .unu { -webkit-animation-delay: .1s; -moz-animation-delay: .1s; -webkit-animation-direction: alternate;
}
section.hero .doi { -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -webkit-animation-direction: alternate;
}
section.hero .trei { -webkit-animation-delay: .3s; -moz-animation-delay: .3s; -webkit-animation-direction: alternate;
}
section.hero .mouse { height: 39px; width: 24px; border-radius: 30px; transform: none; border: 2px solid white; top: 170px; margin-bottom: 10px;
}
section.hero .wheel { height: 5px; width: 2px; display: block; margin: 5px auto; background: white; position: relative;
}
section.hero .wheel { -webkit-animation: mouse-wheel 1.2s ease infinite; -moz-animation: mouse-wheel 1.2s ease infinite;
}
@-webkit-keyframes mouse-wheel { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(6px); -ms-transform: translateY(6px); transform: translateY(6px); }
}
@-moz-keyframes mouse-wheel { 0% { top: 1px; } 50% { top: 2px; } 100% { top: 3px; }
}
@-webkit-keyframes mouse-scroll { 0% { opacity: 0; } 50% { opacity: .5; } 100% { opacity: 1; }
}
@-moz-keyframes mouse-scroll { 0% { opacity: 0; } 50% { opacity: .5; } 100% { opacity: 1; }
}
@-o-keyframes mouse-scroll { 0% { opacity: 0; } 50% { opacity: .5; } 100% { opacity: 1; }
}
@keyframes mouse-scroll { 0% { opacity: 0; } 50% { opacity: .5; } 100% { opacity: 1; }
}
section.hero .hero-headline { font-size: 75px; font-weight: 700; color: #EEEEEE; line-height: 140px; left: 90px; max-width: 95%; line-height: 1em;
}
section.hero .sub-headline { font-size: 22px; color: rgba(255, 255, 255, 0.7); line-height: 38px; border-bottom: 2px solid rgba(255, 255, 255, 0.75); display: table;
}
section.intro { padding: 75px 0px 95px; background: url(http://kepixels.com/wp-content/uploads/2016/02/server-pattern-bg.svg); background-size: cover; position: relative; background-repeat: repeat-y;
}
section.intro:after { content: ""; background: rgba(255, 255, 255, 0.5); height: 100%; width: 100%; position: absolute; top: 0px; z-index: 1;
}
section.intro h2 { font-size: 40px; color: #556F81; line-height: 50px; text-align: center; padding-bottom: 40px;
}
section.intro .intro-icon { max-width: 200px; display: table; margin: auto; position: relative; z-index: 3;
}
section.intro h3 { font-size: 14px; color: #FC7C5F; letter-spacing: 1px; line-height: 38px; text-align: center; position: relative; z-index: 3;
}
section.intro p { font-size: 18px; color: #9B9B9B; line-height: 26px; text-align: center; position: relative; z-index: 3;
}
section.intro .arrow { max-width: 26px; display: table; margin: auto;
}
section.intro .center-message { max-width: 450px; text-align: center; display: table; margin: 60px auto; padding: 20px 0px; border-top: 2px solid #556F81; border-bottom: 2px solid #556F81;
}
section.main-message { padding: 80px 0px; background: url(http://kepixels.com/wp-content/uploads/2016/02/bg-2.jpg); background-size: cover; background-attachment: fixed;
}
section.main-message .mm-icon { max-width: 150px; display: table; margin: auto;
}
section.main-message h3 { font-size: 42px; color: #FC7C5F; line-height: 1em;
}
section.main-message h5 { font-size: 18px; padding-top: 10px; color: #556F81; line-height: 1em;
}

Parallax Scroll Demo - Script Codes JS Codes

$('a').click(function(){ $('html, body').animate({ scrollTop: $( $(this).attr('href') ).offset().top }, 12000); return false;
});
//skrollr for bg parallax effect	$(function skrollrInit() { //initialize skrollr skrollr.init({ forceHeight: false,	smoothScrolling: false,	mobileDeceleration: 0.004 }); // disable skrollr if using handheld device if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { skrollr.init().destroy(); }	});	//execute function	skrollrInit();
Parallax Scroll Demo - Script Codes
Parallax Scroll Demo - Script Codes
Home Page Home
Developer Kira
Username kepixels
Uploaded August 25, 2022
Rating 3
Size 5,600 Kb
Views 30,360
Do you need developer help for Parallax Scroll Demo?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kira (kepixels) Script Codes
Name
Control Shape Hero
Dashed Lines
Simple Modal
Icon Loading Animation
Mode Menu
Sticky CTA Buttons
Grid Box Animated Navigation
Fluid Grid
Rotated Text
A Pen by Kira
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!