WordPressで作られたWebサイトを無限スクロール出来るようにする
WordPressで作ったWebサイトを、 スクロールすると、次ページが 自動でロードされる無限スクロー ルが出来るようにする、という 方法です。今更感満載ですけど。 よく見かける、「スクロールするだけで次ページが次々とロードされる」みたいなサイトをWordPressで作ろう、みたいな話。既出な話題なので基本的な導入方法だけ書きます。 無限スクロール(Infinite Scroll)出来るようにするWordPressを無限スクロール出来る様にします。 以下、手順。サンプルコードはTwenty Elevenで動作テストしています。 スクリプトを用意する無限スクロールさせるスクリプトを用意します。いろいろあるのでお好みで構いません。今日はWordPressのプラグインにもなっているInfinite Scrollを使います。じゃあプラグイン使えよ、って話ですが。 Infinite Scrollは
Instagramの画像を取得して表示できるjQueryプラグインInstafeed.js | 福岡のホームページ制作会社 | シンス株式会社
こんにちは、福岡のホームページ制作シンス株式会社の越水です。 ホームページ制作をしていると「Instagramの特定のハッシュタグで投稿されている画像を一覧表示したい」という場面があります。 今回はInstagramからリリースされているAPIとjQueryプラグインを使って、ホームページ上にInstagramの画像フィードを表示させる方法を紹介します。 好みのハッシュタグの画像を並べるのに便利なInstafeed.jsInstagramに投稿されている画像フィードを取得するために今回はInstafeed.jsというjQueryプラグインを利用します。 まずはInstagram APIの取得準備をする。そのための下準備として、InstagramのAPIを取得するためのアプリケーション登録をします。 アプリケーション登録といってもそれほど難しいことはしません。 まずはInstagram De
jQueryで作るスクロールしたら出現してスクロールに追随し、フッターの位置で止まるスムーススクロール
言葉で説明すると難しいのですが、よくあるスクロールすると「ページトップへ」のボタンが出現して、そのままスクロールに合わせてついてくるものを、そのままページ下までついてこさせずにフッターの位置で止める方法です。IEはバージョン7以上で動きました。 「サンプル」を作りましたのでこちらをご覧頂ければわかりやすいかもしれません。 （サンプルデモのコードは一番下にあります。） ページトップボタンのHTML ページトップボタンのHTMLは以下のようにします。 <p class="gotop"> <a href="#"> <img src="images/gotop.png" alt="ページトップへ戻る"> </a> </p> CSS ページを包んでいる一番親の要素へrelativeを設定します。 #container{ position:
WEBサイトに雪を降らせることができるjQueryプラグイン「JQuery-Snowfall」｜アド･エータイプ スタッフブログ
WEBサイトのページに雪を降らすような効果を出せるjQueryのプラグイン「JQuery-Snowfall」をご紹介します。 このプラグインを使用すると指定した要素に対して、雪を降らせることができます。 画像を使用することができるので、雪以外にも桜など季節ごとに変更したら面白いと思います。 下記に「JQuery-Snowfall」の使い方を記載します。 「JQuery-Snowfall」を使用して雪を降らせる方法 下記のページから「JQuery-Snowfall」をダウンロードします。 JQuery-Snowfall ファイル読込 jQuery、ダウンロードした「JQuery-Snowfall」を読み込みます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jqu
jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる
最近更新ペースが遅くなっています。最近仕事の関係でサイトを作っているのですが、そこで使った方法を紹介します。スクロールしてコンテンツが現れたときにアニメーションが開始します。jQueryを使っています。 言葉ではイメージしにくいかもしれません。百聞は一見にしかず、ということでサンプルをご覧ください。画像が画面内に表示されると右にアニメーションします。 プラグインもありそうですが、安易にプラグインを使うのではなく自分で作った方が勉強になります。また、プラグインによっては色んな機能があるために無駄に容量が大きくなってしまうこともあります。そんな場合は、必要な機能だけ自分で書く方が読み込み速度的にも効果的なのかなと思います。 jQuery全体はこんな感じになります。 $(function(){ $('.effect').css("opacity",".3"); $(window).scroll(
スクロールしたらフェードインしながら表示される「TOPへ戻る」
Result jQuery//初期は非表示 $("#back-top").hide(); $(function () { $(window).scroll(function () { //100pxスクロールしたら if ($(this).scrollTop() > 100) { //フェードインで表示 $('#back-top').fadeIn(); } else { $('#back-top').fadeOut(); } }); //ここからクリックイベント $('#back-top a').click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); });css#back-top { position: fixed; bottom: 30px; margin-left: 15
alert（アラート）のデザインを変更できるjQueryのスクリプト「SweetAlert」｜アド･エータイプ スタッフブログ
WEBサイトでalert（アラート）を出力する場合、通常は下記のような警告メッセージが出力されます。 「SweetAlert」を使用するとオシャレな警告メッセージを出力することができます。 テキストやデザインを自由に変更することができ、オプションで様々なダイアログメッセージを設定することが可能です。 今回はjQueryのスクリプト「SweetAlert」の使用方法をご紹介します。 「SweetAlert」の使用方法 下記のページから「SweetAlert」をダウンロードします。 SweetAlert ファイル読込 jQuery、ダウンロードした「SweetAlert」を読み込みます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></
定期的にまばたきをさせよう！(タイマー) | 第8回デザイナーがイモムシで覚えるjQuery
更新をさぼっていました。ごめんなさい。 次回はCSS3のTransitionsと言っていたのですが、 その前にやっておきたいことがあります。タイマーです。 何秒後、何秒ごとなど、実行時間を指定したり、繰り返したりできます。 イモムシで言うなら、１秒ごとに移動したり、まばたきしたり、 モーターみたいな大切な動力源になってくれます。 setTimeout ●秒後に実行 ●秒後に実行という指定は、setTimeout(動作,ミリ秒)を使います。 今回は一回のまばたきの動作をこれで作ろうと思います。 ボタンを押すと目をつぶって、その0.2秒後に目を開くという動作です。 $(document).ready(function(){ $("#blinkBtn").click(function () {//#blinkBtnをクリックしたら $("#imomushi .eye").text(
素晴らしい！HTML+CSS+jQueryで絵本のようにページをめくっていけるぜひ参考にしたいコード | 9ineBB
絵本をクリックしていくと、ページが次々にめくっていけるようになっています。また、逆方向にもめくることが可能です。さらに画面幅に合わせて大きさも変わるリキッドデザインです。 とにかく、ページのめくれ具合 ページのめくれた後のちょっとした動きがとても良く出来ていてクオリティーが高いです こうった形のギミックをWEBサイトに導入するときにはぜひ参考にしたいコードです – CODE – HTML <div class="book bound"> <div class="pages"> <div class="page"> <h1>Boyhood</h1> <h2>by Jason Hibbs</h2> </div> <div class="page"><!--endpaper--></div> <div class="page"><!--endpaper--></div> <div class="
プラグインを使わずに、かんたん実装できるjQueryマウスオーバーアニメーションのまとめ | ニトなび
ここのところ少しブログをリニューアルしたのですが、過去に導入してほとんど活躍していないjQueryマウスオーバーアニメーションを外しました。しかし、なんかせっかく実装したものを外しただけでは無意味なので、今後再導入するときの為に、スクリプトを書きとめておく事にしました。 マウスオーバーアニメーションの種類 オンマウスで画像を切り替えるアニメーション フェイドさせながらテキスト色を変化させるアニメーション フェイドさせながら背景色を変化させるアニメーション テキスト（画像）を横にピコッとずらすアニメーション 画像をボワ～と大きく変化させるアニメーション 画像を右から左へスライドさせ入れ替えるアニメーション 画像をクルッと縦に回転させるアニメーション ※jQuery導入方法の基本は過去にこちらの記事に書きましたのでご参考下さい。 オンマウスで画像を切り替えるアニメーション DEMO ⇓ 1.
jQueryでhtmlの簡易ローディング画面をつくる | 2GRAVITY
大きな画像を多用していたり、パララックスサイトなどで1ページあたりの容量が大きくなった場合、通信回線にもよりますが全ての画像とソースコードの読み込みが完了するまで結構な時間がかかったりします。 読み込み中の間は画像が順次表示されていって美しくなかったり、不具合が起きたり、訪問者がイライラして離脱に繋がったり…いろいろ不都合があります。 これを解消するために、ページを読み込み中の間はローディング画面を表示し、読み込み完了後にコンテンツを表示する方法をとります。 イメージとしては、読み込み中は上記の画像のようにコンテンツの上に目隠し用のレイヤーを表示し、全ての読み込みが完了したタイミングで目隠しを非表示にするイメージです。 ソースコードは左から右へ、上から下へと読まれていくので、ソースコードを書く位置にも注意しましょう。 ソースコードと画像が「全て読み込まれた」というイベントは、javascr
jQueryでパララックスサイトの様にスクロールして要素が出現した時点でアニメーション等のイベント処理を実行させる実験｜BLACKFLAG
パララックスサイトやAppleのプロダクトページの様な動きを付ける為の スクロールして特定の位置でアニメーション等の処理を実行させることができる jQueryプラグイン等をここでも何度か紹介しましたが プラグインのバージョンによって動作仕様が変わってしまっていたり 上からのスクロールと、下からのスクロールの判断が微妙だったりしたので なんとか簡単にスクロールの上下を判別させて、 なにか処理を実行させるスクリプトができないものか 試しに作ってみたので紹介してみます。 まずはサンプルから。 下記の画面をスクロールするとコンテンツ要素が順々にフェードインします。 「jQueryでパララックスサイトの様にスクロールして要素が出現した時点でアニメーション処理実行させる実験」サンプルを別枠で表示 上記サンプルでは6つコンテンツエリアを縦に配置してあります。 上からスクロール（ダウン）してそれぞれのコン
簡単！パララックスサイトの作り方 - エンジニアをリングする
昨日ポートフォリオサイトをアップしたら、予想外に多くの反響を頂いてびっくりしています。 Twitter / Search - yoshiko-pg.github.io ありがとうございます。素直に嬉しいです。 素直にうれしいので例のサイトの作り方でも書いてみようかと思います。 実は結構簡単な仕組みですｗ スクロール量に応じて簡単に要素を動かせるskrollr スクロールでの動きにはこちらのJSライブラリを使用しました。 skrollr - parallax scrolling for the masses 使い方 操作したい要素にdata-[スクロール量]という属性をつけて、値に変化させたいcssを記述するだけ。 <div class="box" data-0="left: 0%;" data-500="left: 100%;">test</div> <script src"./jquer
SVGアニメを手軽に作れるLazy Line Painter｜こうめの“これから使える”jQueryプラグイン
「Lazy Line Painter」 は、最近流行のSVGを使ったパスアニメーションを手軽に作れるプラグインです。自分で描いた線画をSVG形式で読み込み、手で描いたような動きをつけて表示できます。 あまり複雑な動きはできませんが、「Tatenaga GIF」のiPhoneの線画のように、さりげなく取り入れるにはぴったりのプラグインです。 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、Lazy Line PainterをGitHubからダウンロードします。ページ右下の「Download ZIP」ボタンからダウンロードできます。
スマホ対応！パララックスサイトの作り方 | SONICMOOV LAB
皆様おひさしゅうございます。 ラーメン女子のうさこでございます。 最近は大好きなラーメンも食べるのを控えています。 えらいことになってるんですよ・・・ 親に骨皮筋子と言われた私でも・・・！ 以前、会社の飲み会でデザイナーのユウコさんに、25 歳を超えるといくら食べても太らなかった体質も変化するから気をつけた方がいいよ！・・・というありがたい言葉をいただきました・・・ まさに今、身に染みて体感中でございます（涙 4月9日をもって Windows XP がサポート終了となりましたね！ これで IE6 との長き戦いにも終止符が打てそうですっ！やっとですよ、やっと・・・！ IE6 消え失せろ～♪ ついでに言うと、IE8 も消えちゃっていいんだぜ☆ さて・・・今回で3回目の投稿となりますっ 今回は、スマホに対応したパララックスサイトの作り方についてご紹介！ Sublime Text ネタで通してきた
jQueryで1ページごとにスクロールして画面遷移させるUIを実装する方法｜BLACKFLAG
以前、iPhone5sのプロダクトページがリリースした頃に『簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」』と題して1ページをフルスクリーン表示にして、画面全体をスクロールさせることで、1ページ分（1コンテンツ分）を画面遷移させるUIを実装できるjQueryプラグインを紹介しましたが、自分なりにもっと使いやすい形で実現できないかやってみた実験をご紹介してみます。 【2014/08/05 追記】 各ブロック内での横スライド機能を追加しました。 まずは動作サンプルから。 下記のサンプル画面でマウスホイールスクロールもしくは画面右側のナビゲーションボタン等を使って画面（ページ）を切り替えてみてください。 「jQueryで1ページごとにスクロールして画面遷移させるU
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
要素がスクロールで画面内に入った時、内包要素を順番にフェードインするjQueryプラグインを作りました
写真のドミナントカラーを親要素の背景色にするjQueryプラグイン「jquery.adaptive-backgrounds.js」 ｜ スターフィールド株式会社
楽譜をWEB上で打ち込めるUI実装jQueryプラグイン「jsNoteEditor」:phpspot開発日誌
変数 | jQueryを俺の脳にインストール！