I am aiming to create a webpage where multiple divs with text and other content move along the x and y axes of the mouse. The desired effect is similar to parallax scrolling, but I have found that existing parallax plugins are image-based and do not work with div elements. I attempted to write my own JavaScript code, but the divs end up jumping all over the page and cannot be kept in place using CSS. Perhaps someone with more experience in JavaScript can provide insight on how to resolve this issue. Below is the code snippet I have implemented. Looking forward to hearing from you.
HTML:
<div class = "main" id ="scene">
<div class = "container" id = "home">
<div class = "kop "> HOME </div>
<div class = "brood ">
<p>
Etiam rhoncus...
</p>
</div>
</div> <!-- end container home -->
<div class = "container" id = "visie">
<div class = "kop"> VISIE </div>
<div class = "brood">
<p>
Lorem ipsum dolor sit amet...
</p>
</div>
</div>
</div>
CSS:
.container{
margin-right: 20%;
margin-top: 200px;
margin-bottom: 200px;
margin-left: 20%;
font-size: 16px;
background-color: yellow;
}
.kop{
font-family: GTWBold;
}
.brood{
font-family: GTWMedium;
}
#home{
margin-top: 20px;
}
#visie{
margin-right: 40%;
}
JS:
$('#scene2').mousemove(function(e){
var x = -(e.pageX + this.offsetLeft) / 20;
var y = -(e.pageY + this.offsetTop) / 20;
var h = document.getElementById('home');
h.style.position = "absolute";
h.style.left = x+'px';
h.style.top = y+'px';
h.style.width = "500px";
});