<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax movvement on mouse move</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="word-container">
<h1 class="parallaxit">Parallax Effect</h1>
<p class="w1 parallaxit">Easy parallax with CSS Variables. </p>
<div class="btn-container parallaxit">
<a target=_blank class="btn" href="https://github.com/benoitdelorme/">My Github</a>
<a target=_blank class="btn" href="https://www.youtube.com/channel/UC6CFdR2zAt0wTC8CPPhqvGw">My Youtube</a>
</div>
</div>
</div>
</body>
</html>
body, h1, p{
margin: 0;
padding: 0;
}
h1 {
font-size: 5em;
}
p {
font-size: 1em;
max-width: 30em;
margin: 10px auto;
}
.container {
position: absolute;
height: 100vh;
width: 100%;
background-color: black;
color: white;
font-family: Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.container .word-container {
text-align: center;
}
.btn-container {
margin: 25px 0 0;
}
.btn {
position: relative;
display: inline-block;
margin: 0 10px;
padding: 10px 17px;
color: white;
border: 1px solid white;
text-decoration: none;
overflow: hidden;
}
.btn::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: white;
transform: translate3d(0, 100%, 0);
transition: 0.3s transform ease;
}
.btn:hover {
color: black;
}
.btn:hover::before {
transform: translate3d(0, 0, 0);
z-index: -1;
}
.parallaxit {
transition: 0.6s transform ease-out;
transform: translate3d(var(--parallax-x), var(--parallax-y), 0px)
}
var parallaxIt = function(e, target, parent, movement) {
var relX = e.pageX - offset(parent).left
var relY = e.pageY - offset(parent).top
var x = (relX - parent.offsetWidth / 2) / parent.offsetWidth * movement
var y = (relY - parent.offsetHeight / 2) / parent.offsetHeight * movement
target.style.setProperty('--parallax-x', x+"px");
target.style.setProperty('--parallax-y', y+"px");
}
function offset(el) {
var rect = el.getBoundingClientRect(),
scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
scrollTop = window.pageYOffset || document.documentElement.scrollTop
return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}
document.querySelector(".container").addEventListener("mousemove", function(e) {
parallaxIt(e, this.querySelector("h1"), this, 80)
parallaxIt(e, this.querySelector("p"), this, 60)
parallaxIt(e, this.querySelector(".btn-container"), this, 40)
})
