簡単！超軽量！プラグインなしでページ遷移時にフェードイン・アウトさせる方法
サイト内の別ページへの切り替え時にフェードイン／フェードアウトなどのエフェクトを施してくれるJavascriptやjQueryプラグインはいくつかあります。 例えば、以下のようなもの。 また、「PJAX」というjQueryプラグインを利用すると、非同期通信でウェブページ内の更新が必要な特定の範囲だけリンク先の別ページの対象コンテンツに置き換えて表示することで、ヘッダーエリアやサイドバー、フッターなどの重複するコンテンツは表示したままにして通信量を減らし、ページ遷移を高速にすることもできます。 さらに、このPJAXを利用してページ遷移効果の実装をより扱いやすくした「Barba.js」という軽量なプラグインもあります。 これらの素敵なプラグインを活用して、新しいインタラクティブなWordPressテーマを作ろうと企画したのですが、開発中のテーマではあらゆる機能やエフェクトのためのスクリプトを読
jQuery：ページアクセス、リンク時にフェードする方法 | raining
jQueryを使用してサイトアクセス時にページ内容をフェードインさせる方法と、 リンクをクリックした時にフェードアウトしてからページ遷移する方法をメモします。 フェードイン、フェードアウトするのに下記のメソッドを使用しています。 fadeIn([speed], [callback]) 指定した要素をフェードインして表示します。 fadeOut([speed], [callback]) 指定した要素をフェードアウトして非表示にします。 ※[callback]は処理終了時に実行する内容を記述します。 ■ フェードイン、フェードアウトする方法 「wrapper」の内容がフェードインして表示されます。 また、リンクをクリックするとフェードアウトしてページ遷移します。 【JS】 <script type="text/javascript" src="http://ajax.googleapis.co
私がよく使っているjQueryプラグインまとめ（スライダー、モーダルウィンドウなど）
こんにちは、暑いですね。脇汗すごいですね。僕が。 さて今回はWebページ作成時に、私がよく使っているjQueryプラグインをまとめてみました。（たまにjQueryが必須でないものもあります。） ※紹介しているプラグインを使用する際、ライセンスは各自で再度確認してくださいませ。 Owl Carousel 個人・商用利用可能。レスポンシブでいい感じに動作してくれるカルーセルスライダーです。動作もシンプルで綺麗だし、マークアップも簡単。テキストもOK。お気に入りのプラグインです。 Owl Carousel bxSlider 個人・商用利用可能。シンプルなスライダープラグインです。レスポンシブで動作し、カスタマイズもしやすく重宝します。 jQuery Content Slider | Responsive jQuery Slider | bxSlider Glide.js デモページがカッコイイス
jQueryでパララックスサイトの様にスクロールして要素が出現した時点でアニメーション等のイベント処理を実行させる実験｜BLACKFLAG
パララックスサイトやAppleのプロダクトページの様な動きを付ける為の スクロールして特定の位置でアニメーション等の処理を実行させることができる jQueryプラグイン等をここでも何度か紹介しましたが プラグインのバージョンによって動作仕様が変わってしまっていたり 上からのスクロールと、下からのスクロールの判断が微妙だったりしたので なんとか簡単にスクロールの上下を判別させて、 なにか処理を実行させるスクリプトができないものか 試しに作ってみたので紹介してみます。 まずはサンプルから。 下記の画面をスクロールするとコンテンツ要素が順々にフェードインします。 「jQueryでパララックスサイトの様にスクロールして要素が出現した時点でアニメーション処理実行させる実験」サンプルを別枠で表示 上記サンプルでは6つコンテンツエリアを縦に配置してあります。 上からスクロール（ダウン）してそれぞれのコン
Animsition
AnimsitionA simple and easy jQuery plugin for CSS animated page transitions.Download on GitHub Tweet 58 different animations Fadefade-infade-outFade Demo Fade upfade-in-up-smfade-in-upfade-in-up-lgfade-out-up-smfade-out-upfade-out-up-lgFade Up Demo Fade downfade-in-down-smfade-in-downfade-in-down-lgfade-out-down-smfade-out-downfade-out-down-lgFade Down Demo Fade leftfade-in-left-smfade-in-leftfade
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
