Parallax on scrollevent

Developer
Paul
Size
2,386 Kb
Views
12,144
  1. Parallax on scrollevent Previews
  2. Parallax on scrollevent HTML Codes
  3. Parallax on scrollevent CSS Codes
  4. Parallax on scrollevent JS Codes

How do I make an parallax on scrollevent?

Trying requestAnimationFrame om parallax. What is a parallax on scrollevent? How do you make a parallax on scrollevent? This script and codes were developed by Paul on 27 October 2022, Thursday.

Parallax on scrollevent Previews
IQ Test

Parallax on scrollevent - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>parallax on scrollevent</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="car"></div> <script src="js/index.js"></script>
</body>
</html>

Parallax on scrollevent - Script Codes CSS Codes

body { height: 6000px; width: 100%; background: darkgrey; margin: 0px;
}
.car { background: url(http://www.volkswagen-polo.com/docroot/assets/img/car_blue.png) no-repeat center; position: fixed; height: 280px; width: 140px; top: 10px; left: 300px;
}

Parallax on scrollevent - Script Codes JS Codes

var car;
document.addEventListener("DOMContentLoaded", function(){ window.addEventListener('scroll', function(){ // hier werden 2 args erwarte, bei florian ist nur eines? requestAnimationFrame(animate); }); window.addEventListener('load', function(){ car = document.querySelector('.car'); }); function animate(){ var percent = window.scrollY/window.scrollMaxY; var pos = transform(percent); car.style.webkitTransform = "translateY("+pos.y+"px)"; console.log(pos.x); } function transform(p){ if(p <.3){ p = p * 10/3; return{ y : 0 }; } else if(p < .9){ // hier ?? magic?? p = (p - .3) * 10/6; return{ y: -500 }; } else{ p = (p -.9) *10; return{ y: -1000 }; } }
});
Parallax on scrollevent - Script Codes
Parallax on scrollevent - Script Codes
Home Page Home
Developer Paul
Username paulq
Uploaded October 27, 2022
Rating 3
Size 2,386 Kb
Views 12,144
Do you need developer help for Parallax on scrollevent?

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!

Paul (paulq) Script Codes
Name
Flexbox-Slider-Test
TabContainer pure css3
TabContainer pure css3
Setter getter closure functions
Dropdow
A Pen by paul
Canvas tutorial
Sitemap getter
Callback function
Input tabcontainer
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!