JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現Webサイトのアクセントに、ちょっとした動きをつけたい時ってありますよね。一から作り込むのは大変ですが、プラグインを使えば意外と簡単に実装できますよ。夏らしい涼し気なデザインになりそうです。サンプルがうまく動かない時はデモ画面右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてください！ GitHub wavifyは jQuery のプラグイン。ふよふよと動く波を表現できます。jQueryとTweenMax、wavifyのファイルを読み込み、SVG コードを用意すれば OK。 HTML <body> コンテンツ ・・・ <!-- SVG --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"><path id="wave" d=""/
ページを表示する時に、スライド、フェード、回転、ぱたりなどのかっこいいアニメーションを加えるjQueryのプラグインを紹介します。 アニメーションは表示する時だけでなく、リンクがクリックされて離れる時にも適用することができます。 Animsition Animsition -GitHub AnimsitionはWordPressのプラグインとしても用意されているので、WPを使っている時はプラグインの方が簡単に利用できると思います。 Page Transition -WP Plugin Directory Animsitionのデモ Animsitionの使い方 Animsitionのデモ デモはChrome, Safari, Firefox, Opera, IEは10+でご覧ください。 demo: fade エフェクトは全部で18種類！ その中からデモで、9種類が楽しめます。 demo:
![[JS]ページを表示する時にかっこいいアニメーションを加えるスクリプト（WordPressにも対応） -Animsition](https://cdn-ak-scissors.b.st-hatena.com/image/square/b80759b41725608b25c138b140d6a9a63ee8beac/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttps%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014082901.png)
データの格納場所として便利なdata属性（独自データ属性）に、配列やオブジェクトを格納しておいて、jQueryで値を取得する方法をメモ。 HTML 属性の値を「'（シングルクォーテーション）」で囲む。 配列やオブジェクトの値で文字列を使用する場合は「"（ダブルクォーテーション）」で囲まないと、配列やオブジェクトが文字列として認識されてしまう。 <div id="arr" date-arr='[1, 2, "c"]'> 配列の場合 </div> <div id="obj" date-obj='{"a":1, "b":2, "c":"c"}'> オブジェクトの場合 </div> JavaScript (jQuery) var arr = $('#arr').data('arr'); var obj = $('#obj').data('obj'); console.log(arr[0]); //
Reference To install include jquery.sticky-kit.js after including jQuery. Usage: $("#sticky_item").stick_in_parent(); // or $("#sticky_item").stick_in_parent(options); You can pass a hash of options to configure how Sticky Kit works. The following options are accepted, each one is optional: parent — The element will be the parent of the sticky item. The dimensions of the parent control when the st
更新履歴 2010-01-21 本エントリの内容も含めた最新の情報は下記エントリをご参照ください。 jQuery の位置・サイズ関連メソッドまとめ - Cyokodog::Diary 前回のつづきです。 前回同様 width の記述は省略してますが、height を width に置き換えれば幅も取得できます。 attr() メソッドでサイズを取得する際の注意点 attr('offsetHeight') や attr('clientHeight') でサイズを取得する際、対象要素が非表示状態だと 0 が取得されてしまいます。 要素を表示させる際、位置決め等のために表示処理前に対象要素を採寸することがあるかと思いますが、そのような場合注意が必要です。 対象要素が非表示だった場合、一時的に表示状態し、採寸後に非表示にするようなプラグインを定義しておくと便利です。(以下参照) $j.fn.mea
jQueryで指定されたイベントの定義場所を取得する方法 セミナー時にHTML上のイベントが指定されている要素から、実際にイベントを指定したコードが書かれているJavaScriptファイルや場所を知りたいと質問を受けました。 調べたところ良さそうな方法があったのでシェアしておきます。 ちょっと動画に取ってみたので、動画でご確認ください。 なにをやっているかというと、まず、デベロッパーツールを開き、検証したい要素を選択します。 次に右クリックして「Add attribute」から適当なidを指定します。今回は「js_debug」というidを指定しています。 次にデベロッパーツールの右上のアイコンからコンソールを開き以下のコードを入力しEnterを押します。 $._data($("#js_debug").get(0), "events"); Object->click->0の順番に開いていき、
With Microsoft ending Windows XP support this month, we’re giving the jQuery community some long-lead-time notice on changes to browser support. First of all, don’t panic! Nothing is really changing with respect to the browsers that can run jQuery for at least six more months. Our goal is to let everyone in the web development community know what the jQuery team intends to do over the next year, s
第17回パララックス効果を作ってみよう 最近よく見るようになった、奥行感を演出するスクロール。いわゆるパララックスと呼ばれる演出効果。 もちろんこれもJavaScriptを使って実装されています。 サンプルを見る 奥行を理解する。 パララックスを理解するには、2D空間における奥行感を理解する必要があります。 下の図を見てください。 これが奥行感を演出する際の鉄則です。 皆さんも、空を眺めたとき、飛行機がゆっくり空を飛んでいるのを見たことがあるはずです。 でも、普通に考えて、飛行機があんなにゆっくり飛んでるはずはありません。 そう、遠くにあるものはゆっくり動いて見えるのです。 そのあたりの理屈は、遠近法と同じですね。同じ10メートルでも、目の前の10メートルと1キロ先の10メートルでは視認できる大きさが違います。 もう一つ例を挙げると、空を浮かぶ雲を見たときに、速い雲と遅い雲がある
Updated 2014.02.16 / Published 2014.02.16 jQueryでdata-*属性を扱う際にjQuery.data()メソッドもしくはjQuery.attr()メソッドを使うことになるでしょうが、jQueryで扱えるdata-*属性のオブジェクトは前提としてキャッシュ仕様であることを理解しておかないと嵌ることが多々あります。 取得だけなら問題は起こらない <div id="user1" data-id="1" data-user="Jack" data-date-of-birth="2000-10-01">Jack</div> これらのdata-*属性を取得したい場合、jQueryであれば次のように記述します。 //data()の場合 jQuery("#user1").data("id"); // => 1 (数字扱い) jQuery("#user1").d
先日社内のPGに教えてもらったのですが、jQuery(1.2.0以降)ではイベントに名前空間を指定できるようです。 $('a').mouseover(function () { console.log('over!'); }); // -> a tagにカーソルを乗せるとconsoleに'over!'を出力 $('a').bind('mouseover.tmp', function () { console.log('tmp!'); }); // -> a tagにカーソルを乗せるとconsoleに'over!'と'tmp!'を出力 $('a').unbind('.tmp'); // -> a tagにカーソルを乗せるとconsoleに'over!'を出力 $('a').unbind('mouseover'); // -> a tagにカーソルを乗せても何も出力されない この方法を使えばp
jQuery 1.11.0 と 2.1.0 がリリース されたので、自分なりに変更点をまとめました。 誤訳や誤解して間違ってまとめていることもあるかも知れませんので 読まれる際はご注意下さい。 以前の記事( beta1 , beta2 , beta3 , rc1 )の要約みたいなものです。 （※ページをそのまま訳したわけではありません） 箇条書きにすると以下のような感じ： API に変更点無し リフロー(レイアウト)強制を少なくした 読み込み時のオーバーヘッドを低減 カスタムビルドがより細かく可能に ビルド方法(2013/1/27 時点) npm への登録、ついでに Bower にも 圧縮ファイルからソースマップ用コメントを削除 API に変更点無し 1.10, 2.0 から API の変更はありません。 多くのバグ修正と AMD 対応強化、npm 登録、性能改善など、 内部の管理環境の変
仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。 フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。 基本的な流れ フォームのsubmitを拾う 通常の送信はキャンセル 送信ボタンを無効化 送信先URLやフォームの入力値を取得 送信 受信後、送信ボタンを戻す 入力値をどう得るか、というのがポイントかと思います。 送信ボタンを無効化するってのはやらなくても良いんだけど、誤操作防止のためにも是非やって頂きたいと思います。あと送信ボタンの制御以外にも応用がききます。 デモ なんかお問い合わせフォーム的なものを用意しました。 まー実際にお問い合わせフォームをAjaxで送信する場面なんてないような気もするんですが、基本パターンという事で。
はじめまして、こんにちは。 軽めのjQuery Advent Calendar 2012の9日目の記事です。 今回はよくある文字数カウントをjQueryで実装してみるのと、便利(?)なプラグインの紹介。 初記事ですので、どうぞお手柔らかにお願いさせていただきたく。（ちなみに現時点ではこれ以外にページはありません！） 文字数カウントの実装 早速ですが、こんな感じでHTMLとJSを書いていきます。 textareaに入力された文字数をdiv#result要素の中に表示していく流れですね。 HTML <textarea></textarea> <div id="result">0</div> JavaScript $(function(){ var cnt; // キー入力が発生する度に実行 $('textarea').on('keyup', function(){ // テキストエリアのval
ばらけてきたのでこちらにまとめます。 索引 位置の設定 css(name,value) 位置の取得 css(name) offset() position() scrollTop() / scrollLeft() event.pageY / event.pageX サイズの設定 css(name,value) / height(value) / width(value) サイズの取得 css(name) / height() / width() attr(clientHeight / offsetHeight / scrollHeight) outerHeight() / innerHeight() コンテナ要素の取得 offsetParent() 解説 位置の設定 css(name,value) 対象要素を指定した位置に配置できます。単位を省略した場合はピクセル単位となります。 $('#
こんにちは。ミクシィUX統括部にて、mixi Touchの開発を担当しております戸高です。 JavaScriptでの開発を行う事が多いのですが、iOSのブラウザ（Mobile Safari）のfocusの挙動について少しクセがあり、 調べてみましたので、お知らせいたします。 通常、<textarea>や<input type=”text”>等のフォーム要素に対して、フォーカスを与えたい場合、focus()メソッドを使用します。 iOSのブラウザ（以下、Mobile Safari）にて、以下のコードを実行してみます。 （分かりやすい様にjQueryを使用させて頂きました） なお、検証端末にはiPhone4S iOS5.0(9A334)を使用しています。 HTML <!DOCTYPE html> <html> <head> <meta http-equiv=”Content-Type” con
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
