Parallax scrolling

Developer
Chris
Size
2,628 Kb
Views
12,144
  1. Parallax scrolling Previews
  2. Parallax scrolling HTML Codes
  3. Parallax scrolling CSS Codes
  4. Parallax scrolling JS Codes

How do I make an parallax scrolling?

Simple one page website with multiple paralax scrolling backgrounds. Nice effect for your personal portfolio.. What is a parallax scrolling? How do you make a parallax scrolling? This script and codes were developed by Chris on 01 December 2022, Thursday.

Parallax scrolling Previews
IQ Test

Parallax scrolling - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Parallax scrolling</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="home" data-type="background" data-speed="2" class="pages"> <div class="content"> <h2 class="articleTitle textShadow">One page <span class="dark">website</span></h2> <h3 class="articleSubTitle textShadow">With parallax scrolling backgrounds</h3> </div>
</div>
<div class="about boxShadow" data-type="background" data-speed="2" class="pages"> <div class="content"> <h2 class="articleTitle textShadow">About <span class="dark">us</span></h2> <h3 class="articleSubTitle textShadow">Who are we and what do we do?</h3> </div>
</div>
<div class="contact boxShadow" data-type="background" data-speed="2" class="pages"> <div class="content"> <h2 class="articleTitle textShadow">Contact <span class="dark">me</span></h2> <h3 class="articleSubTitle textShadow">Have questions? Contact us!</h3> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Parallax scrolling - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900);
@import url(https://fonts.googleapis.com/css?family=Patua+One);
@import url(https://fonts.googleapis.com/css?family=Armata);
body { font-family: 'Roboto', sans-serif; font-size: 14px; line-height: 20px; font-weight: 300;
}
p { margin-bottom: 2em;
}
.textShadow { text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
}
.boxShadow { -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}
.home { position: relative; margin: 0 auto; width: 100%; height: 600px; background: url("http://www.sanderkeurentjes.nl/portfolio/img/bg-home.jpg") 50% 0 repeat fixed;
}
.about { position: relative; margin: 0 auto; width: 100%; height: 600px; background: url("http://xdesigns.net/wp-content/uploads/2013/07/4-grass-wallpaper.jpg") 50% 0 no-repeat;
}
.contact { position: relative; margin: 0 auto; width: 100%; height: 600px; background: url("http://wallpoper.com/images/00/40/30/48/nature-water_00403048.jpg") 50% 0 repeat fixed;
}
.content { position: absolute; top: 50px; width: 80%; height: 458px; padding: 0 10%; text-align: center;
}
.articleTitle { margin-bottom: 0.25em; font-family: 'Patua One', cursive; font-size: 8em; line-height: 1em; color: #fff;
} .articleTitle .dark { color: #333; }
.articleSubTitle { font-family: 'Armata', sans-serif; font-size: 3em; line-height: 1em; color: #fff;
}

Parallax scrolling - Script Codes JS Codes

$(document).ready(function(){ var $window = $(window); $('div[data-type="background"]').each(function(){ var $bgobj = $(this); $(window).scroll(function() { var yPos = -($window.scrollTop() / $bgobj.data('speed')); var coords = '50% '+ yPos + 'px'; $bgobj.css({ backgroundPosition: coords }); }); });
});
Parallax scrolling - Script Codes
Parallax scrolling - Script Codes
Home Page Home
Developer Chris
Username leetech
Uploaded December 01, 2022
Rating 3
Size 2,628 Kb
Views 12,144
Do you need developer help for Parallax scrolling?

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!

Chris (leetech) Script Codes
Name
Bootstrap Features
Responsive business
Split scroll
A Pen by Chris
Client list
Bootstrap Carousel
JUST A BS 3 THUMBNAIL SLIDER
Just some more hover effects
Triangle bullets
BASIC INFOGRAPHIC THING
Create amazing sales emails 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!