タグ

2015年1月20日のブックマーク (5件)

  • jQuery レスポンシブ・スライダー bxSlider | Web Design Leaves

    jQuery レスポンシブ・スライダー bxSlider CATEGORY: jQuery | TAG: フォトギャラリー, プラグイン, レスポンシブ 2014年5月18日 レスポンシブ対応のスライダー「bxSlider」(v4.1.2) の使い方や設定に関するメモ。とても簡単に設置ができるが、指定するモードによっては、使用している CSS の関係でスライドの位置がずれてしまったりしたのでその対処法やオプションについて。 目次 bxSlider のダウンロードとインストール bxSlider のサイトの右上の「Download」からファイルをダウンロード。 ダウンロードしたファイルを展開すると以下のようになっている。 images:コントロール類やローディングの画像 plugins:オプションで使用する「jquery.easing.1.3.js(イージング)」と「jquery.fitvi

  • jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる

    最近更新ペースが遅くなっています。最近仕事の関係でサイトを作っているのですが、そこで使った方法を紹介します。スクロールしてコンテンツが現れたときにアニメーションが開始します。jQueryを使っています。 言葉ではイメージしにくいかもしれません。百聞は一見にしかず、ということでサンプルをご覧ください。画像が画面内に表示されると右にアニメーションします。 プラグインもありそうですが、安易にプラグインを使うのではなく自分で作った方が勉強になります。また、プラグインによっては色んな機能があるために無駄に容量が大きくなってしまうこともあります。そんな場合は、必要な機能だけ自分で書く方が読み込み速度的にも効果的なのかなと思います。 jQuery全体はこんな感じになります。 $(function(){ $('.effect').css("opacity",".3"); $(window).scroll(

    jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる
  • jQuery基礎講座:スクロールして要素が出現したらアニメーションを実行する方法(ZIP付) - P N R A

    jQuery基礎講座[第7回] どーも@PNRAです! 忘備録もかねて随時更新していくjQuery基礎講座の時間がやって参りました。 表題の通り、スクロールするとアニメーションを実行する、というものを作っていきたいと思います。これは、ウィンドウのスクロール量とアニメーションを実行する要素の位置関係を取得し、ウィンドウに出現するタイミングでクラスをつけてアニメーションを実行する、といった内容になっています。 前回の基礎講座(jQuery基礎講座[第6回]:スクロール量に応じて要素(ヘッダーなど)を固定する(ZIP付))と近しい内容になっているので、是非こちらも合わせて読んでみてください。 それでは、具体的にみていきましょう。 実装実例 どんな動きになるのかは下記画像内のウィンドウをスクロールしてご覧ください。(こちらは『placeit』で作成させていただきました。) ページが読み込まれると、

    jQuery基礎講座:スクロールして要素が出現したらアニメーションを実行する方法(ZIP付) - P N R A
  • jQuery.Deferred を使ってみる。 | バシャログ。

    カーテンのない家には住めない事に気がついたminamiです。 jQueryにはjQuery.Deferred というオブジェクトがあります。jQuery 1.5 のころから実装されてだいぶ経っているのですが、今までなんとなくよくわからなくて苦手意識があったので改めて使ってみました。 jQuery.Deferred ってなに? "deferred" の意味を調べると「延期された」「遅延された」などの意味があります。乱暴にまとめてしまうと、様々な処理が終わった後に呼ばれる(遅延された)処理を監視してくれるオブジェクトと言えます。 何を言っているのかわからん 文章で書くとまどろっこしいのでサンプルを作りました。1~4の処理が全て終わったら完了の表示を出します。 jQuery.Deferred を使った処理の管理 window.setTimeout() などのタイマー処理 jQuery.ajax

    jQuery.Deferred を使ってみる。 | バシャログ。
  • jQuery.Deferredで順番にアニメーションを実行する | 2GRAVITY

    要素をアニメーションさせて印象的に見せる「動きのあるメインビジュアル」は以前まで主にFlashが使われていましたが、最近ではJavascriptで実装されているものが増えてきています。Javascriptを利用したアニメーションは、jQueryとEasing Pluginを使うことで比較的簡単に個々の動きをつけることができます。 個々に設定したアニメーションを順番に再生するために、今まで自分はdelay()やコールバックを利用していましたが、Web Designing(2013.03)にjQueryのDeferredオブジェクトを利用して関数を順番に実行する方法が載っていたので処理の流れを確認するためメモを兼ねてコードを自分なりに整理してみました。 個人的に今回のポイントとなるのはjQuery.Deferredとスキップボタンに使用するstop()。 調べてみるとstop()の引数には実は

    jQuery.Deferredで順番にアニメーションを実行する | 2GRAVITY