Image moves with mouse
How do I make an image moves with mouse?
What is a image moves with mouse? How do you make a image moves with mouse? This script and codes were developed by Lisa Macken on 01 October 2022, Saturday.
Image moves with mouse - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>image moves with mouse</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div id="landing-content"> <section class="slider"> <img></img> </section> <!-- <section class="slider2"> <img></img> </section> --> </div>
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Image moves with mouse - Script Codes CSS Codes
#landing-content {
overflow: hidden;
/*background-image: url(images/text1.png);*/
width: 100%;
background-repeat: no-repeat;
max-height: 800px;
border-bottom: solid;
border-bottom-color: #628027;
border-bottom-width: 5px;
}
.slider { background-image: url(http://lorempixel.com/400/200/); background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
overflow: hidden;
padding-top: 200px;
max-width: 1002px;
}
.slider2 { background-image: url(http://lorempixel.com/400/200/); background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
overflow: hidden;
padding-top: 200px;
max-width: 802px;
}
.slider img {
width: 80%;
padding-left: 10%;
padding-right: 10%;
height: auto;
margin-left: auto;
margin-right: auto;
}
Image moves with mouse - Script Codes JS Codes
$('.slider').mousemove(function(e){ var amountMovedX = (e.pageX * -2 / -4); var amountMovedY = (e.pageY * -2 / -4); $(this).css('background-position', amountMovedX + 'px ' + amountMovedY + 'px');
});
$('.slider2').mousemove(function(e){ var amountMovedX = (e.pageX * -1 /-4); var amountMovedY = (e.pageY * -1 / -4); $(this).css('background-position', amountMovedX + 'px ' + amountMovedY + 'px');
});
Developer | Lisa Macken |
Username | lmack90 |
Uploaded | October 01, 2022 |
Rating | 3 |
Size | 1,974 Kb |
Views | 20,240 |
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 |
Columns everywhere | 1,761 Kb |
SmoothScroll Navigation 2 | 2,888 Kb |
RollOver Effect 2 | 2,162 Kb |
Menu smoothscroll | 3,874 Kb |
SVG icons | 3,809 Kb |
JQuery Accordian Slider | 2,456 Kb |
Simple Quiz | 2,847 Kb |
A Pen by Lisa Macken | 2,231 Kb |
A JQuery Mobile Quiz Game | 4,406 Kb |
Scrollable svg Animations | 2,980 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 |
Flexbox Grid - equal height | DaveOrDead | 2,855 Kb |
Simple animated hover effect | Pobee-norris | 3,044 Kb |
Growing Root - Scroll control - CANVAS | Cjonasw | 2,342 Kb |
Monochrome Form | AlienPiglet | 3,096 Kb |
Off Canvas | Mariamarica | 1,870 Kb |
BlueBox Fork | Huskynation | 12,675 Kb |
Electric worm | Jeffibacache | 2,377 Kb |
A Pen by Oliver Schafeld | Schafeld | 1,720 Kb |
Background-blend-mode Test | 0x04 | 4,744 Kb |
CSS eye follow | Pedrocampos | 2,592 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!