今回はtransformを使用したそのまま使えるスライダーアニメーションのマテリアルデザインを3つご紹介いたします。
シンプルなデザインに加えて、translateやrotate、box-shadowも適宜使用することで様々な場面(Web制作やWebアプリケーションなど)で利用できるデザインとなっています。
マテリアルデザインなのでそのまますぐにでもコピペして使用できるように仕上げました。htmlとcssだけしか使っていません。
この記事の信頼性(ゆうけんブログの筆者はこんな人)
- 現役Webデザイナーが執筆
- 最高月収7桁超のフリーランス
- 完全未経験から独学でWeb制作スキルを習得
- Twitterフォロワー数2,000人超(→@twinzvlog_yk)
- Web制作のメンター経験多数
- 認定ランサー(ランサーズ最高ランク)
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。
こちらのデザイン・コードはすべて完全オリジナルなのでコピペ大歓迎です。
1. hoverで画像が斜めに動くサイト制作で便利なスライダーアニメーション
動きは下の画像のような感じになります
![]()
コードを見る
<div id="picture">
<!-- チェックボックス -->
<input type="radio" name="picture" id="pic1" checked>
<input type="radio" name="picture" id="pic2">
<input type="radio" name="picture" id="pic3">
<input type="radio" name="picture" id="pic4">
<div id="bg-pic">
<div class="inside">
<div class="pic pic_1">
</div>
<div class="pic pic_2">
</div>
<div class="pic pic_3">
</div>
<div class="pic pic_4">
</div>
</div>
</div>
<!-- スライダーのナビゲーションボタン -->
<div id="slide-buttons">
<label for="pic1"></label>
<label for="pic2"></label>
<label for="pic3"></label>
<label for="pic4"></label>
</div>
</div>
#picture {
margin: 0 auto;
width: 500px;
max-width: 100%;
text-align: center;
}
#picture input[type=radio] {
display: none;
}
#picture label {
cursor:pointer;
text-decoration: none;
padding: 5px;
}
#bg-pic {
background: #fff;
position: relative;
z-index: 1;
width: 100%;
overflow: hidden;
/* ボックスのはみ打た部分を隠す */
transform: translate(0px,0px);
/* XY軸(横縦)への移動距離を指定 */
transition-duration:.8s;
/* アニメーションの開始から終了までの時間を指定 */
}
#bg-pic:hover {
transform: translate(15px,-15px);
/* XY軸(横縦)への移動距離を指定 */
}
#pic1:checked ~ #bg-pic .inside {
margin-left: 0;
}
#pic2:checked ~ #bg-pic .inside {
margin-left: -100%;
}
#pic3:checked ~ #bg-pic .inside {
margin-left: -200%;
}
#pic4:checked ~ #bg-pic .inside {
margin-left: -300%;
}
#bg-pic .inside {
width: 400%;
line-height: 0;
height: 300px;
}
#bg-pic .pic {
width: 25%;
float:left;
display: flex;
justify-content: center;
align-items: center;
/* 上3行でボックスをど真ん中に指定 */
height: 100%;
background-size: cover;
}
#bg-pic .pic_1 {
background-image: url("https://images.unsplash.com/photo-1473181488821-2d23949a045a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80");
}
#bg-pic .pic_2 {
background-image: url("https://images.unsplash.com/photo-1442323794357-25b2ec110967?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80");
}
#bg-pic .pic_3 {
background-image: url("https://images.unsplash.com/photo-1498550744921-75f79806b8a7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80");
}
#bg-pic .pic_4 {
background-image: url("https://images.unsplash.com/photo-1476820865390-c52aeebb9891?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80");
}
/* スライダーの送りボタンを指定 */
#slide-buttons {
margin: 30px 0 0;
text-align: center;
}
#slide-buttons label {
display: inline-block;
width: 10px;
height: 10px;
border-radius:0%;
background: gainsboro;
margin: 0 10px;
transform: scale(1,1);
/* XY軸(横縦)の伸縮率を指定 */
transition-duration:.5s;
/* アニメーションの開始から終了までの時間を指定 */
}
#slide-buttons label:hover {
transform: scale(1.5,1.5);
/* XY軸(横縦)の伸縮率を指定 */
}
#pic1:checked ~ #slide-buttons label:nth-child(1),
#pic2:checked ~ #slide-buttons label:nth-child(2),
#pic3:checked ~ #slide-buttons label:nth-child(3),
#pic4:checked ~ #slide-buttons label:nth-child(4) {
background: #444;
}
2. hoverで画像がゼリーみたいに揺れるおもしろスライダーアニメーション
動きは下の画像のような感じになります
![]()
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2020/07/click-animation-sliders-transform-funny.png?resize=300%2C125&ssl=1)
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2020/07/click-animation-sliders-transform-funny.png?resize=300%2C125&ssl=1)
コードを見る
<div id="picture">
<!-- チェックボックス -->
<input type="radio" name="picture" id="pic1" checked>
<input type="radio" name="picture" id="pic2">
<input type="radio" name="picture" id="pic3">
<input type="radio" name="picture" id="pic4">
<div id="bg-pic">
<div class="inside">
<div class="pic pic_1">
</div>
<div class="pic pic_2">
</div>
<div class="pic pic_3">
</div>
<div class="pic pic_4">
</div>
</div>
</div>
<!-- スライダーのナビゲーションボタン -->
<div id="slide-buttons">
<label for="pic1"></label>
<label for="pic2"></label>
<label for="pic3"></label>
<label for="pic4"></label>
</div>
</div>
#picture {
margin: 0 auto;
width: 500px;
max-width: 100%;
text-align: center;
}
#picture input[type=radio] {
display: none;
}
#picture label {
cursor:pointer;
text-decoration: none;
padding: 5px;
}
#bg-pic {
background: #fff;
position: relative;
z-index: 1;
width: 100%;
overflow: hidden;
/* ボックスのはみ打た部分を隠す */
transform: rotateY(0deg) scaleX(1);
/* XY(横タテ)の回転角度と伸縮率を指定 */
transition-duration:.8s;
/* アニメーションの開始から終了までの時間を指定 */
}
#bg-pic:hover {
transform: rotateY(30deg) scaleX(1.1);
/* XY(横タテ)の回転角度と伸縮率を指定 */
}
#pic1:checked ~ #bg-pic .inside {
margin-left: 0;
}
#pic2:checked ~ #bg-pic .inside {
margin-left: -100%;
}
#pic3:checked ~ #bg-pic .inside {
margin-left: -200%;
}
#pic4:checked ~ #bg-pic .inside {
margin-left: -300%;
}
#bg-pic .inside {
width: 400%;
line-height: 0;
height: 300px;
}
#bg-pic .pic {
width: 25%;
float:left;
display: flex;
justify-content: center;
align-items: center;
/* 上3行でボックスをど真ん中に指定 */
height: 100%;
background-size: cover;
}
#bg-pic .pic_1 {
background-image: url("https://images.unsplash.com/photo-1473181488821-2d23949a045a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80");
}
#bg-pic .pic_2 {
background-image: url("https://images.unsplash.com/photo-1442323794357-25b2ec110967?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80");
}
#bg-pic .pic_3 {
background-image: url("https://images.unsplash.com/photo-1498550744921-75f79806b8a7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80");
}
#bg-pic .pic_4 {
background-image: url("https://images.unsplash.com/photo-1476820865390-c52aeebb9891?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80");
}
/* スライダーの送りボタンを指定 */
#slide-buttons {
margin: 30px 0 0;
text-align: center;
}
#slide-buttons label {
display: inline-block;
width: 10px;
height: 10px;
border-radius:0%;
background: gainsboro;
margin: 0 10px;
transform: scale(1,1);
/* XY軸(横縦)の伸縮率を指定 */
transition-duration:.5s;
/* アニメーションの開始から終了までの時間を指定 */
}
#slide-buttons label:hover {
transform: scale(1.5,1.5);
/* XY軸(横縦)の伸縮率を指定 */
}
#pic1:checked ~ #slide-buttons label:nth-child(1),
#pic2:checked ~ #slide-buttons label:nth-child(2),
#pic3:checked ~ #slide-buttons label:nth-child(3),
#pic4:checked ~ #slide-buttons label:nth-child(4) {
background: #444;
}
3. まるで触れられそうな3D画像のスライダーアニメーション
動きは下の画像のような感じになります
![]()
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2020/07/click-animation-sliders-transform-3d-image.png?resize=300%2C222&ssl=1)
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2020/07/click-animation-sliders-transform-3d-image.png?resize=300%2C222&ssl=1)
コードを見る
<div id="picture">
<!-- チェックボックス -->
<input type="radio" name="picture" id="pic1" checked>
<input type="radio" name="picture" id="pic2">
<input type="radio" name="picture" id="pic3">
<input type="radio" name="picture" id="pic4">
<div id="bg-pic">
<div class="inside">
<div class="pic pic_1">
</div>
<div class="pic pic_2">
</div>
<div class="pic pic_3">
</div>
<div class="pic pic_4">
</div>
</div>
</div>
<!-- スライダーのナビゲーションボタン -->
<div id="slide-buttons">
<label for="pic1"></label>
<label for="pic2"></label>
<label for="pic3"></label>
<label for="pic4"></label>
</div>
</div>
#picture {
margin: 0 auto;
width: 500px;
max-width: 100%;
text-align: center;
}
#picture input[type=radio] {
display: none;
}
#picture label {
cursor:pointer;
text-decoration: none;
padding: 5px;
}
#bg-pic {
background: #fff;
position: relative;
z-index: 1;
width: 90%;
overflow: hidden;
/* ボックスのはみ打た部分を隠す */
transform: rotateX(40deg) rotateZ(-20deg);
/* 画像の角度調整 */
box-shadow: -30px 30px 15px 5px rgba(0,0,0,0.4);
/* ボックスに影をつける(左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、広がりの長さ、色) */
transition-duration:.8s;
/* アニメーションの開始から終了までの時間を指定 */
}
#bg-pic:hover {
transform: rotateX(40deg) rotateZ(-20deg);
/* 画像の角度調整 */
box-shadow: -30px 30px 15px 5px rgba(0,0,0,0.4);
/* ボックスに影をつける(左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、広がりの長さ、色) */
}
#pic1:checked ~ #bg-pic .inside {
margin-left: 0;
}
#pic2:checked ~ #bg-pic .inside {
margin-left: -100%;
}
#pic3:checked ~ #bg-pic .inside {
margin-left: -200%;
}
#pic4:checked ~ #bg-pic .inside {
margin-left: -300%;
}
#bg-pic .inside {
width: 400%;
line-height: 0;
height: 300px;
}
#bg-pic .pic {
width: 25%;
float:left;
display: flex;
justify-content: center;
align-items: center;
/* 上3行でボックスをど真ん中に指定 */
height: 100%;
background-size: cover;
}
#bg-pic .pic_1 {
background-image: url("https://images.unsplash.com/photo-1473181488821-2d23949a045a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80");
}
#bg-pic .pic_2 {
background-image: url("https://images.unsplash.com/photo-1442323794357-25b2ec110967?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80");
}
#bg-pic .pic_3 {
background-image: url("https://images.unsplash.com/photo-1498550744921-75f79806b8a7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80");
}
#bg-pic .pic_4 {
background-image: url("https://images.unsplash.com/photo-1476820865390-c52aeebb9891?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80");
}
/* スライダーの送りボタンを指定 */
#slide-buttons {
margin: 60px 0 0;
text-align: center;
}
#slide-buttons label {
display: inline-block;
width: 10px;
height: 10px;
border-radius:0%;
background: gainsboro;
margin: 0 10px;
transform: scale(1,1);
/* XY軸(横縦)の伸縮率を指定 */
transition-duration:.5s;
/* アニメーションの開始から終了までの時間を指定 */
}
#slide-buttons label:hover {
transform: scale(1.5,1.5);
/* XY軸(横縦)の伸縮率を指定 */
}
#pic1:checked ~ #slide-buttons label:nth-child(1),
#pic2:checked ~ #slide-buttons label:nth-child(2),
#pic3:checked ~ #slide-buttons label:nth-child(3),
#pic4:checked ~ #slide-buttons label:nth-child(4) {
background: #444;
}
ここがポイント!
- flexboxでbg-picの中身をど真ん中に設置
- スライダーのナビゲーションボタンを設置しボタンを押すと画像がスライドするように指定する
- transform:rotateとbox-shadowを使用して3D画像版スライダーのマテリアルデザインに仕上げた
- transition-durationプロパティを指定して開始から終了までの自然なアニメーションを実現
『絶対にリモートワーク!』という方におすすめの求人サイトをご紹介!
クラウドテック
この講座のポイント
対象
Webデザイナー・エンジニア・グラフィックデザイナー・PM・マーケター・ライター
公式サイト
クラウドテック公式ページ
特徴
- クラウドソーシング企業大手のクラウドワークスが運営する求人サイト
- 実務未経験者でもOK
- 登録社数14万社
- フリーランス・個人事業主向け案件がケタ違いに多い
- 報酬額や勤務地・職種など希望が通りやすい
- Web制作・コーディングの高単価案件が多い
- リモートワーク案件数は業界トップクラス
- 最短3日で案件を獲得できる
現役Webデザイナーの筆者イチオシの求人サイト!フリーランス向けWeb制作案件なら確実に業界トップクラス。営業かけずに案件に困らなくなる一番の近道です。
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2020/07/iOS-の画像-3.jpg?w=110&ssl=1)
ふたご
無料で登録してみる >>
まとめ
![]()
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2021/01/zoom-start-explain.jpg?resize=880%2C586&ssl=1)
![](https://i0.wp.com/www.twinzlabo.com/wp-content/uploads/2021/01/zoom-start-explain.jpg?resize=880%2C586&ssl=1)
HTMLとCSSを使うと今回紹介したようなことも簡単にできてしまうんです。
『CSSアニメーションやエフェクトだけではなくWebサイトをゼロから作って稼いでいきたい』
『3ヶ月くらいで最低でも月10万円は稼ぎたい』
『営業とかやったことないけどWeb制作だけで稼いでいきたい』
こんな方のためにWeb制作で月80万超稼ぐ筆者が自身の経験を踏まえて【失敗しない】Webデザイナー(Web制作)独学ロードマップを執筆しました。
少額の投資で3ヶ月後には月10〜30万稼げるよう設計してあります。
(学習教材やAdobeなど最低限のコストはかかります)
ロードマップの構成
- Web制作に特化した『確実に身に付く』学習方法
- Web制作会社が喰いつく理想的なポートフォリオの作成手順
- 返信率10%以上!Web制作会社へのメール営業
有料公開も考えましたが「Webデザイナー(Web制作)はまだまだ稼げることを証明したい!」という思いが強く、期間限定で無料公開をすることにしました。
2021年半ばまでは無料公開する予定ではありますが前倒しすることもあり得ますのでご興味ある方はお早めにどうぞ!