意図していない横スクロールの原因を一瞬で特定する方法
投稿日：2021年11月25日 更新日：2021年12月6日 CSS, JavaScript 1671文字：約3分 ONZE 株式会社 オンズ ONZE https://on-ze.com/archives/9030 ウェブサイト制作時。初心者のかたにありがちですが、「知らないうちに横スクロールバーが発生したけど消し方がわからない！」という問題があります。 そんな意図しない横スクロールが発生しているとき、問題となっている要素を一瞬で特定するテクニックを紹介します。 「CSSを使う方法」と「JavaScriptを使う方法」の2種類があります。 「JavaScriptを使う方法」は具体的にはブラウザのデベロッパーツールのConsoleを使う方法になります。 問題の原因と解決方法は？そもそもブラウザで意図していない横スクロールが発生するのは、CSSで横幅の計算を間違えて表示領域を超えてしまうこと
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
スクロールで発動するダイナミックなアニメーション·scrollorama MOONGIFT
scrolloramaはスクロールで制御される文字列をアニメーション化するJavaScriptライブラリです。 Webページでインパクトある表現を求めている方にお勧めしたいのがscrolloramaです。 最初の表示です。ここから下にスクロールしていきます。 まず上にあった文字がばらけていきます。 下にある文字が回転しながら収まっていきます。 ダイナミックに展開していきます。 文字が下から迫ってきます。 大きな文字が下からスライドしてきます。 格好よく重なっていきます。 scrolloramaというメソッドでアニメーションを指定します。 実際の設定です。アニメーションも関数で指定できます。 デモ動画です。ダイナミックな動きをご覧ください。 scrolloramaはスクロールに合わせてアニメーションするので、勝手にはじまってスクロールした頃には終わっていたなんてことはなさそうです。 scro
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Blog - Diamond Casino Online
Azoffdesign - Situs Berita Terpercaya -