画像を使った視差アニメーションを簡単なjQueryのコードで実装するTips - かちびと.net
マウスの動きに応じて重ねた複数の画像 が動きその動きを使って視差効果を与える、 というjQueryプラグイン。ユニークでいいで すね。ソースも軽量です。こういうの実装され てるだけで、ちょっと味のあるデザインに なりますよね。 視差アニメーション用のjQueryプラグインは今までもいくつかありましたけど、今回使用されてるものは割と簡単なコードだったので勉強にもなると思いメモ。 PLAX マウスの動きに合わせて重ねられた画像がそれぞれ別の動きをするので結果的に視差効果が生じる、というもの。よくあるやつですね。Githubの404ページのアニメーションで使われてるスクリプトみたいです。 デモ (function($){ var layers = [], docWidth = $(window).width(), docHeight = $(window).height() $(window).
IE6〜8でCSS3セレクタ利用「Selectivizr」
CSS3セレクタを使う上で問題となるのはやはりIEです。HTML5 & CSS3 Supportで確認すると、IE6～8はほとんど対応できていないことが分かります。 そんなIEでもCSS3セレクタを使えるようにするのがSelectivizr.jsです。詳しく紹介されているサイトがあまりなかったのでご紹介。 Selectivizrの設置方法 ここで提供されているselectivizr.jsとJavaScriptライブラリを外部ファイルで読み込むだけで、CSS3セレクタがIE6～8でも利用可能となります。コードも外部ファイルを読み込むだけですのでとてもシンプルです。 <script type="text/javascript" src="[JSライブラリ]"></script> <!--[if (gte IE 6)&(lte IE 8)]> <script type="text/javascr
HTML5+jQueryのドラッグ&ドロップに対応したアップローダー・droparea
Gmailライクにローカル環境からブラウザに ドラッグ&ドロップで画像をアップロード可能 にするHTML5+jQuery製のアップローダー droparea。今後、こうしてキーボードを使う 頻度が減っていくんですかね・・HTML5の 出現で一気に加速した印象ですね。 jQuery HTML5 UploaderやjQuery File Uploadの後発に当たりますね。 イメージアップローダーです。Gmailライクにドラッグ&ドロップでアップロード出来ます。 コードs = { 'init': m.init, 'start': m.start, 'complete': m.complete, 'instructions': 'drop an image file here', 'over' : 'drop file here!', 'nosupport' : 'No support for t
複数並べられたコンテンツをまとめてスライドさせるjQueryプラグイン・Grid Slide Plugin - かちびと.net
ちょっとうまい説明が思いつかなかった んですけど、複数並べられた画像など を同時にスライドさせるjQueryプラグイン。 省スペースに多くのコンテンツを表示 させる事が出来るのはちょっといいかも 知れません。 あんまり見かけないタイプのスライダーですね・・省スペースに沢山の情報を表示させたい、という時に使えそうな使わなそうな。たまに似たようなインターフェース見かけますね。 これらの8つのコンテンツ部分が同時にスライドします。オプションで数を減らしたり速度を変えたり。 デモ見たほうが早いですね。説明下手ですみません。 Demo js <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"> </script> <script src="jquery.ea
jQueryUIを使ってマウスオーバー時に背景色をアニメーションさせながら変更出来ると今更知った - かちびと.net
備忘録。マウスオーバー時に背景の 色をアニメーションしながら変更する、 というのをクロスブラウザ対応で実装 したい。css3を使えば簡単な事ですが、 ご存知のようにIEは非対応。で、色々 探してみたんですが、jQueryUIを使う のが一番良さそうな感じでした。 普通にググったらJquery Color Pluginというプラグインがあったのですが、動作はするけどIEでエラーが出ます。リファレンスを見ても そもそも数値型の値をとらない属性（backgroundColorなど）には、animate関数は対応していません。 (jQuery日本語リファレンス) と書いてあるし、Jquery Color Pluginを直すのも面倒だし、どうしようかなと思ったんですが、jQueryUIを使えば凄く簡単なんですね・・・素人ですみません。 コード <script type="text/javascrip
自動でリピート再生するYoutube動画を背景全体に指定出来るjQueryプラグイン・jquery-tubular - かちびと.net
Webサイトの背景をリピート再生するYoutube の動画にしてしまおう、というjQueryプラグイン ・jquery-tubularのご紹介です。なかなか斬新 では無いかなと思います。ユニークなサイトを 作る際に参考にしたいですね。導入も極めて 簡単なのでぜひチャレンジしてみてください。 jQuery使うといろいろ出来るんですねぇ。スキルの低い僕にとっては、こうしてソースを提供してくれるのがとてもありがたいです。ライセンスはMITとのことですので、商用でもOKですね。 [note]かなり適当ですけどWordPressのテーマにしたのでご興味有りましたら遊んでみてください。[/note] このように背景全体にYoutubeの動画を使うことが出来るプラグインです。ユニークでインパクトもありますね。導入も非常に簡単です。 サンプル作った 面白かったので暇を見て適当にデモサイトを作ってみました。
[JS]背景画像やスライドショーをブラウザいっぱいに表示するスクリプト -Vegas
写真画像をブラウザいっぱいに表示し、ウェブページにフル表示の背景画像やスライドショーを設置するjQueryのプラグインを紹介します。 ドットベースのオーバーレイ用の画像が数多く用意されているので、画像にスタイリッシュなエフェクトを加えることも簡単にできます。 デモページ サムネイルをクリックすると、写真画像が変更されます。 Vegasの実装 外部スクリプト 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="/vegas/jquery.vegas.js"></script> スタイルシート スタイルシートもあらかじめ用意されており、外部ファイルとして指定します。 <link rel="st
[JS]スマホ・デスクトップに対応したインタラクティブなマップが作成できるスクリプト -Leaflet
jQueryなど他のスクリプトに依存せずに、インタラクティブなマップを作成できる軽量のスクリプトを紹介します。 Leaflet - a modern, lightweight JavaScript library for interactive maps デモページ [ad#ad-2] Leafletは、ユーザビリティ、パフォーマンス、サイズ、フレキシビリティを重視して開発されており、デスクトップとモバイルの主要なブラウザでインタラクティブなマップを作成できるBSDライセンスのスクリプトです。 Leafletの主な特徴 タイルレイヤー マーカー、ポリゴン、ポリライン、サークルの設置 ポップアップ イメージのオーバーレイ ドラッグ操作でパン ホイール・ダブルクリックでズーム Shift+ドラッグでバウンディングボックス タッチドラッグでパン（スマホ） マルチタッチでズーム（iOS） ダブルタ
Harmonograph.js : Visualize harmony
About ハーモノグラフについて If you aren't Japanese speaker, I recommend you to read Wikipedia(en): Harmonograph . ハーモノグラフ(Harmonograph)とは、19世紀ヨーロッパで流行したとされる、2つの振動の調和を視覚化できる装置です。2つないし3つの振り子と、ペン、紙を組み合わせた単純な装置ですが、おどろくほど多彩で美しい図像を生み出します。 音は鼓膜の振動ですから、2つの振動=2つの音と見ることもできます。実際、よく響く音程と同じ振動数の組み合わせでは、規則性の高い図像が得られます。 「Harmonograph.js」は、このハーモノグラフをJavaScriptでシミュレートしたものです。 ハーモノグラフについては、アンソニー・アシュトン著「 ハーモノグラフ: 和音が織りなす美しい図像 (
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://p.erkins.com/