上記のサイトの-TOPICS-のように、スクロールした時に「見出しの両側の水平線」がページ両脇から線を引くように伸びてくるアニメーションをつけたくて色々調べたり、試したりしましたがうまくいきません。。。
上記のサイトもspanタグで囲っていたので下記のようにマークアップして水平線を表示しました。
HTML
1<h2 class="title"><span>見出し</span></h2>
CSS
1.title { 2 position: relative; 3 text-align: center; 4} 5.title span { 6 background: #fff; 7 padding: 0 20px; 8 position: relative; 9} 10.title:before { 11 content: ""; 12 display: block; 13 border-top: solid 5px #333; 14 width: 100%; 15 height: 1px; 16 position: absolute; 17 top: 50%; 18}
↓こんな感じでjQueryで動きをつけられたら良いんでしょうけど:beforeにクラスは付けられないんですよね?
CSS
1.title:before { 2 content: ""; 3 display: block; 4 border-top: solid 5px #333; 5 width: 100%; 6 height: 1px; 7 position: absolute; 8 top: 50%; 9 10 transform: translateX(100%); 11 transition: 1s all ease-in; 12} 13.title.is-active { 14 transform: translateX(0); 15}
jQuery
1$(function(){ 2 $(window).scroll(function (){ 3 $('.title:before').each(function(){ 4 var elemPos = $(this).offset().top; 5 var scroll = $(window).scrollTop(); 6 var windowHeight = $(window).height(); 7 if (scroll > elemPos - windowHeight + 500){ 8 $(this).addClass('is-active'); 9 } 10 }); 11 }); 12});
何か__参考サイトだけでも構わない__ので教えていただけると嬉しいです。
よろしくお願いいたします
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/09 19:32
退会済みユーザー
2019/03/09 21:14 編集