タグ

jQueryとHTML5に関するreponのブックマーク (4)

  • HTML5 × CSS3 × jQueryを真面目に勉強 – #8 jQueryプラグインの作り方について詳しく | DevelopersIO

    僕は人の名前を覚えるのが苦手です。それはさておき、jQueryプラグインの作成方法について頻繁に忘れるので、手順をここにまとめておくことにします。コレさえ読めば急にプラグインを大量に作れといった無茶ぶりをされても大丈夫。 多い日も安心♪(ゝω・)vキャピ はじめに - jQuery プラグインの構成 細かい差はあれど、基的にjQueryプラグインは以下のような構成で成り立っています。 // 匿名関数で全体をラップ - (5) (function($) { // このプラグインの名前 - (1) $.fn.name_space = function() { //要素を退避 - (2) var elements = this; // 要素をひとつずつ処理 - (3) elements.each(function() { // 具体的な処理をここに記述 }); // method chain

  • HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 | DevelopersIO

    そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け(※自分含む)のサンプルをいくつか紹介していきたいと思います。 はじめに - パララックスエフェクトについて パララックス(parallax)を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ○ニー映画で古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から使われています。 JavaScript(jQuery)でパララックスエフェクト 1 | スクロール値を取得 どれだけスクロールしたかという値を取得します。これだけではまだパララックスも何もありませんが、全てはここから始まるのです。 $(function() { $(window).scroll(fu

  • jQueryでCanvasを使ってお絵かき - 実践編

    ご無沙汰しております、株式会社シャノン技術統括部プロダクト開発部のHealerです。 あけましておめでとうございます。 冬も番となり、寒さが厳しくなってきましたが、お風邪などを召しておられませんでしょうか? そして年もブログともども、弊社株式会社シャノンをよろしくお願い致します。 さて、前回、 jCanvas(jQueryプラグイン)でCanvasを使ってお絵かき - 対応ブラウザ確認編 なるものを書いてから早半年以上空いてしまいました。。 実はスケジュールの都合が合わなくて1回パスをしているんです。 当ブログは基的に当番制でスケジュールの割り当てをいただいて技術部内の人間が順繰りに書いていくわけですが、1回だけパスが認められています。 従って、1回パスをしたところ、今回は捕まえられてどうにも逃げられず書いている次第です。(笑) という冗談はさておき、今回は jQueryでCanv

  • わずか8KBで直感的にCanvasが使えるjQueryプラグイン「jCanvas」 | Web活メモ帳

    円を書く ↑drawArcメソッドで円を書く事ができます。 オプション引数で座標位置とサイズ、色などを指定します。 $("canvas.test").drawArc({ fillStyle: "black", x: 100, y: 100 }); 短形を書いて回転させる ↑rotateCanvasで回転軸の座業と角度を指定します。 $("canvas.test").rotateCanvas({ angle: 45, x: 100, y: 100 }) .drawRect({ fillStyle: "#000", x: 100, y: 100, width: 100, height: 50 }) .restoreCanvas(); グラデーションを作成する ↑gradientメソッドでグラーデーションオブジェクトを作成し、 描画する際に指定するとグラデーションが適用されます。 var lin

  • 1