Parallax scrolling

Developer
Maharajan
Size
2,161 Kb
Views
4,048
  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?

What is a parallax scrolling? How do you make a parallax scrolling? This script and codes were developed by Maharajan on 26 January 2023, Thursday.

Parallax scrolling Previews
IQ Test

Parallax scrolling - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>parallax scrolling</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body>
<div class="parallax-slider" id="slide1" data-speed="10">
</div>
<div class="parallax-slider" id="slide2" data-speed="20"> </div>
<div class="parallax-slider" id="slide3" data-speed="15">
</div>
<div class="parallax-slider" id="slide4" data-speed="10"> </div>
<div class="parallax-slider" id="slide5" data-speed="20">
</div>
</body> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Parallax scrolling - Script Codes CSS Codes

body { width: 100%; height: 100%; margin: 0px;
}
.parallax-slider { font-family: 'Elsie', cursive; color: #FFF; margin: 0 auto; width: 100%; max-width: 1920px; position: relative; min-height: 100%; text-shadow: 0 0 10px rgba(0, 0, 0, 0.7); background-position: 50% 0; background-repeat: repeat; background-attachment: fixed; height: 600px; background-color:skyblue;
}
#slide1 { background-image: url('http://images.psxextreme.com/wallpapers/ps3/spiderman_chest_868.jpg');
}
#slide2 { background-image: url('//thesmashable.com/wp-content/uploads/2014/04/amazing_spider_man_2_movie_wallpapers_desktop_backgrounds_the_amazing_spiderman_2014_hd_wallpapers-31.jpg');
}
#slide4 { background-image: url('http://hdwallpapers.move.pk/wp-content/uploads/2015/07/marvel-black-spider.jpg');
}
#slide5 { background-image: url('http://www.dipnot.tv/wp-content/uploads/2016/03/10_The-Wolverine.jpg');
}

Parallax scrolling - Script Codes JS Codes

 $('.parallax-slider').each(function() { var $scrollslider = $(this); $(window).scroll(function() { var yPos = -($(window).scrollTop() /$scrollslider.data('speed')); console.log(yPos); var bgpos = '50% ' + yPos + 'px'; $scrollslider.css('background-position', bgpos); }); });
Parallax scrolling - Script Codes
Parallax scrolling - Script Codes
Home Page Home
Developer Maharajan
Username mhrjnsa1
Uploaded January 26, 2023
Rating 3
Size 2,161 Kb
Views 4,048
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!

Maharajan (mhrjnsa1) Script Codes
Name
Memory game
Sound waves
Pure css loader
Drop down options disable
Border hover effect
Simple register
Hover input
Notification
Parallax slider
Circle loader
Create amazing Facebook ads 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!