CSSのこの発想はすごい！scroll-behavior: smooth;によるページ内検索時のスクロールを除外するテクニック | コリス

2021/01/18 18 users smooth jQuery コリス CSS スクロール

ページにhtml {scroll-behavior: smooth;}を加えるだけで、簡単にページ内のスクロールのすべてがスムーズになります。一昔前はJavaScriptやjQueryのプラグインで実装していますが、非常に簡単に実装できるようになりました。 「すべてがスムーズになる」弊害が1つあり、ページ内検索時にも適用されてしまいます。複数の... 続きを読む

HTMLとCSSだけでカルーセル・スライダーを実装するテクニックのまとめ | コリス

2020/01/15 19 users コリス CSS Flexbox カルーセル HTML

カルーセルやスライダーをHTMLとCSSだけで実装するテクニックを紹介します。 Flexboxでの横一列配置をはじめ、scroll-snap-typeやscroll-behaviorでスライドのスクロールの挙動を調整でき、自動再生機能もCSSのみで実装できます。 CSS-Only Carousel 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元... 続きを読む