Upon visiting the website and moving your mouse, you'll notice that the element being hovered on doesn't perfectly align with the center. The scroll movement is linked to horizontal mouse movements rather than hovering over various list elements.
The concept is straightforward:
- Create a container that spans the full width of the window with an
overflow:hidden property.
- Within this container, include a second container with the same width as the list of elements.
- Inside the second container, place a list of elements or inline elements that exceed the window's width.
- When the mouse hovers over the container, determine the mouse's position within the window and horizontally scroll the container accordingly.
A simplified version looks like this:
$(document).ready(function() {
$(".scroll").on("mousemove", function(e) {
var ww = $(window).width(); // window width
var uw = $(".scroll ul").width(); // ul width
var mp = e.clientX; // mouse position
var ms = uw - ww; // max scroll
var sc = - ms * mp / ww; // amount to be scrolled
$(".scroll > div").stop().animate({ left: sc +"px" }, 600, "easeOutCirc");
});
});
html, body {
margin:0;
padding:0;
border:0;
}
div.scroll {
width:100%;
height:400px;
overflow:hidden;
background:#f0f0f0;
position:relative;
}
div.scroll > div {
width:1400px;
position:absolute;
top:0;
left:0;
}
div.scroll > div > ul {
width:1400px;
margin:0;
padding:0;
}
div.scroll > div > ul > li {
display:inline-block;
float:left;
width:200px;
height:400px;
opacity:0.7;
transition:all 0.5s;
}
div.scroll > div > ul > li:hover {
opacity:1;
background:#6699cc;
}
div.scroll > div > ul > li:hover > span {
color:white;
background:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<div class="scroll">
<div>
<ul>
<li><span>AAA</span></li>
<li><span>BBB</span></li>
<li><span>CCC</span></li>
<li><span>DDD</span></li>
<li><span>EEE</span></li>
<li><span>FFF</span></li>
<li><span>GGG</span></li>
</ul>
</div>
</div>
(Please note: If the window's width exceeds 1400px, the provided code may not function correctly.)
After examining the source code for k2.pl, it's evident that they utilize jQuery, jQuery UI, and Ariel Flesler's scrollTo plugin. To see how scrolling is controlled (in a different manner described above), refer to the script.min.js file (search for mousemove.sapp).