Sassでパターン背景をスクロールさせるループアニメーションを実装する
シームレスなパターンを背景に使ったデザインはよく見かけますが、今回はSassを使ってこの背景がスクロールされるループアニメーションを実装していきます。
backgroundプロパティとkeyframeのアニメーションを使うので基本的にはCSS3だけでも実装できますが、Sassのmixinを使うことでより管理が楽になりますのでオススメです。では実際のコードを見ていきたいと思います。
【scss】
// mixin登録 @mixin keyframes($animation-name: animaton) { @keyframes #{$animation-name} { @content; } @-webkit-keyframes #{$animation-name} { @content; } } @mixin animation($animation-name) { -webkit-animation: $animation-name; animation: $animation-name; -webkit-animation-fill-mode: both; animation-fill-mode: both; } // スタイル実装 .bg-scroll-anim { width: 100%; background: url(../img/bg-pattern.jpg) repeat left top; @include keyframes(bg-animation) { 0% { background-position: 0 0; } 100% { background-position: -3000px 0; } } @include animation(bg-animation 40s linear infinite); }まずはmixinでkeyframeとanimationを登録します。@includeで簡単にmixinを呼び出せるようにしておきます。次にCSS側でのスタイル実装ですが、背景を繰り返しできるような背景画像を用意しておき、それを全体に繰り返しておきます。そしてキーフレームでbackground-positionの値を動かしていくようにします。 この時にできるだけ大きな数値を指定しておいた方が、ループの開始と終了のズレがわかりにくくなります。この数値を大きくした場合はスクロールのアニメーションもゆっくりになるので、animationのプロパティで調整します。 今回のサンプルはこちらに用意しましたのでご参考に。
See the Pen bg-pattern-scroll by designsupply (@designsupply) on CodePen.
上記は横方向にスクロールさせるものですが、縦方向や斜めにもスクロールさせることが可能です。ぜひ試してみてはいかがでしょうか。 (参考にさせて頂いたサイト) SCSS アニメーションを簡単に実装するmixinとかsponserd
keyword search
recent posts
- GSAPとvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
categories