Mouse movement parallax effect

Developer
Vahid
Size
2,949 Kb
Views
62,744
  1. Mouse movement parallax effect Previews
  2. Mouse movement parallax effect HTML Codes
  3. Mouse movement parallax effect CSS Codes
  4. Mouse movement parallax effect JS Codes

How do I make an mouse movement parallax effect?

A simple mouse movement parallax effect.. What is a mouse movement parallax effect? How do you make a mouse movement parallax effect? This script and codes were developed by Vahid on 16 September 2022, Friday.

Mouse movement parallax effect Previews
IQ Test

Mouse movement parallax effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mouse movement parallax effect</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>	<head>	<title>Parallax - Mouse</title>	<!--meta-->	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />	</head>	<body>	<main id="box">	<div class="layer" id="l1">	<div id="sun">&nbsp;</div>	</div>	<div class="layer" id="l2">	<div id="clouds">	<div class="cloud c1">&nbsp;</div>	<div class="cloud c2">&nbsp;</div>	<div class="cloud c3">&nbsp;</div>	<div class="cloud c4">&nbsp;</div>	</div>	</div>	<div class="layer" id="l3">	<div class="hill hill1">&nbsp;</div>	<div class="hill hill2">&nbsp;</div>	</div>	<div class="layer" id="l4">	<div class="flower f1">	<div class="s">&nbsp;</div>	<div class="petal1 petal">&nbsp;</div>	<div class="petal2 petal">&nbsp;</div>	<div class="petal3 petal">&nbsp;</div>	<div class="petal4 petal">&nbsp;</div>	<div class="petal5 petal">&nbsp;</div>	<div class="petal6 petal">&nbsp;</div>	</div>	<div class="flower f2">	<div class="s">&nbsp;</div>	<div class="petal1 petal">&nbsp;</div>	<div class="petal2 petal">&nbsp;</div>	<div class="petal3 petal">&nbsp;</div>	<div class="petal4 petal">&nbsp;</div>	<div class="petal5 petal">&nbsp;</div>	<div class="petal6 petal">&nbsp;</div>	</div>	<div class="flower f3">	<div class="s">&nbsp;</div>	<div class="petal1 petal">&nbsp;</div>	<div class="petal2 petal">&nbsp;</div>	<div class="petal3 petal">&nbsp;</div>	<div class="petal4 petal">&nbsp;</div>	<div class="petal5 petal">&nbsp;</div>	<div class="petal6 petal">&nbsp;</div>	</div>	<div class="flower f4">	<div class="s">&nbsp;</div>	<div class="petal1 petal">&nbsp;</div>	<div class="petal2 petal">&nbsp;</div>	<div class="petal3 petal">&nbsp;</div>	<div class="petal4 petal">&nbsp;</div>	<div class="petal5 petal">&nbsp;</div>	<div class="petal6 petal">&nbsp;</div>	</div>	</div>	</main>	</body>
</html> <script src="js/index.js"></script>
</body>
</html>

Mouse movement parallax effect - Script Codes CSS Codes

@charset "UTF-8";
*, *:after, *:before {	margin: 0;	padding: 0;	-webkit-box-sizing: border-box;	-moz-box-sizing: border-box;	box-sizing: border-box;
}
body, html {	width: 100%;	height: 100%;	margin: 0;	padding: 0;
}
body {	background: #5a889e;
}
main#box {	background: #589df5;	width: 500px;	height: 350px;	position: relative;	top: 50%;	left: 50%;	margin-top: -175px;	margin-left: -250px;	-webkit-border-radius: 25px;	-moz-border-radius: 25px;	border-radius: 25px;	-webkit-box-shadow: 2px 2px 25px 1px #000000;	-moz-box-shadow: 2px 2px 25px 1px #000000;	-o-box-shadow: 2px 2px 25px 1px #000000;	box-shadow: 2px 2px 25px 1px #000000;	overflow: hidden;	z-index: 0;
}
.layer {	position: absolute;	display: block;
}
#sun {	background: #ffcf37;	-webkit-box-shadow: 0px 0px 18px 5px rgba(236, 236, 133, 0.75);	-moz-box-shadow: 0px 0px 18px 5px rgba(236, 236, 133, 0.75);	box-shadow: 0px 0px 18px 5px rgba(236, 236, 133, 0.75);	-webkit-border-radius: 50%;	-moz-border-radius: 50%;	border-radius: 50%;	width: 50px;	height: 50px;
}
#clouds {	position: relative;	opacity: 0.5;	width: 400px;	height: 150px;
}
.cloud {	border: 1px transparent;	-webkit-border-radius: 50%;	-moz-border-radius: 50%;	border-radius: 50%;	display: block;	position: absolute;	background: #bababa;
}
.c1 {	width: 100px;	height: 50px;	top: 0;	left: 0;
}
.c2 {	width: 100px;	height: 50px;	top: 15px;	left: -20px;
}
.c3 {	width: 100px;	height: 50px;	top: 20px;	right: 40px;
}
.c4 {	width: 100px;	height: 50px;	top: 10px;	right: 90px;
}
.hill {	background: #449944;	position: absolute;	width: 400px;	height: 400px;	display: block;	border: 1px transparent;	-webkit-box-shadow: -1px -1px 11px 1px rgba(0,0,0,0.75);	-moz-box-shadow: -1px -1px 11px 1px rgba(0,0,0,0.75);	box-shadow: -1px -1px 11px 1px rgba(0,0,0,0.75);	margin-top: -60%;
}
.hill1 {	-webkit-border-top-left-radius: 100%;	-moz-border-radius-topleft: 100%;	border-top-left-radius: 100%;	-ms-transform: rotate(25deg);	-webkit-transform: rotate(25deg);	transform: rotate(25deg);	top: 0;	left: 250px;
}
.hill2 {	-webkit-border-top-right-radius: 100%;	-moz-border-radius-topright: 100%;	border-top-right-radius: 100%;	-ms-transform: rotate(-35deg);	-webkit-transform: rotate(-35deg);	transform: rotate(-35deg);	top: 60px;	left: 0;
}
.f1 {	top: 0;	left: 0;
}
.f2 {	top: 25px;	left: 100px;
}
.f3 {	top: 0;	left: 200px;
}
.f4 {	top: 25px;	left: 300px;
}
.flower {	position: absolute;
}
.petal {	width: 20px;	height: 20px;	-webkit-border-radius: 50%;	-moz-border-radius: 50%;	border-radius: 50%;	position: absolute;	background: #fc6464;
}
.s {	background: #835924;	position: absolute;	top:40px;	left: 26px;	width: 4px;	height: 80px;
}
.petal1 {	background: #645800;	top:20px;	left: 20px;
}
.petal2 {	top: 3px;	left: 20px;
}
.petal3 {	top: 13px;	left: 5px;
}
.petal4 {	top: 30px;	left: 9px;
}
.petal5 {	top: 30px;	left: 28px;
}
.petal6 {	top: 13px;	left: 34px;
}
#l1 {	z-index: 1;	top: 30px;	left: 80px;
}
#l2 {	z-index: 2;	top: 50px;	left: 60px;
}
#l3 {	z-index: 3;	top: 80px;	left: 0px;
}
#l4 {	z-index: 4;	top: 250px;	left: 70px;
}

Mouse movement parallax effect - Script Codes JS Codes

window.onload = function () {	var parallaxBox = document.getElementById ( 'box' );	var c1left = document.getElementById ( 'l1' ).offsetLeft,	c1top = document.getElementById ( 'l1' ).offsetTop,	c2left = document.getElementById ( 'l2' ).offsetLeft,	c2top = document.getElementById ( 'l2' ).offsetTop,	c3left = document.getElementById ( 'l3' ).offsetLeft,	c3top = document.getElementById ( 'l3' ).offsetTop,	c4left = document.getElementById ( 'l4' ).offsetLeft,	c4top = document.getElementById ( 'l4' ).offsetTop;	parallaxBox.onmousemove = function ( event ) {	event = event || window.event;	var x = event.clientX - parallaxBox.offsetLeft,	y = event.clientY - parallaxBox.offsetTop;	mouseParallax ( 'l1', c1left, c1top, x, y, 5 );	mouseParallax ( 'l2', c2left, c2top, x, y, 15 );	mouseParallax ( 'l3', c3left, c3top, x, y, 30 );	mouseParallax ( 'l4', c4left, c4top, x, y, 65 );	}
}
function mouseParallax ( id, left, top, mouseX, mouseY, speed ) {	var obj = document.getElementById ( id );	var parentObj = obj.parentNode,	containerWidth = parseInt( parentObj.offsetWidth ),	containerHeight = parseInt( parentObj.offsetHeight );	obj.style.left = left - ( ( ( mouseX - ( parseInt( obj.offsetWidth ) / 2 + left ) ) / containerWidth ) * speed ) + 'px';	obj.style.top = top - ( ( ( mouseY - ( parseInt( obj.offsetHeight ) / 2 + top ) ) / containerHeight ) * speed ) + 'px';
}
Mouse movement parallax effect - Script Codes
Mouse movement parallax effect - Script Codes
Home Page Home
Developer Vahid
Username vahidseo
Uploaded September 16, 2022
Rating 4
Size 2,949 Kb
Views 62,744
Do you need developer help for Mouse movement parallax effect?

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!

Vahid (vahidseo) Script Codes
Name
Parallax with 3D transform - Taxi Driver
3D WWII Interactive Plane
Website Loading Screen
Optical Glass
3D rotating dice
Rotating Checkbox - CSS3
3D Electric Guitar Distortion Pedal
HeartBeat
Shining image
Parallax Image Layers - Star Wars
Create amazing sales emails 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!