Artikel ini menunjukkan animasi dedah imej ringkas apabila menuding pada item. Kod HTML mewakili bahagian dengan karya, termasuk imej dan tajuk. Kod CSS menyediakan penggayaan yang diperlukan untuk susun atur dan animasi. Kod JavaScript menggunakan perpustakaan GSAP untuk mencipta kesan pendedahan imej pada tuding.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Image Reveal Animation</title> <link rel="stylesheet" href="styles.css"> </head> <body> <section> <pre class="brush:php;toolbar:false">body { font-family: "Lucida Sans"; background-color: #000; } .works { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-bottom: 250px; position: relative; } .works .container-works { width: 1200px; max-width: 100%; padding: 0 15px; margin: auto; } .works .content-works { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .works .header-works { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-bottom: 35px; border-bottom: 1px solid #ffffff; } .works .header-works h3 { font-size: 26px; color: #fff; } .works #gallery-work { position: fixed; width: 385px; height: 280px; transform: translateY(-50%, 50%); z-index: 999; overflow: hidden; pointer-events: none; transition: all cubic-bezier(0.19, 1, 0.22, 1) 2s; } .works #work-images { width: 100%; height: calc(280px * 3); display: flex; flex-direction: column; transition: all cubic-bezier(0.19, 1, 0.22, 1) 2s; } .works .work-image { width: 100%; height: 100%; background-size: cover; background-position: center; } .works .grid-works { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .works .grid-works .item-work { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 40px 0; border-bottom: 1px solid #fff; opacity: 0.6; -webkit-transition: 0.5s; transition: 0.5s; cursor: pointer; position: relative; z-index: 2; } .works .grid-works .item-work .title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .works .grid-works .item-work:hover { opacity: 1; } .works .grid-works .item-work h4 { font-size: 26px; line-height: 40px; color: #fff; }
const elementsWorks = document.querySelectorAll(".item-work"); const slidePicWorks = document.querySelector("#gallery-work"); const slidePicsWorks = document.querySelector("#work-images"); gsap.set(slidePicWorks, { autoAlpha: 0 }); elementsWorks.forEach((element, index) => { element.addEventListener("mouseenter", function () { gsap.to(slidePicsWorks, { marginTop: `-${280 * index}px`, duration: 0.2, ease: "power1", }); }); element.addEventListener("mouseleave", function () { gsap.to(element, { color: "initial", duration: 0.2, ease: "power1" }); }); }); window.addEventListener("mousemove", function (e) { gsap.to(slidePicWorks, { top: `${e.clientY}px`, left: `${e.clientX}px`, xPercent: -20, yPercent: -45, duration: 0.2, ease: "power1", }); }); document .querySelector(".items-works") .addEventListener("mouseenter", function () { gsap.to(slidePicWorks, { autoAlpha: 1, duration: 0.2, ease: "power1", }); }); document .querySelector(".items-works") .addEventListener("mouseleave", function () { gsap.to(slidePicWorks, { autoAlpha: 0, duration: 0.2, ease: "power1", }); });
Jika anda rasa Ia berguna jangan lupa Like dan Follow untuk lebih lanjut.
Atas ialah kandungan terperinci Animasi Pendedahan Imej dengan HTML, CSS dan GSAP. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!