[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)
[JS]ちょっとしたアイデアの積み重ねが素晴らしい！画像を拡大表示するシンプルなスクリプト -Zoom.js
デモのアニメーションGIF ここでは「Esc」キーを拡大画像から元画像に戻す際に使用していますが、スクロールしてコンテンツに戻る時のアニメーションも非常に軽快です。 Zoom.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 アニメーションのエフェクトはBootstrapのtransition.jsに依存しており、Bootstrapのjsファイルかtransition.jsを記述します。 <head> ... <link rel="stylesheet" type="text/css" href="css/zoom.css"> </head> <body> ... コンテンツ ... <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/j
![[JS]ちょっとしたアイデアの積み重ねが素晴らしい！画像を拡大表示するシンプルなスクリプト -Zoom.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/d408ea9798d5866f690b92bcfb70e29e4a50a739/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015051309.png)
[CSS]簡単な記述でアコーディオンコンテンツを実装するフレキシブルボックスを使ったテクニック
2番目にホバーすると、2番目が広くなります 実装のヒントになったのは「Outdated Browser」のメインUIで、このflexboxを使ったUIだけでなく他にも面白い仕掛けが施されています。 Outdated Browser 実装はこんな感じです。 HTML HTMLは非常にシンプルで、各カラムはリスト要素で実装しています。 <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul> CSS CSSも非常にシンプル、「display: flex;」で各カラムを設定し、通常時に「flex: 1;」、ホバー時に「flex: 3;」になるようにします。 ※flexboxのブラウザのサポート状況 下記のコードは、各カラムにカラーを設定するだけでそのままコピペで使えます。 body { colo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
