Parallax scrolling scene

Developer
Size
2,485 Kb
Views
8,096

How do I make an parallax scrolling scene?

What is a parallax scrolling scene? How do you make a parallax scrolling scene? This script and codes were developed by Iharosi on 16 January 2023, Monday.

Parallax scrolling scene Previews

Parallax scrolling scene - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Parallax scrolling scene</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html, body { width: 100%; height: 100%;
}
body { margin: 0; background-image: radial-gradient(closest-corner circle at center, #fff 0%, #aaa 100%);
}
.wrapper { perspective: 800px; perspective-origin: 50% 50%;
}
.road { position: relative; width: 200%; height: 400px; margin-left: -50%; background-color: rgba(50,50,50,0.5); transform: rotateX( -90deg ) translateZ( 400px );
}
.road:after, .road:before { content: ''; position: absolute; display: block; width: 200%; height: 20px; background-color: rgba(0,0,0,.8);
}
.road:before { top: -20px; }
.road:after { bottom: -20px; }
.lines { position: absolute; width: 200px; height: 20px; top: 90px; background-color: white; box-shadow: 0 0 0 white, 0 200px 0 white, 400px 0 0 white, 400px 200px 0 white, 800px 0 0 white, 800px 200px 0 white, 1200px 0 0 white, 1200px 200px 0 white, 1600px 0 0 white, 1600px 200px 0 white, 2000px 0 0 white, 2000px 200px 0 white, 2400px 0 0 white, 2400px 200px 0 white, 2800px 0 0 white, 2800px 200px 0 white, 3200px 0 0 white, 3200px 200px 0 white, 3600px 0 0 white, 3600px 200px 0 white, 4000px 0 0 white, 4000px 200px 0 white, 4400px 0 0 white, 4400px 200px 0 white; animation: slide 4s linear infinite;
}
@keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(-1600px); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="wrapper"> <div class="road"> <div class="lines"></div> </div>
</div>
</body>
</html>

Parallax scrolling scene - Script Codes CSS Codes

html, body { width: 100%; height: 100%;
}
body { margin: 0; background-image: radial-gradient(closest-corner circle at center, #fff 0%, #aaa 100%);
}
.wrapper { perspective: 800px; perspective-origin: 50% 50%;
}
.road { position: relative; width: 200%; height: 400px; margin-left: -50%; background-color: rgba(50,50,50,0.5); transform: rotateX( -90deg ) translateZ( 400px );
}
.road:after, .road:before { content: ''; position: absolute; display: block; width: 200%; height: 20px; background-color: rgba(0,0,0,.8);
}
.road:before { top: -20px; }
.road:after { bottom: -20px; }
.lines { position: absolute; width: 200px; height: 20px; top: 90px; background-color: white; box-shadow: 0 0 0 white, 0 200px 0 white, 400px 0 0 white, 400px 200px 0 white, 800px 0 0 white, 800px 200px 0 white, 1200px 0 0 white, 1200px 200px 0 white, 1600px 0 0 white, 1600px 200px 0 white, 2000px 0 0 white, 2000px 200px 0 white, 2400px 0 0 white, 2400px 200px 0 white, 2800px 0 0 white, 2800px 200px 0 white, 3200px 0 0 white, 3200px 200px 0 white, 3600px 0 0 white, 3600px 200px 0 white, 4000px 0 0 white, 4000px 200px 0 white, 4400px 0 0 white, 4400px 200px 0 white; animation: slide 4s linear infinite;
}
@keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(-1600px); }
}
Parallax scrolling scene - Script Codes
Parallax scrolling scene - Script Codes
Home Page Home
Developer Iharosi
Username iharosi
Uploaded January 16, 2023
Rating 3
Size 2,485 Kb
Views 8,096
Do you need developer help for Parallax scrolling scene?

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!

Iharosi (iharosi) Script Codes
Create amazing art & images 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!