今回はCSSだけで作るスライダーアニメーションを3つご紹介します。filterプロパティの応用とopacityで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。
htmlとcssだけしか使っていません。
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。
こちらのデザイン・コードはすべて完全オリジナルなのでコピペ大歓迎です。
この記事の目次
filterとopacityで洗練されたCSSスライダーアニメーション3選
1. シンプルだけど洗練されたスライダーアニメーション
動きは下の画像のような感じになります
実際の動きはこちら
コードはこちら
ここがポイント!
- flexboxでcontainerの中身をど真ん中に設置
- .around-sliderで外側の額縁・.sliderで内側の額縁を指定
- スライダーのナビゲーションボタンを設置しボタンを押すと画像がスライドするように指定する
- .slider imgの変化前にopacityで不透明度、filter: brightness() saturate() contrast()で明るさ・彩度・コントラストを各々調整
- .slider imgの変化後も同じく調整
- 最後にtransitionでアニメーションとして滑らかに動くように調整
2. blurでぼやけながらスライドするスライダーアニメーション
動きは下の画像のような感じになります
実際の動きはこちら
コードはこちら
ここがポイント!
- flexboxでcontainerの中身をど真ん中に設置
- .around-sliderで外側の額縁・.sliderで内側の額縁を指定
- スライダーのナビゲーションボタンを設置しボタンを押すと画像がスライドするように指定する
- .slider imgの変化前にopacityで不透明度、filter: brightness() saturate() contrast() blur()で明るさ・彩度・コントラスト・ぼやけの度合いを各々調整
- .slider imgの変化後も同じく調整
- 最後にtransitionでアニメーションとして滑らかに動くように調整
3. blurとmargin-leftでぼやけながら右へスライドするスライダーアニメーション
動きは下の画像のような感じになります
実際の動きはこちら
コードはこちら
ここがポイント!
- flexboxでcontainerの中身をど真ん中に設置
- .around-sliderで外側の額縁・.sliderで内側の額縁を指定
- スライダーのナビゲーションボタンを設置しボタンを押すと画像がスライドするように指定する
- .slider imgの変化前にopacityで不透明度、filter: brightness() saturate() contrast() blur()で明るさ・彩度・コントラスト・ぼやけの度合いを各々調整
- .slider imgの変化後も同じく調整
- 最後にtransitionでアニメーションとして滑らかに動くように調整
参考
そもそもWebデザインの基礎がわからない。。
そんなあなたにはこれ!
ふたご
未経験からWeb制作で月50万稼げるようになったUdemy教材3選
でもなあ、独学だと心配だしプログラミングスクールで学びたい!。かといってお金はかけたくないし。。
そんなあなたにはこれ!
ふたご
完全無料で一人前のエンジニアになれるプログラミングスクールあります