ホームページ >ウェブフロントエンド >CSSチュートリアル >HTML、CSS、GSAP を使用した画像表示アニメーション
HTML、CSS、GSAP を使用した画像表示アニメーション
- Susan Sarandonオリジナル
- 2024-11-24 14:55:13520ブラウズ
この記事では、アイテムの上にマウスを移動したときに簡単な画像を表示するアニメーションを示します。 HTML コードは、画像やタイトルなどの作品を含むセクションを表します。 CSS コードは、レイアウトとアニメーションに必要なスタイルを提供します。 JavaScript コードは GSAP ライブラリを利用して、ホバー時の画像表示エフェクトを作成します。
<!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",
});
});
役に立ったと思ったら、ぜひ「いいね」とフォローをしてください。
以上がHTML、CSS、GSAP を使用した画像表示アニメーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。