Background image mouse scroll

Developer
Revolution Graphics
Size
2,287 Kb
Views
32,384
  1. Background image mouse scroll Previews
  2. Background image mouse scroll HTML Codes
  3. Background image mouse scroll CSS Codes
  4. Background image mouse scroll JS Codes

How do I make an background image mouse scroll?

What is a background image mouse scroll? How do you make a background image mouse scroll? This script and codes were developed by Revolution Graphics on 01 October 2022, Saturday.

Background image mouse scroll Previews
IQ Test

Background image mouse scroll - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Background image mouse scroll</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="bg"> <div id="content">CONTENT</div>
</div>
<div id="log"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Background image mouse scroll - Script Codes CSS Codes

#bg { width: 800px; height: 600px; background: url(https://unsplash.imgix.net/reserve/oIpwxeeSPy1cnwYpqJ1w_Dufer%20Collateral%20test.jpg?fit=crop&fm=jpg&h=875&q=75&w=1050);
}
#content { width: 800px; height: 600px; color: white; font-size: 36px; line-height: 100px; text-align: center;
}

Background image mouse scroll - Script Codes JS Codes

//bg follow mouse with ease
var bg = $("#bg");
bg.mousemove(function(event) { var xPos = event.pageX; $("#log").text(xPos); TweenLite.to(bg, .5, {css:{backgroundPosition:xPos + "px"}});
});
Background image mouse scroll - Script Codes
Background image mouse scroll - Script Codes
Home Page Home
Developer Revolution Graphics
Username rgfx
Uploaded October 01, 2022
Rating 3
Size 2,287 Kb
Views 32,384
Do you need developer help for Background image mouse scroll?

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!

Revolution Graphics (rgfx) Script Codes
Name
Keep Image in Center of Div.
Simple Responsive Popup
Fancy Select Box
CSS Background
Canvas Noise generator
Progressively reveal dots on a Bezier curve
Call to action button
Video-js scss
Flexbox Center Right justify
Custom Select Box 2
Create amazing blog posts 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!