jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法
可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。 まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。 このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。 画面サイズに合わせて高さを指定する3つの方法｜Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー｜Webpark とい
コンテンツを自動的に読み込んで無限スクロールさせる方法【jQuery連載13】 | HTML5でサイトをつくろう
フォトギャラリーなどでページをスクロールして、次の写真を見る際などに、クリックで続きを見るなどもあるが、ここでは特定の枚数を読み込んでスクロールした際に次の読み込みたい内容を自動的に読み込む形を作成してみます。 こうすることによってクリックすることなくサイト全体の写真を見ることなども可能となります。 ウェブページを下にスクロールし続けていくと、ページを遷移せずに次に来るべきコンテンツを自動で読み込んで同じページに表示し続け、あたかも無限にスクロールし続けるような仕組みは一般的に「無限スクロール」と呼ばれ、Twitterをはじめ、SNSのFacebookやGoogle+、画像共有サービスのPinterestなど大手ウェブサービスで導入されている。 今回はこの「無限スクロール」の仕組みを、その手軽さから多くのサイトで導入されているInfinite Scrollプラグインで実装してみよう。 今回
簡単にコンテンツスライダーを実装できるjQueryプラグイン「bxSlider」の実装サンプル - NxWorld
スライダーやカルーセルを実装できるjQueryプラグインは多数ありますが、それらの中でも豊富なオプションと実装の手軽さで見かけたことや実際に使用した人も多いと思う「bxSlider」の実装サンプルです。 もっと高機能なプラグインも探せばいくらでも出てきますし、bxSliderにこだわる必要はもちろんないんですが、個人的に手軽に使えるという理由で今でも使わせてもらう機会が割と多いので、公式には載っていない実装サンプルをいくつか紹介しようと思います。 bxSliderについて 今回使用する「bxSlider」はコンテンツスライダーやカルーセルといった動きを実装することができるjQueryプラグインで、手軽に実装できることに加え、オプションも豊富に用意されているのが特徴のプラグインです。 また、レスポンシブやスワイプといった機能も実装されているので、スマートフォンやタブレットといったデバイスが対
jQuery TextExt Plugin
Demo This demo shows off Tags, Prompt, Focus, Autocomplete and Ajax plugins. About TextExt is a plugin for jQuery which is designed to provide functionality such as tag input and autocomplete. The core design principle behind TextExt is modularity and extensibility. Each piece of functionality is separated from the main core and can act individually or together with other plugins. TextExt’s modula
10 interesting jQuery plugins
10 interesting jQuery plugins (august 2011) Today I selected the most interesting jQuery plug-ins that have emerged over the last month. Here are different plugins like progressbar, image zoomer, tooltips, combogrid, smartspin etc. 1. Animated progressbar This plugin will allow you to create animated progressbars (plugin expanding default scrollbar plugin). Online demo you can find here. 2. Image
魅力ある動きを可能にしてくれる フリーjQueryプラグイン「14 Free Frontend jQuery Plugins」
TOP > plugin > 魅力ある動きを可能にしてくれる フリーjQueryプラグイン「14 Free Frontend jQuery Plugins」 webサイトを構築する際に、印象的に、サイトを魅力的に見せてくれるjQueryは非常に便利なツール。よく利用されている方はとても多いのではないでしょうか？今回はそんなjQueryプラグインをフリーで使用できる「14 Free Frontend jQuery Plugins」を紹介したいと思います。 fullPage.js One Page Scroll Site Plugin 14種の、独特な動きを見せるjQueryプラグインが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 jquery.matchHeight Tests ディスプレイサイズによって可変するボックスレイアウトの
jquery 1.xと2.x の違い、さらに動作を高速にするための設定 | まとめーたー
photoBy: http://www.jose-aguilar.com/blog/wp-content/uploa…まずは jquery 1.x と 2.x の違い 1.x 系は IE8 以前をサポートするが遅い、重い 2.x 系は IE8 以前のサポートは捨てて、いるが軽い、早い アイルトン・セナじゃあるまいしそんなに早くしてどうすんの？Webページがたった1秒高速化するだけでECサイトなんか、売上が10％向上した事例もあります。 使い分ける対応していないIE8以下には古いjqueryを読み込ませます <!--[if lt IE 9]> <script src="jquery-1.9.1.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="jquery-2.0.0.js"></script> <script s
スマホ用のスワイプギャラリーjQueryプラグイン「jquery.swipeGallery」
スマホ用のスワイプギャラリーjQueryプラグイン「jquery.swipeGallery」 スマホで利用できるスワイプ可能なスライドギャラリー用のjQueryプラグイン「jquery.swipeGallery」を公開しました。指で画面をスワイプすると画像が切り替わるアレです。 ダウンロード / サンプル(スマホで見てね) / GitHub スワイプ系のギャラリーとしては珍しい無限ループに対応しているプラグインです。 利用方法 jQueryを読み込みその後にjquery.swipeGalleryを読み込みます。 <script src="jquery.js"></script> <script src="jquery.swipeGallery.js"></script> CSSファイルも読み込みます。 <link rel="stylesheet" href="jquery.swipeGal
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
