はじめに サイトに固定ヘッダーやフッター、フローティングバナー等を設置していると、 メインコンテンツの見える範囲が狭まってしまいます（ノートPCやスマホは特に）。 その対策として、 固定要素をスクロール中は非表示に、止まったら表示されるようにします。 記述例 まずjQueryを読み込みます。
フローティングバナーをスクロール中に非表示にする
はじめに サイトに固定ヘッダーやフッター、フローティングバナー等を設置していると、 メインコンテンツの見える範囲が狭まってしまいます（ノートPCやスマホは特に）。 その対策として、 固定要素をスクロール中は非表示に、止まったら表示されるようにします。 記述例 まずjQueryを読み込みます。
スクロールしても背景を固定して表示するテクニック【background-attachmen】
背景固定のサンプル まずは、背景を固定するという意味ですが、これは言葉では説明しづらいですね。 サンプルページを用意しましたのでまずはこちらをご覧ください。 https://sample.web-create-kokusyo.com/sample01/ サンプルを見ると、背景画像はスクロールしても動いていません。 隙間から除く画像がオシャレですよね。 こういうのをパララックス（視差効果）って言ったりもします。 Webサイトにおける表現方法で、スクロールに応じて要素を動かしたり、遠近感を与えるようなデザインのことで、今回の背景固定もその一つになります。 背景を固定するプロパティ 肝心の背景を固定する方法ですが、指定はすごく簡単で固定したい背景画像に「background-attachment: fixed」を指定しましょう。 下のコードはサンプルページのコードです。 <section></s
【CSS入門】テキストを改行させない方法：nowrapの活用 | 新潟のホームページ制作｜Web制作会社 グローワークス
このクラスをHTML要素に適用すると、その要素内のテキストは折り返されず、一行で表示され続けます。これは、ナビゲーションメニューやボタンのラベルなど、特定のUIコンポーネントで一貫性を保つのに有効です。 例: ナビゲーションメニューでの使用 ナビゲーションメニューでメニューアイテムのテキストが折り返し無しで表示されるようにするには、以下のようにCSSを設定します。 <ul class="navigation"> <li><a href="#" class="no-wrap">Home</a></li> <li><a href="#" class="no-wrap">About Us</a></li> <li><a href="#" class="no-wrap">Services</a></li> <li><a href="#" class="no-wrap">Contact</a></l
【JavaScript・CSS】スクロールしたらフワッと要素を表示させるスクリプトの使い勝手を良くしてみる – ノーズブログ
HTML・CSS 基本のHTMLとCSSを用意 まず適当なHTMLとCSSを用意します。 <body> <header> <h1>ヘッダー</h1> </header> <section> <div>要素1</div> <div>要素2</div> <div>要素3</div> <div>要素4</div> <div>要素5</div> <div>要素6</div> <div>要素7</div> <div>要素8</div> </section> <section> <div>要素9</div> <div>要素10</div> <div>要素11</div> <div>要素12</div> <div>要素13</div> <div>要素14</div> <div>要素15</div> <div>要素16</div> </section> </body> body { margin: 0;
tableタグで横スクロールと自動改行を両立させる方法（ScrollHint付き） - ねかつちう。
この記事では「tableタグで横スクロールと自動改行を両立させる方法」について、コード例と解説を備忘目的を兼ねて共有したいと思います。 ここが問題でした 一般的に、tableを横スクロールするためには、「white-space: nowrap」により改行を禁止する必要があります。しかし、この方法では、備考欄など長い文章がtable内に含まれる場合、右方向に延々と続く表になってしまいます。 そういうわけで、わたしも長らく、「横スクロールと自動改行は両立できない」と思い込んできたのですが、コードと数時間格闘した結果、なんとか実用的な解決策が見つかりましたので、備忘を兼ねて共有したいと思います。 ちなみに、「きれいな」CSSコードの書き方を習得したい方には、定評のある「教科書」シリーズをお勧めします。数ある技術書の中で評価の高い一冊です。 Web制作者のためのCSS設計の教科書 モダンWeb開発
【超簡単】JavaScriptライブラリaos.jsの使い方を解説！ | 模写修行メディア
現在、多くのwebサイトがアニメーションを取り入れています。 特に、スクロール連動型アニメーションを取り入れているサイトは誰でも1度はみたことがあるのではないでしょうか？ 今回は、効率よくサクッとスクロールアニメーションが実装できるJavaScriptのライブラリ、AOS(aos.js)を紹介します。 JavaScriptの基礎学習がまだの方は、下記の記事も参考にしてみてください。 JavaScriptの勉強ができるおすすめの本やサイト紹介！ 👇 メンターやってます 👇 模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。
position: stickyの面白い使い方と使用時の注意点
スクロールに応じてページ要素を固定表示できるposition: stickyが便利で面白い使い方ができそうなので実験してみました。仕様がまだ草案（Working Draft）の段階 で、将来、細かい部分に変更がないとは言い切れませんが、Edgeを含めた最新のブラウザで、ほぼサポート されています。 position: stickyの仕様 ブラウザ・サポート状況（Can I use…） フィーチャー・クエリ（@supports） と一緒に使えば、position: stickyに対応していないブラウザにも考慮した実装が可能なので、注意は必要ですがちょっとしたエンハンスメントとして使うのに良さそうです。 まずは「こんなのが簡単にできちゃいますよ」というデモからご紹介します。 面白い使い方 基本的な使い方だけでも便利なスティッキーですが、応用するとスクロール効果のような面白い使い方ができます。以
たった一行で重いスクロールが軽快に！will-change属性を付けるとFPSが上がる理由 - Qiita
HTMLやCSSのパフォーマンスチューニングを皆さん普段意識されているでしょうか？ フロントエンドはJavaScriptの進化と共にアプリケーションが年々複雑化してきたこともあり、パフォーマンスチューニングのトピックを目にする機会が増えました。 しかしHTMLやCSSも同様にレンダリングの仕組みを少し知り、それに応じた実装することでパフォーマンスを大きく上げることも可能です。 今回は最もシンプルかつ分かりやすい事例として、will-changeプロパティについて紹介したいと思います。 サンプルを使ってFPSを実際に測定してみる 今回はサンプルとして、TwitterのツイートにあたるHTML構造と同じものを4000個縦に並べ、高さ400pxでスクロールできる領域を用意し、スクロール時のFPS(Frame Per Second)を測定してみました。 // この実装は実質たった3行！ const
CSSで実装する次のコンテンツへと促すスクロールダウンのラインアニメーション | NxWorld
ファーストビューで大きめのイメージやムービーなどを配置しているサイトでよく見る、次セクションへスクロールするよう促すラインアニメーションをCSSで表現したサンプルです。 以前にもスクロールを促す要素として矢印・サークル・マウスなどをCSSで表現する実装コードを紹介しましたが、最近はこのタイプの実装要望が多いので自分用に一覧化したものをシェアします。 これといってユニークな動きでもなく基本的には同じような動きになりますが、汎用的に使えそうなもの7タイプです。 見栄えも動きもすべてCSSで表現しているため、カラー・サイズ・スピードなど自分好みにいろいろと変更するのも容易だと思います。 共通のHTML・CSS 以下で紹介している内容は、すべて下記のようなHTMLを使用しています。 CSSはa要素とその擬似要素への共通スタイルとして下記を記述しています。 a要素にいろいろとスタイル指定はしてありま
Fixed固定ナビゲーションを設置するときに気をつけたい4つのこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ライター内藤です。花粉、そして1pxと闘っているWebコーダーでもあります。 最近、立て続けに「上部固定グローバルナビゲーション」を使ったWebサイト構築に2件ほど携わりました。1件はWordPress、もう1件は手打ちの静的サイトです。改めて思ったのは「固定ナビゲーションには落とし穴がある」ということでした。 そこで、固定ナビゲーション設置に際して、私が個人的に体験した「落とし穴」と、その解決のためにやってみたことを4つほどご紹介したいと思います。 必ずしもこれが正解というわけではありませんが、同じようなことがあったときのお役に立てば幸いです。 …と、その前に。そもそも固定ナビゲーションとは何モノか、下図をご覧ください。 例としてFacebookを挙げてみました。上部に固定された青いバーの部分は、スクロールしても常に上部に固定されて消えません。 このようなナビゲーションは、一般的に下記の
【全ブラウザ対応】perfect-scrollbar.jsでスクロールバーの色をCSSで自由に変更する。 | web(K)campus|WEBデザイナーのための技術系メモサイト
【全ブラウザ対応】perfect-scrollbar.jsでスクロールバーの色をCSSで自由に変更する。 WEBデザイナーのつくるデザインって基本的にブラウザからキャプチャ取ってきたスクロールバーが使われるんですけど、グラフィックデザイナーよりの人がつくるWEBデザインってスクロールバーもご丁寧にサイトカラーに合わせた色合いになってる事があるんですよね。 けっこう昔に、スクロールバーをCSSで装飾するエントリーを書いた事がありましたけど、あれはChromeのみだったんですね。 今回はJavascriptを使って、メジャーどころなブラウザはほとんど同一の装飾を施せる「perfect-scrollbar.js」ってJavascriptのプラグインを使ったので備忘録。 perfect-scrollbar.jsの使い方 まずは、必要なファイルをダウンロード。 GitHubに用意されています。 必要
画像を左から右にスクロール量に応じてスライドインで表示するアニメーション【Javascript・CSS】
index.css.Item { margin-top: 20px;/*なくてもOK*/ width: 40%;/*お好みで*/ } @media screen and (max-width: 768px){ .Item { width: 40%; } } .Item-Box { overflow: hidden; } .Item-Box-ImgBox { overflow: hidden; position: relative; width: 100%; -webkit-transform: translate3d(-100.5%,0,0); transform: translate3d(-100.5%,0,0); -webkit-transform-origin: left; transform-origin: left; -webkit-transition-duration: 1s
スクロールするとアニメーションしながら要素が表示するスクリプト「ScrollReveal」のDEMO
var ScrollrevealFade = { origin: 'left', distance: '0px',//移動範囲 scale: 1,//拡大表示（１で横スクロールが始まる） rotate: { x: 0, y: 0, z: 0 }, //xは縦回転、yは横回転、zは傾き（風車みたいな感じ） duration: 1200, //アニメーションの速度 delay :200 //要素が表示するまでの待機時間（ディレイ） }; sr.reveal('.scrollreveal-fade', ScrollrevealFade, 100); 上記のような形でオプションは記述していきます。scaleを0.8にすれば表示の際に拡大するように表示されたり、1.2にすれば縮小しながら表示されたりします。 rotateの数値をいじると、縦回転・横回転・傾きをしながら表示されるようになります。また、
ScrollReveal.jsを使ってスクロールしたらふわっと表示される動きを作ってみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
JavaScript library to animate elements as they scroll into view. スクロールして表示される要素をアニメーション化するJavaScriptライブラリ 要素が画面に表示されたら、指定したアニメーションを実行してくれる優れものです。 「ふわっと表示」「下から表示」「遅れて表示」など簡単に実装することができます。 公式サイト：https://scrollrevealjs.org/ ScrollRevealの使い方 ライブラリ読み込み 使い方は簡単。ライブラリをscriptタグで読み込み、対象の要素にクラスを与えてJavaScriptからアニメーションを指定するだけです。 CDNは公式サイトのインストールから読み込みます。 // 最新バージョンの場合 <script src="https://unpkg.com/scrollreveal
position:fixedでヘッダ固定時のページ内リンクのずれを解消したい ｜ Tips Note by TAM
position:fixedを使ってヘッダを固定した場合 ページ内リンクの位置がヘッダの高さ分ずれてしまいます。 ヘッダを固定する案件が増えてきましたので覚書です。 CSSで調整する方法と、JavaScriptで調整する方法があります。 ヘッダの高さ：100px ■HTML <div id="header"> ヘッダーがはいります </div> <div id="content"> <a href="#link01">なんとか</a> <div name="link01" id="link01">かんとか</div> </div> CSSで調整する padding-topでヘッダの高さ分ずらして、margin-topでマイナスの値をいれるとうまくいきます。 margin-top:-100px; padding-top:100px; ■CSS #header { width: 100%; m
実装がどんどん簡単になっている！スクロールに連動するCSSアニメーションを与えるスクリプト -Delighters
コンテンツが横からスライドしたり、カードが追従するように表示されたり、スクロールに連動するCSSアニメーションを簡単に実装できるスクリプトを紹介します。 汎用性に非常に優れており、デスクトップ・タブレット・スマホを完全にサポートしています。また、他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。 Delighters Delighters -GitHub Delightersの特徴 Delightersのデモ Delightersの使い方 Delightersの特徴 DelightersはCSSアニメーションを加えて、ユーザーがスクロールするのを楽しませるスクリプトです。 超軽量 1.43kBの超軽量スクリプトで、他のスクリプトやスタイルシートに依存はありません。 フレームワークにとらわれない React、V
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSで実装する次のコンテンツへと促すスクロールダウンボタン 10 - NxWorld
not-working-scroll.htm
スクロールするとテキストがカッコ良くアニメーション！：その１ – ma2.work