Jquery mousemove animation

Developer
Ken Yiu
Size
2,071 Kb
Views
38,456
  1. Jquery mousemove animation Previews
  2. Jquery mousemove animation HTML Codes
  3. Jquery mousemove animation CSS Codes
  4. Jquery mousemove animation JS Codes

How do I make an jquery mousemove animation?

What is a jquery mousemove animation? How do you make a jquery mousemove animation? This script and codes were developed by Ken Yiu on 18 November 2022, Friday.

Jquery mousemove animation Previews
IQ Test

Jquery mousemove animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jquery mousemove animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="page-container"> <div class="page-back"> </div> <div class="page-front"> <img src="https://cdn.shopify.com/s/files/1/0225/1115/products/low-poly-micro-plane-01_large.png?v=1377427062" /> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Jquery mousemove animation - Script Codes CSS Codes

.page-container { width: 100%; height: 100%; position: fixed; background-color: #fff;
}
.page-back { width: 120%; height: 120%; left: -10%; top: -10%; position: absolute; background-image: url('https://s-media-cache-ak0.pinimg.com/736x/b1/08/68/b10868d6028fd6689ba50bf89ff808cb.jpg'); background-size: cover; background-position: center; -webkit-filter: blur(3px); filter: blur(3px);
}
.page-front { position: absolute; left: 50%; top: 50%; width: 400px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.page-front img { width: 100%;
}

Jquery mousemove animation - Script Codes JS Codes

var windowWidth = $(window).width();
$('.page-container').mousemove(function(event){ var moveX = (($(window).width() / 2) - event.pageX) * 0.1; var moveY = (($(window).height() / 2) - event.pageY) * 0.1; $('.page-back').css('margin-left', moveX + 'px'); $('.page-back').css('margin-top', moveY + 'px'); $('.page-front').css('margin-left', -moveX + 'px'); $('.page-front').css('margin-top', -moveY + 'px');
});
Jquery mousemove animation - Script Codes
Jquery mousemove animation - Script Codes
Home Page Home
Developer Ken Yiu
Username kenyiu
Uploaded November 18, 2022
Rating 3
Size 2,071 Kb
Views 38,456
Do you need developer help for Jquery mousemove animation?

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!

Ken Yiu (kenyiu) Script Codes
Name
RWD-ISD-A-FullPage Start Kit
A Pen by Ken Yiu
RWD-B Class02
RWD-B Class3b
Dynamic Content Panel
SD3100 FullPage Starter Kit
SD3100 - Boxify Fluid Layout
Create One Page Design - Step 01
RWD-ISD-ClassA-9A
RWD-ISD-A-Class05
Create amazing captions 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!