I attempted to replicate that effect by implementing the following code:Here's the DEMO on JsFiddle.
function js1(x) {
x.style.animation = "anime 5s";
}
function js2(x) {
x.style.animation = "anime1 5s";
}
#first {
position: absolute;
float: left;
width: 100px;
height: 100px;
background-color: black;
top: 200px
}
#sec {
position: relative;
float: right;
width: 100px;
height: 100px;
background-color: black;
top: 200px
}
@Keyframes anime {
from {
left: 0;
}
to {
left: -400px;
}
}
@Keyframes anime1 {
from {
left: 0;
}
to {
left: 400px;
}
}
<div id="first" onmouseenter="js1(this)"></div>
<div id="sec" onmouseenter="js2(this)"></div>
Feel free to utilize the code. The remaining challenge is handling the scroll behavior (specifically, making the page scroll to the left - a feature I'm still figuring out).
To achieve the hover functionality, I employed javascript and onmouseenter. To learn more about onmouseenter, click here, and for @Keyframes, visit here.