Parallax scrolling scene

Developer
Iharosi
Size
2,485 Kb
Views
8,096
  1. Parallax scrolling scene Previews
  2. Parallax scrolling scene HTML Codes
  3. Parallax scrolling scene CSS Codes

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
IQ Test

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
Name
Crafting link underlines
Pseudo style
Img srcset attribute test
Hyphenation
Animated line drawing in SVG
Highlight selected dom
Close shade example
SVG morph anim with Snap.svg
Backdrop Filters with Safari 9
Paper like css box shadow
Create amazing video scripts 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!