console
$(document).ready(function() {
$('.link-list li:nth-child(1)').on('mouseenter', function() {
$('.link-list li.active').removeClass('active');
$('.img-list li.show').removeClass("show");
$('.img-list li:nth-child(1)').addClass("show");
$('.link-list li:nth-child(1)').addClass('active');
})
$('.link-list li:nth-child(2)').on('mouseenter', function() {
$('.link-list li.active').removeClass('active');
$('.img-list li.show').removeClass("show");
$('.img-list li:nth-child(2)').addClass("show");
$('.link-list li:nth-child(2)').addClass('active');
})
$('.link-list li:nth-child(3)').on('mouseenter', function() {
$('.link-list li.active').removeClass('active');
$('.img-list li.show').removeClass("show");
$('.img-list li:nth-child(3)').addClass("show");
$('.link-list li:nth-child(3)').addClass('active');
})
$('.link-list li:nth-child(4)').on('mouseenter', function() {
$('.link-list li.active').removeClass('active');
$('.img-list li.show').removeClass("show");
$('.img-list li:nth-child(4)').addClass("show");
$('.link-list li:nth-child(4)').addClass('active');
})
$('.link-list li:nth-child(5)').on('mouseenter', function() {
$('.link-list li.active').removeClass('active');
$('.img-list li.show').removeClass("show");
$('.img-list li:nth-child(5)').addClass("show");
$('.link-list li:nth-child(5)').addClass('active');
})
$('.link-list li:nth-child(1)').trigger('mouseenter')
});
document.getElementsByTagName("body")[0].addEventListener("mousemove", function(n) {
t.style.left = n.clientX + "px",
t.style.top = n.clientY + "px",
e.style.left = n.clientX + "px",
e.style.top = n.clientY + "px",
i.style.left = n.clientX + "px",
i.style.top = n.clientY + "px"
});
var t = document.getElementById("cursor"),
e = document.getElementById("cursor2"),
i = document.getElementById("cursor3");
function n(t) {
e.classList.add("hover"), i.classList.add("hover")
}
function s(t) {
e.classList.remove("hover"), i.classList.remove("hover")
}
s();
for (var r = document.querySelectorAll(".hover-target"), a = r.length - 1; a >= 0; a--) {
o(r[a])
}
function o(t) {
t.addEventListener("mouseover", n), t.addEventListener("mouseout", s)
}
<a href="https://ivang-design.com/" class="logo hover-target" target="_blank">
<img src="https://assets.codepen.io/1462889/logo_1.svg" alt="">
</a>
<div class="section">
<div class="container">
<div class="row full-height">
<div class="col-12 align-self-center">
<div class="section">
<div class="left-side-shadow"></div>
<div class="right-side-shadow"></div>
<ul class="link-list">
<li>
<a href="#" class="hover-target">
<span>Case Studies -</span>
<span>Case Studies -</span>
<span>Case Studies -</span>
<span>Case Studies -</span>
<span>Case Studies -</span>
</a>
</li>
<li>
<a href="#" class="hover-target">
<span>What We Do -</span>
<span>What We Do -</span>
<span>What We Do -</span>
<span>What We Do -</span>
<span>What We Do -</span>
</a>
</li>
<li>
<a href="#" class="hover-target">
<span>Our Crew -</span>
<span>Our Crew -</span>
<span>Our Crew -</span>
<span>Our Crew -</span>
<span>Our Crew -</span>
</a>
</li>
<li>
<a href="#" class="hover-target">
<span>Our Stories -</span>
<span>Our Stories -</span>
<span>Our Stories -</span>
<span>Our Stories -</span>
<span>Our Stories -</span>
</a>
</li>
<li>
<a href="#" class="hover-target">
<span>Get In Touch -</span>
<span>Get In Touch -</span>
<span>Get In Touch -</span>
<span>Get In Touch -</span>
<span>Get In Touch -</span>
</a>
</li>
</ul>
<ul class="img-list">
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class='cursor' id="cursor"></div>
<div class='cursor2' id="cursor2"></div>
<div class='cursor3' id="cursor3"></div>
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,900;1,900&display=swap');
:root {
--dark-blue: #102770;
--white-gr: #c4c3ca;
--yellow: #ffeba7;
}
body{
color: var(--white-gr);
background-color: var(--dark-blue);
overflow-x: hidden;
}
.cursor,
.cursor2,
.cursor3{
position: fixed;
border-radius: 50%;
transform: translateX(-50%) translateY(-50%);
pointer-events: none;
left: -100px;
top: 50%;
mix-blend-mode: difference;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
z-index: 9999999;
}
.cursor{
background-color: var(--white-gr);
height: 0;
width: 0;
z-index: 9999999;
}
.cursor2,.cursor3{
height: 36px;
width: 36px;
z-index:99998;
-webkit-transition:all 0.3s ease-out;
transition:all 0.3s ease-out
}
.cursor2.hover,
.cursor3.hover{
-webkit-transform:scale(2) translateX(-25%) translateY(-25%);
transform:scale(2) translateX(-25%) translateY(-25%);
border:none
}
.cursor2{
border: 2px solid var(--white-gr);
box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}
.cursor2.hover{
background: rgba(255,255,255,1);
box-shadow: 0 0 0 rgba(255, 255, 255, 0.2);
}
.logo {
position: absolute;
top: 30px;
right: 30px;
display: block;
z-index: 100;
transition: all 250ms linear;
}
.logo img {
height: 40px;
width: auto;
display: block;
}
a {
font-size: 65px;
line-height: 1;
font-family: 'Roboto', sans-serif;
margin-bottom: 0.6rem;
font-weight: 900;
color: var(--white-gr);
transition: all 250ms linear;
}
a:hover {
color: var(--yellow);
text-decoration: none;
}
a span {
white-space: nowrap;
padding: 0.3vw;
}
.section{
position: relative;
width: 100%;
display: block;
overflow-x: hidden;
}
.section {
--initial: 0;
--final: -20%;
--initial-2: 30%;
--final-2: 50%;
}
.full-height{
height: 100vh;
}
.section ul,
.section li{
position: relative;
margin: 0 auto;
padding: 0;
list-style: none;
}
.section ul{
padding: 40px 0;
}
.section ul li a {
width: fit-content;
display: flex;
position: relative;
transform: translate3d(var(--initial), 0, 0);
animation: slide 5s linear infinite;
animation-play-state: running;
opacity: 0.2;
}
.section ul li:nth-child(2) a,
.section ul li:nth-child(4) a {
transform: translate3d(var(--initial-2), 0, 0);
animation: slide-2 5s linear infinite;
left: -100%;
}
.section ul li.active a,
.section ul li a:hover {
transition-duration: 0.4s;
animation-play-state: paused;
opacity: 1;
color: var(--yellow);
text-decoration: none;
}
@keyframes slide {
0% {
transform: translate3d(var(--initial), 0, 0);
}
100% {
transform: translate3d(var(--final), 0, 0);
}
}
@keyframes slide-2 {
0% {
transform: translate3d(var(--initial-2), 0, 0);
}
100% {
transform: translate3d(var(--final-2), 0, 0);
}
}
.left-side-shadow{
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 100%;
z-index: 2;
display: block;
background-image: linear-gradient(to right, var(--dark-blue) , rgba(255,255,255,0));
pointer-events: none;
}
.right-side-shadow{
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 100%;
z-index: 2;
display: block;
background-image: linear-gradient(to left, var(--dark-blue) , rgba(255,255,255,0));
pointer-events: none;
}
.section ul.img-list {
position: absolute;
padding: 0;
top: 50%;
left: 50%;
margin-left: -180px;
margin-top: -180px;
z-index: -1;
}
.img-list li {
position: absolute;
display: block;
width: 360px;
height: 360px;
border-radius: 50%;
background-position: center;
background-size: cover;
background-image: url('https://assets.codepen.io/1462889/menu-1.jpg');
opacity: 0;
transform: scale(0.95) rotate(10deg);
transition: all 350ms linear;
}
.img-list li.show {
opacity: 0.5;
transform: scale(1) rotate(0deg);
}
.img-list li:nth-child(2) {
background-image: url('https://assets.codepen.io/1462889/menu-2.jpg');
}
.img-list li:nth-child(3) {
background-image: url('https://assets.codepen.io/1462889/menu-3.jpg');
}
.img-list li:nth-child(4) {
background-image: url('https://assets.codepen.io/1462889/menu-4.jpg');
}
.img-list li:nth-child(5) {
background-image: url('https://assets.codepen.io/1462889/menu-5.jpg');
}
@media (max-width: 991px) {
.section {
--initial-2: 20%;
--final-2: 40%;
}
a {
font-size: 60px;
}
.cursor,
.cursor2,
.cursor3{
display: none;
}
.section ul.img-list {
margin-left: -140px;
margin-top: -140px;
}
.img-list li {
width: 280px;
height: 280px;
}
}
@media (max-width: 767px) {
.section {
--initial-2: 10%;
--final-2: 30%;
}
}
@media (max-width: 575px) {
.section {
--initial-2: -20%;
--final-2: 0;
}
a {
font-size: 50px;
}
}