2019年10月26日(土)
CSSだけでページ内スムーススクロールとスクロール先のテキストをハイライト
Result
See the Pen Footnotes by kachibito
(@kachibito) on CodePen.
ページ内をスムーススクロールするとそのターゲットとなる箇所が移動後にハイライトする、みたいなのハイライトは:targetとkeyframesを使い、スクロール後にフラッシュハイライトするようになっています
スクロールはscroll-behavior: smooth;なのでまだ実用的なものではありませんが一つの手段として
css
/*移動時ハイライト*/ .footnote:target { animation: yellowflash-outline 2s; } .footnotes :target { animation: yellowflash-bg 2s; } /*ハイライトをフラッシュアニメーションにする*/ @keyframes yellowflash-bg { from { background: yellow; } to { background: transparent; } } @keyframes yellowflash-...
0
0
2
17author:
かちびと.net
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ
Ads
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『CSSだけでページ内スムーススクロールとスクロール先のテキストをハイライト』についてまとめています。
この記事は特にアニメーション・LINEについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
