Sassでmarqueeタグのようなテキストを自動で流すループアニメーションを実装する
過去記事「Sassでパターン背景をスクロールさせるループアニメーションを実装する」では繰り返しの背景画像を使ったループアニメーションの実装サンプルを紹介しましたが、今回はテキストを流すようなループアニメーションを実装していきたいと思います。
今回のアニメーションですが、電光掲示板にあるような左右一方向にテキストが流れていくような動きになります。現在は廃止されていますが「marqueeタグ」を使ったような効果を得ることができます。ここではmarqueeタグの代わりにCSS3のアニメーションを使って動かしています。
まずはHTMLから見ていきます。ここでは複数のテキスト要素を使う場合にわかりやすくするためリストの形を採用しています。
【HTML】※一部抜粋
<div class="marquee-wrap"> <ul class="marquee-list"> <li class="marquee-item">テキスト1 テキスト1 テキスト1 テキスト1 </li> <li class="marquee-item">テキスト2 テキスト2 テキスト2 テキスト2 </li> <li class="marquee-item">テキスト3 テキスト3 テキスト3 テキスト3 </li> <li class="marquee-item">テキスト4 テキスト4 テキスト4 テキスト4 </li> </ul> </div>次にCSSで見た目とアニメーションを実装していきます。今回はSass(SCSS)で記述しています。CSSでも問題ないですが、CSSで書くよりわかりやすいので、調整する時なども便利なのではないでしょうか。 【CSS(SCSS)】
@keyframes animation-marquee { 0% { transform: translate(0%); } 100% { transform: translate(-100%); } } @mixin marquee { animation-name: animation-marquee; animation-duration: 50s; animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: normal; } .marquee-wrap { background: #232323; padding: 0 5px; height: 80px; line-height: 80px; overflow: hidden; position: relative; .marquee-list { white-space: nowrap; position: absolute; @include marquee; .marquee-item { display: inline; white-space: nowrap; font-weight: bold; font-size: 1.4em; color: #68EF41; padding: 0 60px 0 0; &:first-child { padding: 0 60px 0 100vw; } } } }まずはアニメーションのキーフレームを設定します。transformプロパティで0%から100%まで移動させるようにします。次にmixinでアニメーションの設定をまとめておきます。animation-durationプロパティでテキストの動きを調整できます。イージングはlinearを指定することで、一定に動くのでそれっぽく見せることができます。必要に応じてベンダープレフィックスもつけておきましょう(参考記事:CSSのベンダープレフィックスを再確認してみる) また、テキスト部分ですがinline要素にした後、white-spaceプロパティをnowrapにすることで横一行に並びます。その時にリストの最後の要素だけ、画面の横幅分の余白を左側につけておくことでループがスムーズにつながります。 これだけで、テキストを流すループアニメーションが実装できました。今回のサンプルはこちらにあげています。
See the Pen ebrEoR by designsupply (@designsupply) on CodePen.
お知らせの抜粋を掲載するときなどは、少ないスペースで表示できるのと、アニメーションがついているので見た目のインパクトを与えられるのではないでしょうか。 (参考にさせて頂いたサイト) 【CSS3】全ブラウザ対応! CSS3 で作る marquee の実装。sponserd
keyword search
recent posts
- 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を使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
categories