AppleやNike、Teslaといった誰もが知る大企業のWebレイアウトを、CSSで再現するテクニック集がTwitterで投稿され、話題となっています。 CSSのみで表現できる目からウロコのテクニックが中心で、あの驚くようなエフェクトも実はシンプルな数行のコードで表現されていたりします。 コピペできるCSSコードと一緒に、デモサンプルも確認してみましょう。CSSで解決できるテクニック、増えています。 「これどうやる？」アップルやナイキなど大企業Webサイトで利用中のレイアウト再現CSSテクニック集 ノーコードでレスポンシブなデザインを構築できる Builder.io のCEO @Steve8708は、有名サイトで使われている魅力的なレイアウトが、どのように作成されているのか、コピー用のサンプルコードと一緒にみじかい動画で詳しく紹介しています。 ユーザーの視線を奪うアニメーションやレイアウ
ログイン読み込んでいます…
木村浩康 @hiroccck 最近のスクロール芸極まりすぎててもうこれ以上先はないんじゃないかと思ってたけどめっちゃくちゃ王道でまっすぐ素直にど真ん中ぶち抜いて矛盾なく限界突破してる。。まだ先があったかー。すげー。。 pola.co.jp/wecaremore/
スクロールで全画面がスライドのように切り替わるウェブサイトの表現があります。手軽にこの表現を実装するJSライブラリ、fullPage.jsを使ったことのある方もいるのではないでしょうか？ かつては無料で使えたこのライブラリですが、現在はGPLライセンスのプロジェクト以外では使用料がかかります。 その一方、CSSとJavaScriptの進化により、このような表現をライブラリを使わずとも比較的簡単に実装できるようになりました。本記事では、基本的な機能をおさえた、全画面スクロールの実装方法を紹介します。 この記事を通じて以下の技術も学べます。 スクロールをピタッと止めるCSSプロパティscroll-snap-type 画面と要素の交差を検知するIntersection Observer API スムーススクロールが実装できるJavaScriptメソッドscrollIntoView() デモを別ウ
この記事に書いてあること JavaScriptプラグインのbody-scroll-lock.jsの使い方について サイトリンク GitHubリポジトリ npmサイト body-scroll-lock.jsとは？ ターゲット要素（モーダル/ライトボックス/フライアウト/ナビメニューなど）のスクロールを中断せずに、ボディスクロールを禁止にするプラグインです 対象ブラウザ iOS Mobileおよびタブレット、Android、デスクトップSafari/Chrome/Firefox どんな時に使うか？ 例えばモーダルを表示した時に、背景を固定したいといった場合に使うことができます。 モーダルの中だけスクロールを有効にして、背景固定を実現するなんてことも簡単に実装可能です。 なぜ使うの？ スクロールのロックは簡単そうに思えて、実は結構面倒くさい処理内容です。 例えば、 overflow:hidden
はてなエンジニア Advent Calendar 2022 - Hatena Developer Blog の 2023/1/5 の記事です。 id:hogashi です。 目次 目次 3行 こういうやつ 仕様を眺める 追記1: おまけ 追記2: id="top" な要素があるときは？ 3行 a タグの href 属性に #top と書くと、クリックしてページの先頭にスクロールできる、という話をしているのを見て、 それって仕様なんだっけ、と思って調べたところ、 仕様でした こういうやつ クリックしてこのページの先頭にスクロールする <a href="#top">クリックしてこのページの先頭にスクロールする</a> 仕様を眺める MDN の a タグのページにちょろっと書いてあって、 HTML の仕様に定義されているよ、とある <a>: The Anchor element - HTML:
スクロールの連鎖（スクロールチェーン）とは、ページ上にスクロールするコンテンツがあり、そのコンテンツをスクロールして終点に到達するとメインのコンテンツもスクロールしてしまう現象です。 モーダルにスクロールがある場合、スマホのナビゲーションにスクロールがある場合、固定サイドバーにスクロールがある場合など、スクロールチェーンしないように実装するCSSのテクニックを紹介します。 Prevent Scroll Chaining With Overscroll Behavior by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロールチェーンとは 古い解決方法 今の解決方法: overscroll-behavior overscroll-behaviorの使用方法 終わりに はじめに posi
CSSのスクロールスナップが登場して早4年、現在ではほぼすべてのブラウザにサポートされ、採用しているWebサイトやスマホアプリも増えてきました。 CSSのスクロールスナップについて、基礎知識をはじめ、各プロパティの機能や使い方、スクロールスナップの実際の使用例、実装の注意点などを紹介します。 CSS Scroll Snap by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSのスクロールスナップを使う理由 スクロールコンテナの基本 スクロール コンテナの注意点 CSSのスクロールスナップとは scroll-snap-stopの使い方 scroll-paddingの使い方 scroll-marginの使い方 CSSのスクロールスナップの使用例 block値とinline値について アク
まもなくリリースされるChrome 115で実装されるScroll-driven Animationsにより、スクロールをトリガーにしたアニメーションの実装方法が大きく変わります。 スクロールすると要素がアニメーションで表示されたり、スクロール量で変化するインジケーター、背景が変化するパララックスなど、実装がそれなりに手間がかかりましたが、数行のコードで実装できるようになります。スクロールをトリガーにしたアニメーションを実装するこれからの方法を紹介します。 Animate elements on scroll with Scroll-driven animations by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分が同ライセンスも含みます。 はじめに Webのアニメーション、ちょっとだけおさらい アニ
Webページを表示し、スクロールダウンするとヘッダが非表示になり、ページのどこからでもスクロールアップするとヘッダが再び表示される、というのを見たことがあると思います。 これまでは実装するにはJavaScriptが必要でしたが、CSSのみで実装できる方法を紹介します。 Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up. by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS Scroll-Driven Animationsでスクロール方向を検出する transition-delayプロパティを使ったテクニック ヘッダをスクロール時に表示
Next.jsにはexperimental(実験的機能)でscrollRestorationというフラグが存在します。 // next.config.js const nextConfig = { // ... experimental: { scrollRestoration: true, }, } module.exports = nextConfig デフォルトでもブラウザ側でスクロール位置を復元してくれることもありますが、Safariでは復元されなかったり、ChromeでもgetServerSideProps利用時にはこのフラグを有効にしないとスクロール位置が復元されないなど不安定な状態です。最近この辺りについて識者の方々から色々ご教示いただき、自分では気付けないような部分の知見も多く得られたので、備忘録兼ねてscrollRestorationが何を解決しようとして、どう実装されて
はじめに 私は今、CSVエディタ SmoothCSV 3 を開発しています。フレームワークとして Tauri を採用しており、レンダラーにはWebの技術（React + TypeScript）を使っています。 CSVエディタは大量の行・セルを表示する必要がありますが、Webの技術ではこのようなシーンではバーチャルスクロールを使うのが定石です。 SmoothCSVでもバーチャルスクロールを使っていましたが、どうやらこのバーチャルスクロールにも限界があるらしく、数百万行のような極端に大量のデータを表示する場合に最後まで表示しきれない問題に遭いました。 ここではバーチャルスクロールの基本と、その限界をどう乗り越えたかを紹介します。 About Me 株式会社ヘンリーでソフトウェアエンジニア & アーキテクト的なことをしつつ、個人開発してます。 Social accounts: kohii on
カルーセルやスライダーをHTMLとCSSだけで実装するテクニックを紹介します。 Flexboxでの横一列配置をはじめ、scroll-snap-typeやscroll-behaviorでスライドのスクロールの挙動を調整でき、自動再生機能もCSSのみで実装できます。 CSS-Only Carousel 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 カルーセルをCSSのみで実装するテクニックのまとめ カルーセルやスライドを実装する時、HTMLとCSSだけでどれだけのものが実装できるか知るとあなたは驚くかもしれません。以前に紹介したHTMLとCSSで実装するスライダーを見てましょう。 実装のポイントは、下記の通りです。 スライダーの各パネルは、Flexboxで横一列に設定します。 パネルを1つだけ表示するにはオーバーフローを使用し、-
scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する 2024.06.01 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがクラシックスクロールバーの場合、スクロールバーの表示・非表示によりボックスの幅が変わるため、画面がガタつくことがあります。scrollbar-gutter プロパティを使うとスクロールバー用のスペースをあらかじめ確保でき、画面のガタツキを解消できます。 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがどのように表示されるかは OS やブラウザの設定により異なりますが、大きく分けて以下
CSSだけでスクロールアニメーションが作れる！？ 新技術Scroll-driven Animationsとは 2023年7月にリリースされたGoogle Chrome 115では、「Scroll-driven Animations」が搭載されました。 Scroll-driven Animationsを使うと、今まではJavaScriptを使わなければ実装できなかったスクロールと連動するようなアニメーションがCSSだけで実現できるようになります。 以下は、CSSだけを使って作成したスクロールアニメーションのデモです。一切JavaScriptは使用していません。 Scroll-driven AnimationsはJavaScriptでも使うこともできますが、本記事では、実装の手軽さを一番にお伝えしたいため、CSSだけを使ったスクロール駆動アニメーションの作り方をご紹介します。 スクロールアニメ
JavaScript library to animate elements as they scroll into view. スクロールして表示される要素をアニメーション化するJavaScriptライブラリ 要素が画面に表示されたら、指定したアニメーションを実行してくれる優れものです。 「ふわっと表示」「下から表示」「遅れて表示」など簡単に実装することができます。 公式サイト：https://scrollrevealjs.org/ ScrollRevealの使い方 ライブラリ読み込み 使い方は簡単。ライブラリをscriptタグで読み込み、対象の要素にクラスを与えてJavaScriptからアニメーションを指定するだけです。 CDNは公式サイトのインストールから読み込みます。 // 最新バージョンの場合 <script src="https://unpkg.com/scrollreveal
固定のヘッダーがアンカー先コンテンツを隠してしまう、これはしばしば問題になることがあります。 この問題にはいくつかの解決策があるので、ここでは5つの解決策を紹介します。実装サイトの参考としてリンクも記載しておきますが、記事を書いた当時のものなので現在の実装とは異なる可能性があることにご注意ください。 1. JavaScript JavaScriptでの実装は説明が不要なのでここでは省略します。画像の高さだったり、考えることもあるのであえてこの方法を使うメリットが思いつかないのであれば、この方法で実装する必要はないはずです。 2. 空の Element を利用する 実際のリンク先にIDを付与するのではなく空の別の要素を置いておいて、それを絶対配置で飛ばしておく方法になります。
CSSだけで要素がスクロールできるかどうかを検出する方法を紹介します。 先日紹介したスクロール駆動アニメーション（Scroll-Driven Animations）はスクロール可能なオーバーフローがある場合にのみアクティブになるため、要素がスクロール可能かも検出することができます。 Solved by CSS Scroll-Driven Animations: Detect if an element can scroll or not by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSで要素がスクロールできるかどうかを検出する アクティブと非アクティブなスクロール駆動アニメーション CSSの変数を追加して、スクロール検出機能を作成 実装でより使いやすくする 実装例 はじめに スクロール駆動ア
TAK(@tak_dcxi)です。 モーダルやドロワーメニューを開いている時に背面コンテンツが勝手にスクロールされるとヘイトポイント溜まりがちなので、ユーザビリティ向上のためにも背面コンテンツのスクロールは抑制しておきましょう。 結論 // ドキュメントの書字方向を取得し、縦書きかどうかを判定 const isVerticalWritingMode = (): boolean => { const writingMode = window.getComputedStyle(document.documentElement).writingMode return writingMode.includes('vertical') } // スクロールバーの幅を計算する const getScrollBarSize = (): number => { const scrollBarXSize =
2023年2月7日 JavaScript 新しいMacbook Proが発売され、特設ページが公開されています。そのページの中で私の目に止まったのは、Macbook Proのスペックではなく、スクロールに合わせて動くグラデーションカラーのテキストでした。今回はこれをJavaScriptの Intersection Observer を使って実装した例を紹介します。 ↑私が10年以上利用している会計ソフト！ この記事は動画でも紹介しています。動画派の方はこちらを御覧ください！ このテキストを実装したい！ Macbook Proの紹介ページにあるグラデーションカラーのテキストです。スクロールするとグラデーションの位置も変わるのがわかりますね！ Intersection Observerとは？ 従来、スクロールに合わせて要素を操るには scroll というイベントを利用していました。ただ、それだ
ユーザーのアンケート結果からその年のCSSの流行りや動向がわかるThe State of CSS 2020というサイトをご存知でしょうか。 さまざまなCSSプロパティをカテゴライズし、どのくらいのユーザーがそのプロパティを知っているか、使ったことがあるかがまとめられています。 私は、当社のPodcastでもこのState of CSSについてお話ししたのですが、今回は、実際にコードベースで2021年に活躍していくであろう3つのCSSプロパティについてご紹介します。 ※対応ブラウザ状況について、最新の情報については適宜Can I useなどでご確認ください。 backdrop-filter まず1つ目はbackdrop-filterです。State of CSSでは知らないと答えた人が49.9%と全体の半数いました。 このプロパティは、すりガラスのように後ろにあるものが見えづらくなるようなぼ
# Introduction Scroll-driven animations are a common UX pattern on the web. These are animations that are linked to the scroll position of a scroll container. This means that as you scroll up or down, the linked animation scrubs forward or backward in direct response. Think of interesting effects such as parallax background images or reading indicators which move as you scroll. A similar type of s
Webページにインタラクティブな視差効果のアニメーションを実装できる軽量のJavaScriptを紹介します。 スクロールすると要素が近づいてくるエフェクトは、Appleのランディングページなどでもよく見かけます。スクロールすると要素が押し出されるように近づくプッシュイン、スクロールすると要素に向かってカメラが近づくドリーインなどのエフェクトを簡単に実装できます。 PushIn.js PushIn.js -GitHub PushIn.jsの特徴 PushIn.jsのデモ PushIn.jsの使い方 PushIn.jsの特徴 PushIn.jsはJavaScriptとCSSを使用して、ユーザーがWebページをスクロールしたときに指定した要素のスケールを操作することにより、要素が移動するような錯覚を作り出します。ブラウザに組み込まれているrequestAnimationFrameを使用しており、
Animate elements entering the viewport Animon gets out of the way and allows you to describe animations using class names and data-attributes. Based on intersectionObserver, Animon weighs only 0.9kb, with zero dependencies. Learn how to use it. Usage Import the library and its styles from a CDN: <link rel="stylesheet" href="https://unpkg.com/animon@1.0.1/dist/animon.css"/> <script src="https://unp
Alex Russell on browsers, standards, and the process of progress. Update: After further investigation, an even better solution has presented itself, which is documented in the next post. The new content-visibility CSS property finally allows browsers to intelligently decide to defer layout and rendering work for content that isn't on-screen. For pages with large DOMs, this can be transformative. I
Build with Chrome Learn how Chrome works, participate in origin trials, and build with Chrome everywhere.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Intro Scroll to Text Fragment のユースケースとして、本サイトにサイト内検索を実装した。 Scroll to Text Fragment Scroll to Text Fragment(以下 S2TF) は Chrome 80 で Ship され、 Finch で展開されている。 まだ降りてきてない場合は、 Flag による有効化が必要だ。 詳細は以前このブログでも書いている。 Scroll To Text Fragment と :~:text | blog.jxck.io この機能の使い道の一つとして、検索結果の Deep Link への適用があると考え、 PoC として実装した。 検索結果への適用 このサイトを CSP というキーワードで検索した場合を考える。 検索対象は、記事の本文とすると、例えば以下の一文がヒットする。 Feature Policy のモ
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! It’s kind of amazing how far HTML and CSS will take you when building a carousel/slideshow. Setting some boxes in a horizontal row with CSS Flexbox is easy.Showing only one box at a time with overflow and making it swipable with overscroll-behavior is easy.You can make the “slides” line up n
ページ内でスムーススクロールをする際は今まではJavaScriptを使って実装をすることが多かったですが、最新のモダンブラウザではCSSだけで簡単に実装することができます。 それに加えて、アンカーリンクでスクロールする際に固定ヘッダーがあったりするとスクロールを止める位置の調整がめんどうだったりしますが、それも最新のモダンブラウザでは簡単にCSSで操作することができます。 今回はCSSだけでスムーススクロールを実装する方法と、アンカーリンクのスクロール位置を調整する方法を備忘録メモとして紹介してみます。 CSSのみでスムーススクロールを実装するには「scroll-behavior」プロパティの「smooth」を使用します。 ページ全体にスムーススクロールを実装する場合はhtmlタグに対して「scroll-behavior」プロパティを指定します。 html { scroll-behavio
What’s new with scroll-driven animations? Scroll-driven animations are a way to add interactivity and visual interest to your website or web application, triggered by the user's scroll position. This can be a great way to keep users engaged and make your website more visually appealing. In the past, the only way to create scroll-driven animations was to respond to the scroll event on the main thre
Scroll-driven animations are a common UX pattern on the web. A scroll-driven animation is linked to the scroll position of a scroll container. This means that as you scroll up or down, the linked animation scrubs forward or backward in direct response. Examples of this are effects such as parallax background images or reading indicators which move as you scroll. A reading indicator atop a document
We’ve heard all the reasons to not use smooth scroll. It feels hacky. It’s inaccessible. It’s not performant. It’s over-engineered. And historically, those were all true. But we like to imagine things as they could be, then build them. So, why should you use smooth scroll? Create more immersive interfacesUnlock the creative potential and impact of your web experiences. Smoothing the scroll pulls u
React 向けにスムーズなスクロールを簡単に実装することができる react-scroll の導入を紹介します。 実装時間の目安は約 5 分と超お手軽です。
画面ローディング時にhtmlの一番下までスクロールしたい こんちには、ハトです。業務で自動スクロールが必要になったので、いくつか方法を考えました。 react-scrollでuseEffect(useLayoutEffect)ないでscrollToBottom()する react-windowというリストライブラリを使ってuseEffect時に一番下のアイテムまでscrollToItem()する リストの最後にdivタグをおき、refを取得。useLayoutEffect内で、ref.current.scrollIntoView()をする useRefに関してはこちらの記事もご参考ください。 結論。refでscrollIntoViewをするのがよい ミニマム const List = () => { const scrollBottomRef = useRef<HTMLDivElement
はじめに LINEやSlackのような 上方向への無限スクロール が必要なWebアプリを作っていて、なぜか iOSのSafariだけうまく動作しない 問題に悩まされたので、原因とどう解決したかメモしておきます。 Vue.jsを使っていますがVue.js以外でも使えるテクニックです。 同じ事象で悩んでいる方の参考になれば幸いです。 上方向の無限スクロールでやっていること そもそも無限スクロールとは コンテンツの端の方までスクロールしたら次のページを読み込みコンテンツに追加する という処理を繰り返すことで実現します。 下方向への無限スクロールの場合はこれだけです。 これが、上方向の無限スクロールの場合、次のページを追加する位置がコンテンツの先頭になるため、追加する前のスクロール位置に戻す必要があります。 イメージで説明すると・・・ １ページ目を上端までスクロールする。 上端近くなったら次のペー
Appleは第6世代となる「iPad mini」をリリースしていますが、このiPad miniのディスプレイで画面スクロール時に表記が崩れる「ゼリースクロール」が発生していると報じられています。Appleによると、このゼリースクロールは「正常な動作である」とのことです。 iPad Mini 6 Users Complain of 'Jelly Scrolling' Issue in Portrait Orientation - MacRumors https://www.macrumors.com/2021/09/27/ipad-mini-6-jelly-scroll-issue-vertical/ Newest iPad mini has a subtle scrolling problem [Updated] | Ars Technica https://arstechnica.com
If we show a modal on iOS we need to prevent events inside the modal from interacting with the page behind the modal. On a previous episode of “Fun with Safari” we could use preventDefault() on the "touchmove" event but on iOS 15 that no longer works. Here we go. To make this work we need iOS to think that there is nothing to scroll. But how do we do this? We set the height of both the html and th
Summary: Whether scroll fading is more distracting than usable depends on the following factors: its persistence, responsiveness, and how sparingly it is applied to elements on the page. When used right, this design pattern can improve brand perception, optimize page loading, and make content more digestible. Introduction Scroll fade is a new design pattern. It refers to an animation that is trigg
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
