皆様こんにちは。開発部・アニマル部署統括のPです。
今日はサイトのキャッチコピーで目立つ動きをつけたいな～ってときにおすすめの動きをご紹介します。
はい、実際にこんな感じの動きです。↓
background-clipで
テキストを流れるように表示する
実装方法としては、アニメーション部分はCSS、
スクロール位置取得・クラスを動的にあてる処理をJqueryで行っています。
ではまずはhtml部分から。動きを加えたい要素にtargetクラスを追加します。
|
1 2 |
<p class="target">background-clipで</p> <p class="target">テキストを流れるように表示する</p> |
続いてjavascript部分。スクロール位置が対象要素（targetクラスを付けた要素）の位置に来た時に、showクラスを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(function(){ $(window).on('scroll', function () { var w = $(window); $('.target').each(function(){ if (w.scrollTop() > $(this).offset().top - w.height()) { $(this).addClass("show"); } }); }); }); |
最後に肝心のCSS部分です。「background-clip: text」は、文字の形に背景を切り抜くプロパティで、背景には白→透明のグラデーションを重ねています。さらにbackground-positionで左にずらした状態（重ねた状態）にしておき、showクラスがついたときに移動させることで、文字自体が動いているように見えます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.target { font-size: 40px; letter-spacing: .05em; line-height: 40px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @supports ((-webkit-background-clip: text) or (background-clip:text)) { .target { font-size: 40px; letter-spacing: .05em; line-height: 40px; -webkit-background-clip:text; background-clip: text; background-image: -webkit-gradient(linear,left top,right top,color-stop(40%,#000),color-stop(60%,transparent)); background-image: linear-gradient(90deg,#000 40%,transparent 60%); color: transparent; -webkit-transform: translateZ(0); transform: translateZ(0); background-position: left 100% top; background-size: 300% 300%; -webkit-transition: background-position 4s; transition: background-position 3s; } } .target.show { background-position: left 0 top; } |
@supportがついているのは、background-clip: textに対応していないブラウザがあるため。
ずばり、IE11です。他のブラウザではいい感じに動作してくれるはずです～。
今回はjqeuryのバージョンは3.4.1を使っていますので、うまく動作しない場合はバージョンを確認してみてください。
では(..)
タグ：css,html,JavaScript
2020.11.24