Animated CSS Background - Moves with Cursor

Developer
Html5andblog
Size
1,905 Kb
Views
40,480
  1. Animated CSS Background - Moves with Cursor Previews
  2. Animated CSS Background - Moves with Cursor HTML Codes
  3. Animated CSS Background - Moves with Cursor CSS Codes
  4. Animated CSS Background - Moves with Cursor JS Codes

How do I make an animated css background - moves with cursor?

An Animated CSS Background that moves around the window as the cursor moves. . What is a animated css background - moves with cursor? How do you make a animated css background - moves with cursor? This script and codes were developed by Html5andblog on 24 August 2022, Wednesday.

Animated CSS Background - Moves with Cursor Previews
IQ Test

Animated CSS Background - Moves with Cursor - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated CSS Background - Moves with Cursor</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="wrap-all">
</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>

Animated CSS Background - Moves with Cursor - Script Codes CSS Codes

html, body {
width: 100%;
height: 100%;
margin: 0;
}
#wrap-all {
width: 100%;
height: 100%;
background: url(//s3-us-west-2.amazonaws.com/s.cdpn.io/130527/texture.jpg) no-repeat center center;
position: fixed;
overflow: auto;
}

Animated CSS Background - Moves with Cursor - Script Codes JS Codes

$('#wrap-all').mousemove(function( event ) {
var containerWidth = $(this).innerWidth(), containerHeight = $(this).innerHeight(), mousePositionX = (event.pageX / containerWidth) * 100, mousePositionY = (event.pageY /containerHeight) * 100;
$(this).css('background-position', mousePositionX + '%' + ' ' + mousePositionY + '%');
});
Animated CSS Background - Moves with Cursor - Script Codes
Animated CSS Background - Moves with Cursor - Script Codes
Home Page Home
Developer Html5andblog
Username html5andblog
Uploaded August 24, 2022
Rating 3
Size 1,905 Kb
Views 40,480
Do you need developer help for Animated CSS Background - Moves with Cursor?

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!

Html5andblog (html5andblog) Script Codes
Name
JQuery Right Click Function
Detect Image Orientation with JavaScript
Brick by Brick - Full Functionality - Infinite Scroll
A Pen by html5andblog
JQuery Live Search Basic Example
Fix Navigation to Screen on Scroll
JQuery Live Search on an RSS Feed
Bubbling Text Effect
Coin Flip Application
Type It Out jQuery Plugin - Basic
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!