Parallax scrolling

Developer
Drew Adams
Size
2,694 Kb
Views
24,288
  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 Drew Adams on 04 October 2022, Tuesday.

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="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="parallax"> <div class="parallax__inner"> <h1>This is a paralax.</h1> </div> <div class="parallax__break"></div> <div class="parallax__inner"> <h1>Do you like it?</h1> </div> <div class="parallax__break"></div> <div class="parallax__inner"> <h1>They're pretty cool</h1> </div> <div class="parallax__break"></div> <div class="parallax__inner"> <h1>and fun</h1> </div>
</div> <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

/* apply a natural box layout model to all elements, but allowing components to change */
html { box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0;
}
h2 { text-align: center; font-size: 275%; color: #e5e5e5; text-transform: upercase; letter-spacing: 1%;
}
.parallax { background-attachment: fixed; background-image: url("http://www.w3newbie.com/wp-content/uploads/parallax-2.jpg"); background-repeat: repeat; padding: 0; transition: all 0.2s ease;
}
.parallax .parallax__break { margin: 50% 0;
}
.parallax .parallax__inner { background-color: rgba(255, 255, 255, 0.15); padding: 5px 0;
}
.parallax .parallax__inner h1 { text-align: center; font-size: 2em; color: rgba(255, 255, 255, 0.6); margin: 10% 0;
}

Parallax scrolling - Script Codes JS Codes

var doc = $(document);
var timeInterval = 1;
doc.ready(function() { var parallax = $('.parallax'); for(var i = 0; i < 3; i++) { doc.on('scroll', function() { var currentScrollPos = doc.scrollTop(); parallax.css('background-position', '0 ' + (-currentScrollPos / 8) + 'px'); }); }
});
Parallax scrolling - Script Codes
Parallax scrolling - Script Codes
Home Page Home
Developer Drew Adams
Username drewtadams
Uploaded October 04, 2022
Rating 3
Size 2,694 Kb
Views 24,288
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!

Drew Adams (drewtadams) Script Codes
Name
Chat scroll-up modal jquery
Zombie Follow - In Progress
Text banner
A Pen by Drew Adams
Multiple Choice Quiz
Tabbed widget
A lot of Alerts - Exercise
Complimentary hex color calculator
Binary clock
Amchart column graph
Create amazing captions 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!