[HTML/CSS/jQuery]スクロールしたらマーカーがひかれるアニメーション___φ(.. )
スクロールでマーカーがひかれてくアニメーションを学んだのでまとめ。___φ(.. )
スクロールしてみてね。
See the Pen マーカーアニメーション by himeka223 (@himeka223) on CodePen.
FLOCSS設計ベースで使用することを考えて、コンポーネントとして作成。
クラス名については以下のルール。
-
JavaScript(jQery)で動的に変更するスタイルはSMACSS(スマックス)のステートクラスを使い
is-
プレフィックスを付与。is-active
-
JavaScript(jQery)から参照されるセレクタ自体にはにスタイルを当てたくないので、
js-
プレフィックスを付与したクラス名の、もう一つのセレクタを用意。js-markerScrollAnimation"
HTML
<span class="c-marker js-markerScrollAnimation">ここにマーカーをつける文章をいれる</span>
CSS
.c-marker {
background: -webkit-linear-gradient(left, rgb(255,250,153) 50%, transparent 50%);
background: -moz-linear-gradient(left, rgb(255,250,153) 50%, transparent 50%);
background: linear-gradient(left, rgb(255,250,153) 50%, transparent 50%);
background-repeat: no-repeat;
background-size: 200% .8em;
background-position: 100% .5em;
transition: 2s;
}
.c-marker.is-active{
background-position: 0% .5em;
}
マーカー部分
<span class="c-marker js-markerScrollAnimation">ここにマーカーをつける文章をいれる</span>
.c-marker {
background: -webkit-linear-gradient(left, rgb(255,250,153) 50%, transparent 50%);
background: -moz-linear-gradient(left, rgb(255,250,153) 50%, transparent 50%);
background: linear-gradient(left, rgb(255,250,153) 50%, transparent 50%);
background-repeat: no-repeat;
background-size: 200% .8em;
background-position: 100% .5em;
transition: 2s;
}
.c-marker.is-active{
background-position: 0% .5em;
}
マーカー部分
マーカー部分は、要素のbackground
。
background
が動いてマーカーがひかれたように見える仕組みである。
構造
1. 要素のbackground
をグラデーション(linear-gradient)
で左半分を透明、右半分を黄色**として、no-repeat
を指定。
background: -webkit-linear-gradient(left, rgb(255,250,153) 50%, transparent 50%);
background: -moz-linear-gradient(left, rgb(255,250,153) 50%, transparent 50%);
background: linear-gradient(left, rgb(255,250,153) 50%, transparent 50%);
background-repeat: no-repeat;
linear-gradient
はベンダープレフィックスで書き方が少し違うので気をつける。
background: -moz-linear-gradient(開始位置, 開始色, 終了色);
background: -webkit-linear-gradient(開始位置, 開始色, 終了色);
background: linear-gradient(to 方向, 開始色, 終了色);
今回は、左から黄色を50%(半分)、続いて透明を50%(半分)という指定。
2. background
の長さを要素の200%(2倍)にする。
background-size: 200% .8em;
background-size: 横のサイズ 縦のサイズ;
と指定できるので、横が要素の200%(2倍)、縦が.8em(emは文字サイズを1emとしたときの比率の単位)とする。
3. background
の位置を要素分、左にずらす。
background-position: 100% .5em;
background-position: 横の位置 縦の位置;
と指定できるので、横が要素の100%(要素分)左にずれ、縦が.5em(emは文字サイズを1emとしたときの比率の単位)下にずれる。
4. is-active
クラスに、左にずらしたbackground
の位置をもとの位置に戻すための指定をする。
.c-marker.is-active{
background-position: 0% .5em;
}
is-active
クラスに付与後、背景がもとの位置に戻る。
戻っていく動作にアニメーションを付けて、マーカーがひかれる仕組みを作る。
5. transition
でアニメーションの指定をする。
transition: 2s;
transition: 秒数;
2分かけてアニメーションする。
6. jQueryでウインドウ内に入ったら、クラス付与の司令を出す
$(window).scroll(function (){
$(".js-markerScrollAnimation").each(function(){
var position = $(this).offset().top; //ページの一番上から要素までの距離を取得
var scroll = $(window).scrollTop(); //スクロールの位置を取得
var windowHeight = $(window).height(); //ウインドウの高さを取得
if (scroll > position - windowHeight){ //スクロール位置が要素の位置を過ぎたとき
$(this).addClass('is-active'); //クラス「active」を与える
}
});
});
var position = $(this).offset().top
ページの一番上(ウインドウに見えてない部分も含む)から.js-markerScrollAnimation
までの距離。
var scroll = $(window).scrollTop();
ページの一番上(ウインドウに見えてない部分も含む)から、スクロールされた位置。スクロールされて見えなくなった部分。
var windowHeight = $(window).height();
ウィンドウの高さ
ページの一番上から要素までの距離
- ウィンドウの高さ
がスクロールした分の距離
より大きくなったら、スクロール位置が要素の位置を過ぎたことになり、is-active
を付与する。
完成!!!
まさかこの動きが背景のグラデーションで出来てるとは。
色んなアレンジができそうな気がした。
参考サイト
マーカーアニメーションの基本として▼
スクロールで開始!CSSとjqueryで作るマーカー(蛍光ペン)アニメーション - ぐりおブログ
マーカーのひかれる仕組み▼
CSSでホバーすると蛍光ペンで線を引いたようなアニメーション | SPYWEB
グラデーションについて詳しく▼
CSSのグラデーション(linear-gradient)の使い方を総まとめ!
Author And Source
この問題について([HTML/CSS/jQuery]スクロールしたらマーカーがひかれるアニメーション___φ(.. )), 我々は、より多くの情報をここで見つけました https://qiita.com/super-mana-chan/items/7c67dbb34bcc01227450著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .