[CSS] position: sticky;を使用して、スクロール時に画像をズームさせるページのレイアウトを実装する方法
CSSのposition: sticky;を使用して、スティッキーヒーローセクションを実装する方法について紹介します。 スティッキーヒーローセクションとは、画像などをスクロールした際に固定し、その固定された画像の上にスクロールさせるコンテンツ要素です。固定された画像はズームさせたり、オーバーレイにすることもできます。 How to create a Sticky Hero section by CodyHouse 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに チュートリアルの動画 実装方法 はじめに わたし達は先日、スティッキーヒーローのコンポーネントを公開しました。このデモは、スクロールするとコンテンツを表示するスティッキーセクションです。 上記は、固定された画像をズームさせたデモで、オーバーレイにすることも簡単で
![[CSS] position: sticky;を使用して、スクロール時に画像をズームさせるページのレイアウトを実装する方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/39ce5a1514a3f90573d20acd23e68d827b403b5c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201902%2F2019051902-01.png)
[CSS]「:target疑似クラス」をつかった実用的なスタイルシートのテクニック集
「:target疑似クラス」をつかって、タブコンテンツ、画像ギャラリー、画像拡大、アコーディオンなど実用的なコンテンツを実装するチュートリアルを紹介します。 キャプチャはW3Cの「The target pseudo-class :target」 [ad#ad-2] 「:target疑似クラス」はCSS3で、アンカーリンクがアクティブな状態にスタイルを適用するものです。 IE6～8では「:target疑似クラス」は動作しないため、代替を用意したり、スクリプト「Selectivizr」を利用するなどなんらかの対応が必要です。 「:target疑似クラス」をつかって、タブコンテンツを実装 「:target疑似クラス」をつかって、画像ギャラリーを実装 「:target疑似クラス」をつかって、画像の拡大表示を実装 「:target疑似クラス」をつかって、画像のズームイン・アウトを実装 「:targe
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近のWebサイトで見かけるヘッダのアイデア・実装方法のまとめ
[CSS]アイコンがアニメーションでズームするスタイルシート
