2019年12月15日(日)
CSSのみでスクロール時に各セクションを固定するパララックス
Result
See the Pen Sticky Sections (Pure CSS) by kachibito
(@kachibito) on CodePen.
タイトルでうまく説明できませんでしたけどこういうやつです
パララックスの表現法が出始めた時によく見かけるようになってから今も割と見かけるのである程度定着してる感も無くはないですね
で、これなんですがそう言えばposition: sticky;で出来ますよね、という内容です
css
.container {/*高さを画面一杯にしておく*/ height: 100vh; overflow-x: hidden; } .slide {/*position: sticky;を含めてスタイリング。background-size: cover;を忘れずに*/ position: -webkit-sticky; position: sticky; top: 0; height: 100vh; display: flex; justify-content: center; align-items: center; letter-s...
0
3
12
24author:
かちびと.net
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ
‹ PREV
Photoshop(PSDファイル)とSketchで使える無料レスポンシブモックアップ20選 Webデザインにすぐ活かせる
NEXT ›
Web開発者向けChrome Dev Toolsの使い方 ブラウザでデバッグするための便利機能20選
Ads
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『CSSのみでスクロール時に各セクションを固定するパララックス』についてまとめています。
この記事は特にレスポンシブ・Googleについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
