【jQuery】スクロールに合わせて背景画像の位置を動かす方法【パララックス】
こんにちは、Ryohei（@ityryohei）です！ 本記事では、スクロールに合わせて背景画像の位置を動かす方法をご紹介しています。 プラグイン等は使用したくないけれど、スクロール時にシンプルなパララックス効果を付けたい方におすすめです！ では、解説していきます。 スクロールに合わせて背景画像を縦方向に動かす 下記はスクロールに合わせて背景画像を動かした際のデモになります。埋め込みなのでわかりにくいかもしれないですが、スクロールすると背景画像が少しずつ動きます。 DEMO See the Pen Backgoround Image Scroll1-1 | jQuery by ryohei (@intotheprogram) on CodePen. 処理内容としては、スクロールした際に背景画像の表示位置を設定するbackground-positionの値を動的に変更することで 実現していま
【jQuery】スクロールして可視範囲に入ったら要素を表示するアニメーション
動きがないサイトだと退屈に思われてしまうことがあります。 今回は、スクロールをして可視範囲になったら要素がふわっと表示されるアニメーションを簡単にjQueryで実装する方法をお伝えしますので、是非サイト作りに役立てて下さい。 DEMOはこちら 実装方法 以下のHTMLとCSSを用意します。 HTML <div> <img src="sample.jpg" class="fadein"> </div> CSS .fadein { opacity : 0; transform : translate(0, 100px); transition : all 1s; } .fadein.active{ opacity : 1; transform : translate(0, 0); } jQuery $(function(){ $(window).scroll(function (){ $('.
次のページの記事を無限に読み込む「Infinite Scroll」の実装方法【WordPress】 | ナオユネット
記事情報だけが欲しいのに、サイドバーやヘッダー・フッターなどのデータも毎回読み込むから表示も遅い。 そこで本稿で紹介したいのは「Infinite Scroll」です。 これを実装すれば、ページ遷移せずに過去の記事を読み込むことが出来るので、過去の記事をサクサクっと呼び出せるようになります。 コードも短く、JavaScriptが苦手な人でもカンタンに実装できるので初心者にもオススメです。 デモページはこちら Infinite Scrollのデモページ アーカイブページのHTML要素を確認 archive.php、category.php、taxonomy.phpなど、記事の一覧を表示するテンプレートファイルを編集します。 必要に応じて、実装したいページに同じ変更を加えてください。 念の為、ファイルをコピーして「category_backup.php」など名前を変えてバックアップしてくださいね
jQueryでページ読み込み中にローディング画面を表示する方法｜Gimmick log
TOPjQuery jQueryでページ読み込み中にローディング画面を表示する方法 jQueryでページ読み込み中にローディング画面を表示する方法 公開日：2015.11.20 更新日：2020.05.19 jQuery, ローディング jQueryでローディング画面を実装しました。 全てのページの内容が読み込まれたらローディング画面が非表示になる仕様です。 2GRAVITY様の方法を参考にさせていただいています。 jQueryを使わずにjavaScriptで実装するプラグインはこちら デモページ 実装方法 html ロード画面とロード後に表示させたい要素を個別に括っておきます。 <div id="loader-bg"> <div id="loader"> <img src="img-loading.gif" width="80" height="80" alt="Now Loading.
WordPressでページ内目次を見出しタグから自動生成（プラグインなし）
2013/07/03 タグ: ユーザビリティ, 中級 Wikiをはじめ、記事の先頭にリストの目次（インデックス）をつけているサイトを目にしたことがあると思います。 記事の内容がざっと理解でき、さらにクリックすることでスクロール移動できます。 訪問者にはとても優しい構成ですね。 ただし、このリストの目次は手作業で行うとかなり面倒です。 ユーザービリティの向上につながるとはいえ、投稿時に手間が掛かってはいただけません。 このサイトでも実装していますが、WordPressの場合は「Table of Contents Plus」などのプラグインで機能追加することができます。 今回はjQueryを使って、自前で実装してみたいと思います。 jQueryの確認 前提としてjQueryがロードされている必要があります。ソースのヘッダ内で下記のようにjQuery.jsが出力されているか確認してください。 <
[jQuery] プラグインを使わずに横からスライドインするメニューを簡単に作る
Modified 2015-10-17 更新情報 メニュースライドイン時スクロールできるサンプルを追記しました。コメント欄での返答で誤りがあった箇所を削除しました。 コンテンツ 部分をクリックしても閉じることができるようにするコードを追記しました。 スマートフォンやレスポンシブサイトなどでよく見かける、メニューボタンをクリックするとコンテンツを押し出してメニューがスライドインしてくる動きを jQuery と CSS で作る方法です。やってみると意外と簡単なコードで作ることができます。 サンプルデモとダウンロード ◆ 横からスライドインするメニュー demo｜memocarilog このサンプルコードは以下よりダウンロードできます。 ◆ SaoriMiyazaki/SlideIn_Menu HTMLコード スライドインしてくるメニューとメニューボタンの記述をします。 <!-- スライドメニュ
![[jQuery] プラグインを使わずに横からスライドインするメニューを簡単に作る](https://cdn-ak-scissors.b.st-hatena.com/image/square/90e0d5fd2040a360e7449fe29a2efc39e3dd577c/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2014%2F11%2FjQueryicon.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://g-lance.net/other/smooth_scroll2020/