Blog

[jQuery+CSS]テキストを流れるように表示する(background-clip)

皆様こんにちは。開発部・アニマル部署統括のPです。
 
今日はサイトのキャッチコピーで目立つ動きをつけたいな~ってときにおすすめの動きをご紹介します。
 
はい、実際にこんな感じの動きです。↓

background-clipで
テキストを流れるように表示する

実装方法としては、アニメーション部分はCSS、
スクロール位置取得・クラスを動的にあてる処理をJqueryで行っています。
 
ではまずはhtml部分から。動きを加えたい要素にtargetクラスを追加します。

続いてjavascript部分。スクロール位置が対象要素(targetクラスを付けた要素)の位置に来た時に、showクラスを追加します。

最後に肝心のCSS部分です。「background-clip: text」は、文字の形に背景を切り抜くプロパティで、背景には白→透明のグラデーションを重ねています。さらにbackground-positionで左にずらした状態(重ねた状態)にしておき、showクラスがついたときに移動させることで、文字自体が動いているように見えます。

@supportがついているのは、background-clip: textに対応していないブラウザがあるため。
ずばり、IE11です。他のブラウザではいい感じに動作してくれるはずです~。
 
今回はjqeuryのバージョンは3.4.1を使っていますので、うまく動作しない場合はバージョンを確認してみてください。
 
では(..)


タグ:css,html,JavaScript

2020.11.24