JavaScript Parallax Image Effect
How do I make an javascript parallax image effect?
JavaScript Parallax image effect created using vanilla-tilt.js.. What is a javascript parallax image effect? How do you make a javascript parallax image effect? This script and codes were developed by Html5andblog on 24 August 2022, Wednesday.
JavaScript Parallax Image Effect - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>JavaScript Parallax Image Effect</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="water" data-tilt data-tilt-max="20" data-tilt-speed="100" data-tilt-perspective="1000">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/130527/fish.png" class="fish" alt="goldfish">
</div> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/130527/vanilla-tilt.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
JavaScript Parallax Image Effect - Script Codes CSS Codes
body {
background-color: #003959;
}
.water {
max-width: 600px;
height: 500px;
position: relative;
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/130527/water.jpeg') no-repeat;
background-size: cover;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
border-radius: 30px;
margin: 0 auto;
}
.fish {
max-width: 100%;
height: auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%) translateZ(50px);
-moz-transform: translate(-50%, -50%) translateZ(50px);
-ms-transform: translate(-50%, -50%) translateZ(50px);
-o-transform: translate(-50%, -50%) translateZ(50px);
transform: translate(-50%, -50%) translateZ(50px);
}
@media (max-width: 768px) { .water { height: 300px; } .fish { max-width: 60%; }
}
JavaScript Parallax Image Effect - Script Codes JS Codes
/*
Tutorial Available at:
https://www.html5andbeyond.com/parallax-image-effect-on-hover-lightweight-javascript-solution/
*/
/*
Images Used:
https://www.pexels.com/photo/underwater-blue-ocean-sea-9149/
https://pixabay.com/en/goldfish-carp-fish-1900832/
*/
Developer | Html5andblog |
Username | html5andblog |
Uploaded | August 24, 2022 |
Rating | 4.5 |
Size | 2,143 Kb |
Views | 52,624 |
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!
Name | Size |
Particles JS Background | 2,863 Kb |
Snow Flurry - Wordpress and jQuery Plugin | 2,614 Kb |
Brick by Brick - Full Functionality - Infinite Scroll | 4,497 Kb |
Simple CSS and jQuery Responsive Navigation | 2,101 Kb |
Coin Flip Application | 2,361 Kb |
HTML5 Canvas Animated Background Part 1 | 2,070 Kb |
Letter by Letter JS Example | 2,477 Kb |
Animated CSS Background - Moves with Cursor | 1,905 Kb |
Letter by Letter JS Basic Example | 2,141 Kb |
HTML5 Canvas Animated Background Part 2 | 3,154 Kb |
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!
Name | Username | Size |
Fixed with using Calc | Tomleo | 2,542 Kb |
CardMove | Thompsonemerson | 3,699 Kb |
Background Images | Jooonebug | 2,100 Kb |
E-mail Template | SoloMDFK | 4,871 Kb |
Fun form with currentColor | Bnthor | 2,713 Kb |
CSS Variables | Jdsteinbach | 4,759 Kb |
Twitch JSON API | Jvhti | 2,808 Kb |
V.35 The Monolith Update - Hero Release Notes | Jordan | 12,045 Kb |
Hard-Stop Gradients | Mackdoyle | 2,288 Kb |
Factorial | KeithleySLHS | 1,158 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!