Result
ページ内をスムーススクロールするとそのターゲットとなる箇所が移動後にハイライトする、みたいなの
ハイライトは: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-outline { from { outline: 10px solid yellow; } to { outline: 10px solid transparent; }}/*スクロール*/html { scroll-behavior: smooth;} |
can i use
scroll-behaviorのブラウザ対応状況です。今のところはさほど実用的とは言えない感じですね
スクロールは高い需要があり、衰える様子も無さそうなのでこのまま他ブラウザも対応してくれると嬉しいですね
