This code is very suitable for websites that have images next to each other and want these images to have an effect at the same time and be displayed as a gallery. In this code, the images are in color in normal mode. By placing the mouse cursor on each of them, these images zoom in a bit. At the same time, the mouse icon changes and the phrase exploration is displayed next to the mouse cursor. Clicking on any image will display the image in full screen. There are also arrows on the left and right of the image to display other images.
<!-- This script got from www.devanswer.com -->
<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>
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;
}
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" });
})
});