今回はtransformを使用したそのまま使えるスライダーアニメーションのマテリアルデザインを3つご紹介します。
シンプルなデザインに加えて、translateやrotate、box-shadowも適宜使用することで様々な場面(Web制作やWebアプリケーションなど)で利用できるデザインとなっています。
マテリアルデザインなのでそのまますぐにでもコピペして使用できるように仕上げました。
htmlとcssだけしか使っていません。
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。
こちらのデザイン・コードはすべて完全オリジナルなのでコピペ大歓迎です。
この記事の目次
transformエフェクトを使用したスライダーアニメーションでつくるCSSマテリアルデザイン3選
1. hoverで画像が斜めに動くサイト制作で便利なスライダーアニメーション
動きは下の画像のような感じになります
実際の動きはこちらです
コードはこちら
ここがポイント!
- flexboxでbg-picの中身をど真ん中に設置
- スライダーのナビゲーションボタンを設置しボタンを押すと画像がスライドするように指定する
- hoverするとtransform:translateで背景が斜め上に自然に動き出すそのままに使えるスライダーのマテリアルデザイン(transformの使い方については【transform完全網羅】hoverで動き出す!transformを網羅できるCSSボタンアニメーション16選)
- transition-durationプロパティを指定して開始から終了までの自然なアニメーションを実現
2. hoverで画像がゼリーみたいに揺れるおもしろスライダーアニメーション
動きは下の画像のような感じになります
実際の動きはこちらです
コードはこちら
ここがポイント!
- flexboxでbg-picの中身をど真ん中に設置
- スライダーのナビゲーションボタンを設置しボタンを押すと画像がスライドするように指定する
- hoverするとtransform:rotateYとscaleXが効いてゲームキャラみたいに動き出すスライダーのマテリアルデザインに仕上げた(transformの使い方については【transform完全網羅】hoverで動き出す!transformを網羅できるCSSボタンアニメーション16選)
- transition-durationプロパティを指定して開始から終了までの自然なアニメーションを実現
3. まるで触れられそうな3D画像のスライダーアニメーション
動きは下の画像のような感じになります
実際の動きはこちらです
コードはこちら
ここがポイント!
- flexboxでbg-picの中身をど真ん中に設置
- スライダーのナビゲーションボタンを設置しボタンを押すと画像がスライドするように指定する
- transform:rotateとbox-shadowを使用して3D画像版スライダーのマテリアルデザインに仕上げた
- transition-durationプロパティを指定して開始から終了までの自然なアニメーションを実現
参考
そもそもWebデザインの基礎がわからない。。
そんなあなたにはこれ!
未経験からWeb制作で月50万稼げるようになったUdemy教材3選
でもなあ、独学だと心配だしプログラミングスクールで学びたい!。かといってお金はかけたくないし。。
そんなあなたにはこれ!
完全無料で一人前のエンジニアになれるプログラミングスクールあります