NeumorphicTiltとは？
近年、ニューモーフィズム（Neumorphism）がデザインのトレンドとして注目されています。従来のフラットデザインとは異なり、ニューモーフィズムは光と影を活用して立体感を演出するデザインスタイルです。
「NeumorphicTilt」は、このニューモーフィズムの特徴を活かし、GSAP（GreenSock Animation Platform）を使用してホバーアニメーションを実装したエフェクトです。
このエフェクトでは：
- マウスをカードに乗せると、マウスの方向に応じて傾く
- カード内の画像がぼやけた状態からクリアになる
- 画像がズームし、立体的なホバーエフェクトを演出
このように、視覚的に美しいインタラクションを実現します。
NeumorphicTiltのデモ
まずは、実際のデモを見てみましょう。
See the Pen Untitled by masakazuimai (@masakazuimai) on CodePen.
このエフェクトを使えば、モダンで洗練されたUIを作成でき、ユーザーエクスペリエンスを向上させることができます。
NeumorphicTiltを実装する方法
では、実際にこのアニメーションを実装する方法を紹介します。
1. 必要なファイルを準備
GSAPを使用するため、CDNを読み込んでおきます。
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
2. HTMLを作成
まずは、カードを配置するHTMLを用意します。
<div class="grid">
<div class="card"><img src="https://picsum.photos/180/250?random=1" alt="Image 1"></div>
<div class="card"><img src="https://picsum.photos/180/250?random=2" alt="Image 2"></div>
<div class="card"><img src="https://picsum.photos/180/250?random=3" alt="Image 3"></div>
<div class="card"><img src="https://picsum.photos/180/250?random=4" alt="Image 4"></div>
<div class="card"><img src="https://picsum.photos/180/250?random=5" alt="Image 5"></div>
<div class="card"><img src="https://picsum.photos/180/250?random=6" alt="Image 6"></div>
</div>
3. CSSでデザインを整える
次に、ニューモーフィズム風のデザインを適用します。
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #1a1a1a, #2e2e2e);
margin: 0;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
width: 600px;
}
.card {
width: 180px;
height: 250px;
position: relative;
overflow: hidden;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: inset 5px 5px 15px rgba(255, 255, 255, 0.1),
inset -5px -5px 15px rgba(0, 0, 0, 0.3),
5px 5px 15px rgba(0, 0, 0, 0.4);
transition: box-shadow 0.3s ease-out;
will-change: transform;
}
.card img {
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(1px);
transition: transform 0.3s ease-out, opacity 0.3s ease-out, filter 0.3s ease-out;
}
4. JavaScriptでアニメーションを適用
最後に、GSAPを使ってアニメーションを適用します。
document.querySelectorAll('.card').forEach(card => {
card.addEventListener('mousemove', (e) => {
const rect = card.getBoundingClientRect();
const x = e.clientX - rect.left - rect.width / 2;
const y = e.clientY - rect.top - rect.height / 2;
const rotateX = (y / rect.height) * -30;
const rotateY = (x / rect.width) * 30;
gsap.to(card, {
rotationX: rotateX,
rotationY: rotateY,
scale: 1.1,
duration: 0.25,
ease: "power2.out"
});
gsap.to(card.querySelector('img'), {
scale: 1.2,
opacity: 0.9,
filter: "blur(0px)",
duration: 0.25,
ease: "power2.out"
});
});
card.addEventListener('mouseleave', () => {
gsap.to(card, {
rotationX: 0,
rotationY: 0,
scale: 1,
duration: 0.4,
ease: "power2.out"
});
gsap.to(card.querySelector('img'), {
scale: 1,
opacity: 1,
filter: "blur(1px)",
duration: 0.4,
ease: "power2.out"
});
});
});
まとめ
NeumorphicTiltエフェクトを実装すると、洗練されたニューモーフィズム風のホバーアニメーションを簡単に作ることができます。
今回紹介した方法を応用すれば、ボタン・カード・画像ギャラリーなど、さまざまなデザインに活用できます。
ぜひ、実際に試してみてください！🚀✨