SlamDunk Parallax on MouseMove

Developer
Robert Borghesi
Size
2,512 Kb
Views
30,360
  1. SlamDunk Parallax on MouseMove Previews
  2. SlamDunk Parallax on MouseMove HTML Codes
  3. SlamDunk Parallax on MouseMove CSS Codes
  4. SlamDunk Parallax on MouseMove JS Codes

How do I make an slamdunk parallax on mousemove?

Multi-level parallx on MouseMove., with rotating object.. What is a slamdunk parallax on mousemove? How do you make a slamdunk parallax on mousemove? This script and codes were developed by Robert Borghesi on 27 August 2022, Saturday.

SlamDunk Parallax on MouseMove Previews
IQ Test

SlamDunk Parallax on MouseMove - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SlamDunk Parallax on MouseMove</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="content">	<div class="bg"><img src="http://www.iltourdinibali.it/slamdunk/bg_900x506.jpg" /></div>	<div class="body james"><img src="http://www.iltourdinibali.it/slamdunk/james_body.png" /></div> <div class="leg james"><img src="http://www.iltourdinibali.it/slamdunk/james_leg2.png" /></div> <div class="title"><img src="http://www.iltourdinibali.it/slamdunk/title.svg" /></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>

SlamDunk Parallax on MouseMove - Script Codes CSS Codes

*{ box-sizing: border-box;
}
html, body{ background-color: rgb(50,50,50); font-family: 'Raleway', sans-serif; color: white;
}
.content{ width: 800px; height: 450px; margin: 100px auto 0 auto; background: red; overflow: hidden; position: relative;
}
.james{ width: 310px; height:326px; bottom: 30px; left:155px;
}
.bg , .james, .body, .leg{ position: absolute; transition: all 0.3s ease-out;
}
.bg{ top:-15px; left:-40px;
}
.bg_moved{ top:0px; left:-30px;
}
.leg{ z-index:11; -webkit-transform-origin: 190px 152px; -ms-transform-origin: 190px 152px; transform-origin: 190px 152px;
}
.body{ z-index: 9;
}
.body_moved{ -webkit-transform: translate(50px,-40px) rotate(10deg); -ms-transform: translate(50px,-40px) rotate(10deg); transform: translate(50px,-40px) rotate(10deg);
}
.leg_turned{ -webkit-transform: translate(50px,-40px) rotate(-40deg); -ms-transform: translate(50px,-40px) rotate(-40deg); transform: translate(50px,-40px) rotate(-40deg); z-index: 11;
}
.title{ z-index: 10; color: white; position: absolute; left: 105px; top: 261px;
}

SlamDunk Parallax on MouseMove - Script Codes JS Codes

$(document).ready(function(){ var posX, posY; var mouseX, mouseY; var percX, percY, powX, powY, ipo, posIpo; var moveX, moveY, legRot; posX = $(".content").offset().left; posY = $(".content").offset().top; $(document).mousemove(function(e){ mouseX = e.pageX - posX; mouseY = e.pageY - posY; if( mouseX >0 && mouseX<800 && mouseY >0 && mouseY<450){ percX = (mouseX/800); percY = 1-(mouseY/450); powX = Math.pow(percX,2); powY = Math.pow(percY,2); ipo = Math.sqrt(powX+powY).toFixed(2); posIpo = ipo/1.4142; moveX = mouseX/70; moveY = mouseY/90; legRot = posIpo*7; $(".james").css({ transform: 'translate('+(-moveX)+'px,'+(-moveY)+'px)', MozTransform: 'translate('+(-moveX)+'px,'+(-moveY)+'px)', WebkitTransform: 'translate('+(-moveX)+'px,'+(-moveY)+'px)', msTransform: 'translate('+(-moveX)+'px,'+(-moveY)+'px)' }); $(".bg").css({ transform: 'translate('+(moveX)+'px,'+(moveY)+'px)', MozTransform: 'translate('+(moveX)+'px,'+(moveY)+'px)', WebkitTransform: 'translate('+(moveX)+'px,'+(moveY)+'px)', msTransform: 'translate('+(moveX)+'px,'+(moveY)+'px)' }); $(".leg").css({ transform: 'translate('+(-moveX)+'px,'+(-moveY)+'px) rotate('+(legRot)+'deg)', MozTransform: 'translate('+(-moveX)+'px,'+(-moveY)+'px) rotate('+(legRot)+'deg)', WebkitTransform: 'translate('+(-moveX)+'px,'+(-moveY)+'px) rotate('+(legRot)+'deg)', msTransform: 'translate('+(-moveX)+'px,'+(-moveY)+'px) rotate('+(legRot)+'deg)' }); } });
})
SlamDunk Parallax on MouseMove - Script Codes
SlamDunk Parallax on MouseMove - Script Codes
Home Page Home
Developer Robert Borghesi
Username dghez
Uploaded August 27, 2022
Rating 4
Size 2,512 Kb
Views 30,360
Do you need developer help for SlamDunk Parallax on MouseMove?

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!

Robert Borghesi (dghez) Script Codes
Name
Opening animation from circular avatar
Easy parallax header
Fullscreen slice hero slider
Gradient border on hover - Scorer of fifa world cup
Pure Css Loader - Square
Sorting with morphing content
Best 3 players on fifa 14 - HOVER THEM
Continuous register clean form with autoresize input
Pulse Avatar on click with TweenMax
Enel brand - logo animation with tweenmax
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!