無限スクロール：利用すべきとき、避けるべきとき
無限スクロールは、インタラクションコストを最小限に抑え、ユーザーエンゲージメントを高めるが、すべてのWebサイトに適しているわけではない。ページネーションや「さらに読み込む」ボタンのほうが良い解決策になることもある。 Infinite Scrolling: When to Use It, When to Avoid It by Tim Neusesser on September 4, 2022 日本語版2023年1月24日公開 無限スクロールは、商品一覧ページに使われるデザイン手法の1つで、ユーザーがスクロールダウンしていくと、コンテンツが次々に読み込まれるというものだ。これを利用すれば、ページネーション（訳注：コンテンツを複数のページに分割すること）の必要がなくなる。 Adidas.com：Adidasの商品一覧ページでは、ページネーションを使って商品を表示している。 Nike.com
2022年のモダンCSS ～TechFeed Conference 2022講演より | gihyo.jp
本記事は、2022年5月に開催されたTechFeed Conference 2022のセッション書き起こし記事「2022年のモダンCSS（鹿野 壮） — TechFeed Conference 2022講演より」を転載したものです。オリジナルはTechFeedをご覧ください。 では始めていきます。 めちゃくちゃ可愛い猫を飼っています。tonkotsuboy_comというTwitterIDです。マネーフォワードにおります鹿野壮と申します。 こういった本を執筆しました。 「JavaScriptコードレシピ集」/ 技術評論社 「JavaScript最新仕様 -ES2020-」/ 日経ソフトウェア2020年9月号 「最新CSS」/ 日経ソフトウェア2021年9月号 今日は2022年5月現在における全モダンブラウザ対応の最新CSSをいくつかピックアップして紹介します。 固定ヘッダーとアンカーリン
意図していない横スクロールの原因を一瞬で特定する方法
投稿日：2021年11月25日 更新日：2021年12月6日 CSS, JavaScript 1671文字：約3分 ONZE 株式会社 オンズ ONZE https://on-ze.com/archives/9030 ウェブサイト制作時。初心者のかたにありがちですが、「知らないうちに横スクロールバーが発生したけど消し方がわからない！」という問題があります。 そんな意図しない横スクロールが発生しているとき、問題となっている要素を一瞬で特定するテクニックを紹介します。 「CSSを使う方法」と「JavaScriptを使う方法」の2種類があります。 「JavaScriptを使う方法」は具体的にはブラウザのデベロッパーツールのConsoleを使う方法になります。 問題の原因と解決方法は？そもそもブラウザで意図していない横スクロールが発生するのは、CSSで横幅の計算を間違えて表示領域を超えてしまうこと
MacOS X Lion風のスクロールをブロック要素に付けられる「Antiscroll」:phpspot開発日誌
Antiscroll - os x lion style cross-browser native scrolling on the web that gets out of the way MacOS X Lion風のスクロールをブロック要素に付けられる「Antiscroll」 カーソルを合わせるとクールなスクロールバーがフェードインで現れ、マウスホイールやトラックパッドで動くスクロールを実装可能なjQueryプラグインです。 最初からブロックにスクロールバーが現れているのはなかなかかっこ悪く、更にそのスクロールバーがプラットフォームによって大きく表示が違う場合はデザイナーの方には許せない画面だと思いますが、このプラグインでそこら辺をサクっとスッキリ解決できそう。 でも最新のブラウザにしか対応していないんでしょ？と思う方もいるかもしれませんが、IE7、Firefox3等のレガシーなブラウ
iOSライクな惰性スクロールをデスクトップでも·Overscroll MOONGIFT
OverscrollはデスクトップのWebブラウザでiOSに似たスクロールを可能にするライブラリです。 iOSが直感的なデバイスである特徴の一つに惰性のスクロールがあります。指で弾くとその流れでスクロールが続く機能です。あの直感的スクロールをjQueryで再現したのがOverscrollです。 デモはiPhone風のデバイスになります。 クリックして滑らせると惰性でスクロールしていきます。 デモ動画です。スペックが高くないのでうまく再現できていませんので自分で試す事をお勧めします。 画面をドラッグしてスクロールさせるUIとして思いつくのはGoogleマップでしょう。他にも広い範囲のデータをさまよいながら見ていくようなUIとして使ってみると面白いかも知れません。より直感的で面白い効果が臨めそうです。すべりの具合を設定で変更したり、スクロール時のアクションをキャッチすることもできます。 Ove
JavaScript/CSSを使ってスクロールによるアニメーションを実現·skrollr MOONGIFT
skrollrはCSSを使ってスクロールによってアニメーションを実行するライブラリです。 最近プロジェクトやアプリ紹介ページで見られるようになったスクロールアニメーション。それを実現するライブラリがskrollrです。 デモです。スクロールを開始します！ 回転しながら飛んでくる文字！ 下から上がってくる文字！ 横からスライドも。 色が変わりました。それに合わせてテキスト色も変わっています。 上下からボックスが迫ってきます。 終了です。逆に上に上がっていくとアニメーションが逆に展開されていきます。 デモ動画です。スクロールすると次々と内容が変わっていきます。 実用性という意味ではあまり大きくなさそうですが、インパクトは強烈です。サイト全体を作るというよりも、ランディングページや紹介ページで使うと効果的でしょう。 skrollrはJavaScript/CSS製のオープンソース・ソフトウェア（M
bookreader.js
bookreader.jsは、長文を縦スクロールではなく、横スクロールで表示し読みやすくするJavaScriptライブラリです。 →プロジェクトのホーム (Google Code) - New!! →ダウンロード(ver 0.4.6) - 2009/04/18公開 ※ダウンロードの詳細については、こちらのページをご覧下さい。 まずは、このページで体験してみて下さい。キーボードの[→]/[←]キーが、「進む」あるいは「戻る」に対応します。画面上に表示される、半透明の▶/◀ボタンをクリックしてもOKです。使い方の詳細は「ヘルプ」を参照ください。 次期バージョンの開発状況 幸いにしてさまざまな方からフィードバックをいただきました。ありがとうございます。それを元に機能の絞り込みとWEBサイトへの「組込み方」について検討を行っています。まだ、実装の方針が定まった、という段階ですが次期0.8.x系のサ
たった6行でWebサイトのUIをガラッと変える
「こんな長いWebページ、まったく読む気がしない」。Webサイトを閲覧していてこんな経験をしたことは誰しもあるのではないだろうか。一方で、Webサイトを作る側にとっては、どこまでを1ページにまとめるかは常に悩むところだと思う。長いからといってむやみにページが分割されているのも考えもので、今度は「次のページへ」ボタンをクリックするのが面倒になり、ストレスがたまる。 CogniTom Academic Designが作った「bookreader.js」は、そんな悩みを解決してくれるかもしれない。bookreaderは、本や雑誌をめくるような感覚で、Webページの本文を横にスクロールさせるJavaScriptライブラリだ。 「bookreader.js」のWebサイト。サイト自体がbookreader.jsを使ったデモサイトを兼ねている。中央にある [<] [>] をクリックすると1ページずつ、
スクロールによってリストの表示をダイナミックに変化させる·stroll.js MOONGIFT
stroll.jsはCSS3を使ったスクロール時に多彩なイフェクトを実現するJavaScriptライブラリです。 WebページはJavaScriptによってどんどんダイナミックに変化させられるようになっています。そこにさらにCSS3を組み合わせることでスクロール時のイフェクトをこんなにダイナミックにできます。それを実現するのがstroll.jsです。 例です。スクロールさせるとリスト部の描画が滑らかに変化します。 3Dを使っている場合は特に奇麗です。 様々な変化があります。 スクロールは上から下、下から上の両方に対応しています。 ソースです。ul.classでアニメーション方式を指定しています。後は単純なリストです。 デモ動画です。全部で13種類のアニメーションがあります。 stroll.jsではリストのスクロールに伴うイフェクトを容易に実現できます。スクロールの速度によってイフェクトの幅
タブレット、スマートフォンでの写真閲覧に使える無限スクロールビュー·Inflickity MOONGIFT
Inflickityは写真群の左右をつなげて無限に左右へスクロールできるようにするJavaScriptライブラリです。 写真は見せ方次第でインパクトが大きく変わりますが、10程度の写真をスムーズに見せる際に使えそうなのがInflickityです。 二つの帯が表示されています。 マウスでドラッグして左右に動かせます。 二つの帯は独立して動きます。 スマートフォンやタブレットの方が動きがスムーズです。 デモ動画です。動かした後に惰性が残ります。 Inflickityはリストでまとめた画像を横並べにして、その上で左右をつないでロールできるようにします。繋がっているので限界なく回転できます。お勧め写真を並べたりするのに使えそうです。何より猫が良いです。 InflickityはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIF
Discover Bagigia - The Bag
designer Designer faithful to the substance but lover of the aesthetic. Volitional admirer of Italian manufacturing workers. Insatiable observer, I see in everyday objects the ability to live in relationship with man through new uses, beyond the confines of the customary. Ambition for excellence in the creative process translates into a thirst for tactile and aesthetic perfectionism, in ideas that
スクロールで発動するダイナミックなアニメーション·scrollorama MOONGIFT
scrolloramaはスクロールで制御される文字列をアニメーション化するJavaScriptライブラリです。 Webページでインパクトある表現を求めている方にお勧めしたいのがscrolloramaです。 最初の表示です。ここから下にスクロールしていきます。 まず上にあった文字がばらけていきます。 下にある文字が回転しながら収まっていきます。 ダイナミックに展開していきます。 文字が下から迫ってきます。 大きな文字が下からスライドしてきます。 格好よく重なっていきます。 scrolloramaというメソッドでアニメーションを指定します。 実際の設定です。アニメーションも関数で指定できます。 デモ動画です。ダイナミックな動きをご覧ください。 scrolloramaはスクロールに合わせてアニメーションするので、勝手にはじまってスクロールした頃には終わっていたなんてことはなさそうです。 scro
旧・Macの手書き説明書 - FC2 BLOG パスワード認証
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ https://mac-tegaki.comへ移転中 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
10.7: Reverse Reversed Scrolling direction - Mac OS X Hints
10.7: Reverse Reversed Scrolling direction Jul 21, '11 07:30:00AM • Contributed by: rab777hp In Mac OS X Lion, Apple for some reason assumed we all want to scroll backwards. Here's how to undo that annoying behavior. Simply open System Preferences, go to Trackpad, and uncheck the box at the top saying 'When using gestures to scroll or navigate, move content in the direction of finger movement.' [c
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FoldScroll
ずんずんスクロールしたくなる、イラストを巧く使ったウェブデザイン『Anne Braithwaite』
Blog - Diamond Casino Online
Scroll Horizontally with a Mouse Wheel by Holding Shift in Mac OS X
Azoffdesign - Situs Berita Terpercaya -