Preview
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->
<style>
html, body, .full {
width:100%;
height:100%;
font-size:0;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.gallery {
opacity:0;
text-align:center;
background-color:#fff;
min-height:100vh;
}
.box {
cursor:pointer;
position:relative;
display:inline-block;
width:200px;
height:300px;
margin:75px;
overflow:hidden;
}
.follower {
cursor:pointer;
pointer-events:none;
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,0.75);
width:90px;
height:90px;
border-radius:50%;
z-index:1000;
}
.follower p {
color:#fff;
font-size:15px;
text-align:center;
line-height:0;
letter-spacing:0.5px;
margin-top:50%;
user-select:none;
}
.follower .txt2 {
display:none;
}
.full {
position:fixed;
top:0;
display:none;
background:#fff;
z-index:100;
}
.fullImg {
pointer-events:none;
position:absolute;
max-width:90%;
max-height:90%;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.prev, .next {
cursor:pointer;
background-color:#ddd;
color:#fff;
font-size:30px;
line-height:0;
position:absolute;
width:100px;
height:50px;
top:50%;
transform:translateY(-50%);
padding-top:50px;
}
.next {
right:0;
}
</style>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js'></script>
<div class="gallery">
<div class="full">
<img class="fullImg" src="" />
<div class="prev"> ← </div>
<div class="next"> → </div>
</div>
<div class="follower">
<p class="txt1">Explore</p>
<p class="txt2">Close</p>
</div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
let current = "",
imgArr = [];
for (let i = 0; i < 6; i++) {
const img = document.createElement("img"),
box = document.createElement("div");
img.draggable = false;
img.src = "https://picsum.photos/id/" + (i + 50) + "/400/600";
imgArr.push(img.src);
gsap.set(img, { attr: { class: "img" }, width: 200, height: 300 });
gsap.set(box, { attr: { class: "box", id: "box" + i } });
box.appendChild(img);
$(".gallery").append(box);
}
gsap.set(".follower", { scale: 0 });
gsap.set(".gallery", { opacity: 1 });
$(".gallery").on("mousemove", (e) => {
gsap.to(".follower", {
duration: 0.3,
x: e.clientX - 45,
y: e.clientY - 53
});
});
$(".box").on("mouseover", (e) => {
if (gsap.isTweening(".full")) return;
const box = e.currentTarget,
img = box.firstChild;
gsap.to(".follower", { duration: 0.2, scale: 1 });
gsap.to(".gallery", {
duration: 1,
ease: "power2.inOut",
backgroundColor: "#ddd"
});
gsap.to(".box", {
opacity: (i, t) => (t == box ? 1 : 0.3),
ease: 'power1.inOut'
});
gsap.to(img, { scale: 1.1, duration: 6, ease: "expo" });
//smoothes jitters in FF
gsap.to(img, {
rotation: 0.05,
yoyo: true,
repeat: 5,
duration: 1,
ease: 'none'
});
});
$(".box").on("mouseout", (e) => {
if (current === "") {
gsap.to(".follower", {
duration: 0.15,
ease: "power1.in",
scale: 0
});
}
gsap.to(".gallery", {
duration: 1,
backgroundColor: "#fff"
});
gsap.to(".img", { scale: 1, overwrite: true, duration: 0.3 });
gsap.to(".box", { opacity: 1, ease: "power1.inOut" });
});
$(".box").on("click", (e) => {
if (gsap.isTweening(".full")) return;
current = Number(e.currentTarget.id.substr(3));
gsap
.timeline()
.set(".fullImg", { attr: { src: imgArr[current] } })
.set(".full", { display: "block" })
.fromTo(".full", { y: "100vh" }, { duration: 0.6, y: 0, ease: "expo.inOut" })
.fromTo(".fullImg", { opacity: 0 }, { duration: 0.4, opacity: 1, ease: "sine.inOut" }, 0.4)
.fromTo(".prev", { x: -100 }, { duration: 0.6, x: 0, ease: "power4" }, 0.4)
.fromTo(".next", { x: 100 }, { duration: 0.6, x: 0, ease: "power4" }, 0.4);
gsap
.timeline({ defaults: { duration: 0.25, ease: "power1.inOut" } })
.to(".txt1", { opacity: 0 })
.set(".txt1", { display: "none" })
.set(".txt2", { display: "block", opacity: 0 })
.to(".txt2", { opacity: 1 });
});
$(".full").on("click", (e) => {
if (gsap.isTweening(".full")) return;
if ($(e.target).hasClass("prev") || $(e.target).hasClass("next")) return;
current = "";
gsap.timeline()
.to(".follower", { duration: 0.15, ease: "power1.in", scale: 0 }, 0)
.to(".prev", { duration: 0.2, ease: "power1.in", x: -100 }, 0)
.to(".next", { duration: 0.2, ease: "power1.in", x: 100 }, 0)
.to(".fullImg", { duration: 0.4, opacity: 0, ease: "sine.inOut" }, 0)
.to(".full", { duration: 0.4, y: "-100vh", ease: "power3.in" }, 0.3)
.fromTo(".gallery", { backgroundColor: '#ccc' }, { duration: 0.5, backgroundColor: "#fff", ease: "power2.inOut" }, 0.5)
.fromTo(".box", { opacity: 0 }, { duration: 0.3, opacity: 1, ease: "sine.inOut" }, 0.6)
gsap.timeline({ defaults: { duration: 0.25, ease: "power1.inOut" } })
.to(".txt2", { opacity: 0 })
.set(".txt2", { display: "none" })
.set(".txt1", { display: "block", opacity: 0 })
.to(".txt1", { opacity: 1 });
});
$(".prev, .next").on("mouseover", (e) => {
gsap.to(".follower", {
duration: 0.15,
scale: 0
});
gsap.to(e.currentTarget, {
duration: 0.3,
backgroundColor: "#eee",
color: "#aaa"
});
});
$(".prev, .next").on("mouseout", (e) => {
gsap.to(".follower", {
duration: 0.15,
scale: 1
});
gsap.to(e.currentTarget, {
duration: 0.6,
backgroundColor: "#ddd",
color: "#fff"
});
});
$(".prev, .next").on("click", (e) => {
if (gsap.isTweening(".fullImg")) return;
if ($(e.target).hasClass("prev")) {
(current > 0) ? current-- : current = imgArr.length - 1;
}
if ($(e.target).hasClass("next")) {
(current >= imgArr.length - 1) ? current = 0 : current++;
}
gsap.timeline()
.to(".fullImg", { duration: 0.3, opacity: 0, ease: "sine.inOut" }, 0)
.set(".fullImg", { attr: { src: imgArr[current] } })
$('.fullImg').on('load', (e) => {
$('.fullImg').off('load');
gsap.fromTo(".fullImg", { opacity: 0 }, { duration: 0.4, opacity: 1, ease: "sine.inOut" });
})
});
</script>
</body>
</html>