タグ

JavascriptとJavaScriptに関するunijamのブックマーク (29)

  • http://moriwaki.net/cms/?p=503

  • Post by @stainless-note

    昔使ったスムーズスクロールのスクリプトをコピペで使おうとしたら、動かなかった。orz そのソースが下記のような感じ。 function smoothScroll(href){ var speed = 400;//スクロール速度(ミリ秒) var target = $(href == "#" || href == "" ? 'html' : href);//移動先オブジェクト var position = target.offset().top;//移動先のY座標 /* スムーススクロール */ $($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, speed, 'swing'); return false; }

    Post by @stainless-note
  • jQuery で画像の読み込みを遅延させる | MissingNo.

    ・Lazy Load Plugin for jQuery Lazy Load はスクロールに合わせて画像の読み込みを遅延させるスクリプトです。 今回、ブログに jQuery を使った画像の遅延読み込みとロールオーバーを実装してみました。 直接デザインを調整していたので、閲覧時に画面の崩れに遭遇していましたら申し訳ありませんでした。 jQuery とは? 「画面遷移せずにデータの受け渡しをするには JavaScript の Ajax なる技術が必要だ ──」 と、半年程前に気が付いたのですが、当時の課題を JavaScript で実現するのは難しく投げていました。 そして、最近になり 「jQuery」 を使えばやりたいことが簡単にできることを知りました。 jQuery とは JavaScript のライブラリの1つで、非常に人気があります。 複雑な処理をシンプルに書けるのなら、これは

  • CocosMatchのソースコードを一般公開しました - Seasons.NET

    以前、GREEさんの勉強会で公開したデモのソースコードである CocosMatchを一般公開します。 Download ソースコードは、MITライセンスとします。 ( プロジェクトフォルダの中にもdocフォルダを用意し、README.mdを同梱しております) しかしながら参考ゲームとして、パズル&ドラゴンズの動きを かなり似せて作っているため、そのままゲームとして出荷するなどは控えてください。 (当方は、一切責任を持ちません) あくまでcocos2d javascript bindingsの勉強用として参考にしてください。 ※ソースコードは特にコメントを入れておりません。 また、アップデートをする予定も御座いませんので、 このプログラムに関するサポートは一切受け付けませんのでご注意ください。

    CocosMatchのソースコードを一般公開しました - Seasons.NET
  • jQuery Validate Pluginの解説とValidate 日本語環境用PluginとjQuery Form Pluginとの連携 - くらげだらけ

    前回、フォームをAJAXでうんちゃかするjQueryFormPluginのエントリーを書きましたけど、フォームと言えばValidateですよね。 ってことでjQueryValidatePluginについてもサラサラ見ていたので、こっちも日語Document化したのを書いておく。 で、日語化して書いていたら思ったよりも量が多くて少し適当な感が否めないような感じになっているかもしれません。 必要なさそうなところは一部飛ばしているしー、たまにおかしいところがあるかもしれませんが悪しからず。そんときはコメントくださーい。 あ、あとエラーメッセージ等のローカライズ版と日語環境用のValidateメソッドを新たに追加するスクリプトも書きました。 デフォルトだと半角英数のみとかー、ひらがなのみとかーできないんでー それから、もともとの目的のjQuery Form Pluginとの連携でAJAXなん

    jQuery Validate Pluginの解説とValidate 日本語環境用PluginとjQuery Form Pluginとの連携 - くらげだらけ
  • オブジェクトのドラッグ移動を実現するJavaScriptライブラリ·Pep MOONGIFT

    Pepはデスクトップ/スマートフォンの両方で動作するドラッグライブラリです。 ゲームなどでWebブラウザ上のオブジェクトをドラッグアンドドロップしたりする操作はよくありますが、その操作をデスクトップとモバイル両方に対応させたのがPepです。 使い方は簡単でDOMに対してpep()を実行するだけ。 ドラッグで移動させられます。 枠の中だけでの移動もその逆もできます。 コールバック対応です。 スライダーを動かすと大きさが変わるデモ。 X軸、Y軸を固定にすることもできます。 こちらはiPhoneで試した所。動きに慣性があるのが特徴です。 Webブラウザ上のオブジェクトを動かすという操作は通常のWebサイトではあまりない動作なので面白いです。またデスクトップとスマートフォン両方に対応しているので使い勝手が良いのではないでしょうか。 PepはJavaScript製、MIT Licenseのオープンソ

    オブジェクトのドラッグ移動を実現するJavaScriptライブラリ·Pep MOONGIFT
  • jquery.pep.js | kinetic drag for mobile & desktop

    jquery.pep.js is a lightweight jQuery plugin which turns any DOM element into a draggable object. It works across mostly all browsers, from old to new, from touch to click. I built it to serve a need in which jQuery UI’s draggable was not fulfilling, since it didn’t work on touch devices (without some hackery). All of Pep’s options are outlined on Github, so take a look. Feel free to email me with

  • パララックス効果で魅せる縦に長いウェブページ | Accessible & Usable

    公開日 : 2012年11月26日 (2015年12月14日 更新) カテゴリー : アクセシビリティ / ユーザビリティ 最近、パララックス効果 (parallax scrolling effect) を採り入れた、縦に長いウェブページが注目を集めています。以下の例のように、ページをスクロールしてゆくと、それに呼応して複数の視覚要素が個別に動くことで視差を作り出し、奥行き感や動きを演出する、というものです。 実際の動きを動画キャプチャしてみました。クローズドキャプション (字幕) で補足説明 (動きの解説) も用意してあります。 Anna Safroncik (http://annasafroncik.it) この効果をうまく用いれば、ユーザーの関心を惹きつける (エモーションを刺激する) ことができ、一定時間、ページに滞留してもらえることが期待できます。面白い視覚効果であれば、行きつ戻

    パララックス効果で魅せる縦に長いウェブページ | Accessible & Usable
  • Post by @stainless-note

    最近、TumblrAPIを使って、コードを組むことがあって、 なかなかいい出来だったので、 「よし!ブログでソースコードを公開しよう!」 と思い立ったものの。 はて?ソースコードを綺麗に表示するには、どうしたものか。。。 「開発系のブログを書いてる皆さんはどうしてるのだろう?」 と検索してみると、どうやら「ソースコード ビュー ライブラリ」を使ってる模様。 参考)行番号や各行背景色で見やすい ソースコード ビュー ライブラリ SyntaxHighlighter SyntaxHighlighter エディタのようにWebサイト上に綺麗にソースコードを表示する方法。 ソースを書くプロ達や未来の開発者のための学びの場である HTML,CSS,JS,Perl,PHPなどのマニュアル・解説サイトなどで、 PREソースコードを行頭番号付きでカッコよく表示するソース ビューア

    Post by @stainless-note