CSS3アニメーションが簡単に書けるjQuery Transit
jQuery TransitはGitHub でも公開されており、ページ右下の「Download ZIP」ボタンからダウンロードできます。プラグイン配布ページでダウンロードするとminify（圧縮）されているので、プラグインの中身を見たい場合はGitHubでダウンロードしましょう。 利用するWebページの body の閉じタグ直前で、jQuery本体と「jquery.transit.min.js」を読み込みます。 //(中略) <script src="jquery.min.js"></script> <script src="jquery.transit.min.js"></script> </body> //(中略) これで準備はOKです。 step2 基本的な使い方 実際のプラグインの使い方を説明します。 jquery.transit.min.js を読み込んだ後、transition
[jQuery/Javascript]jQueryによる無限ループするアニメーションと三角関数の話 | Wood-Roots:blog
DEMO 最近はキービジュアルにFlashを使用せずにJavascriptによるアニメーションを使うことが増えてきました。GalleryViewのようなスライドショーふうのプラグインを設置するだけのケースも多いですが、ちょっとでも凝ったことをしたいと思い考えたり調べたりしていると三角関数がなかなか使えるということが分かってきました。 正直苦手な内容の話なのですが、簡単な処理のために使う程度ならコピペで何とかなりました。 余談ですが・・・三角関数とは 言うまでもありませんが、サイン・コサイン・タンジェントというやつです。確か高1か高2の数学で習うものだったように思います。アニメーションで使用するのは大抵sinとcosです。 y = sin(x) という式の場合、xが増えていってもyは-1と+1の間の値しか取りません。グラフにあらわすと波線（正弦波といわれるもの）になります。 要素を回転させ続
レスポンシブ対応のナビゲーションメニューを実装するチュートリアル11選｜BLACKFLAG
レスポンシブ対応を求められるWebサイト制作では ナビゲーションメニューの構成について 何かと気を使わなくてはいけない点が出てきます。 ウィンドウサイズによってナビゲーションメニューの形状を変化させるやり方は様々ですが 便利に使えそうだと思ってメモしておいたJSやCSSでのチュートリアルが そこそこ溜まっていたので11種類ほどまとめて紹介してみます。 Responsive Nav – Responsive Navigation Plugin Responsive Nav – Responsive Navigation Plugin jQueryなどライブラリファイルを使わずに 1.7KBという軽量スクリプトで構成された 「Responsive Nav – Responsive Navigation Plugin」。 PCサイズでは通常のボタンが並ぶメニュー、 幅の狭いスマホ・タブレット系の
マウスの動きに追従して奥行きのある背景移動をするjQueryプラグイン「jquery.parallax.js」
Posted: 2011.05.30 / Category: javascript / Tag: jQuery, Plugin マウスの動きに追従して奥行きのある背景移動をするjQueryプラグイン「jquery.parallax.js」のご紹介です。 最新のはわかりませんがIEだと動かないかもです。 「jquery.parallax.js」のダウンロードとインクルード プラグインを下記URLからダウンロードします。 ここでは現時点で最新版である「0.2」を使用します。 jQuery Parallax | jQuery Plugins ダウンロードしたらjsファイルを読み込みましょう。 jQuery本体も忘れず読み込みます。 html <script type="text/javascript" src="jquery1.5.1.js"></script> <script type="te
jquery1.8にしたらanimateでbackground-positionを動かせなくなったって人は挙手をどうぞ | 日記の間 | あかつきのお宿
はいはいはーい！ ノシ ということで、うっかりjqueryのバージョンを1.8に上げたら、今までanimateで動かしてたbackground-positionが急に動かなくなってしまいました。 以前、jqueryのanimateでbackground-positionを動かそうっていう記事で、まさしく背景のポゼッショニングを華麗にそして流麗に動かす方法を書きましたが、あれはjqueryのバージョンが1.7以下の場合に有効な方法だったようです。1.8にすると残念ながらこの方法では動かなくなる。 なので、上記の記事には実際にアニメーションさせるサンプルをセットで載せといたんですが、それが動かなくなってしまいました……さーせん。 あとでこっそりあのサンプルページで読み込むjqueryを1.7に差し替えとかないとね……そうしないと、あっちの記事だけ読んだ人が「ああん？ 動かねーじゃねーか。嘘情報
背景、全画面で動画を再生。BigVideo.js #jQuery / Maka-Veli .com
いつかきっと使うメモ 今回の記事は以下から How To Build a Fullscreen Background Video Player | Vandelay Design Blog About the Author:Jake Rocheleau @jakerocheleau. Jake’s Google+ profile. より詳しく、技術的に読みたい方は今すぐGOです（記事は一応チュートリアルで全文英語です） jQuery / jQuery UI / Video.js / imagesLoaded を用いて、bigvideo.js と以下の指定で動くそう。 <script type="text/javascript"> $(function() { var BV = new $.BigVideo(); BV.init(); BV.show('動画.mp4'); });
YouTube動画を簡単に背景にするjQuery「jquery.mb.YTPlayer」
jQuery.mb.YTPlayer メルセデス・ベンツ日本公式サイトでオリジナルアニメが公開されていますね。テレビでもCMに使われていたので、ご存知の方も多いと思います。 本編ムービーが公開されている公式サイトでは背景にテレビCMに使われた動画が流れるインパクトのあるサイトになっています。 参考：NEXT A-Class │ メルセデス・ベンツ日本公式サイト このサイトを一部再現してみたいと思います。（注意：現在リニューアルされています。2016/10） 今回紹介するこのjQueryのコンポーネントを使用すると、ページの背景としてYouTubeムービーを設定することができます。 サンプルページを作ってみました → YouTube動画を簡単に背景にするjQuery「jquery.mb.YTPlayer」サンプル 過去にも『背景にフルスクリーンで動画を流す「jquery-tubular」』で
YouTubeを背景動画にしてフルスクリーンで流すjQueryプラグイン「Tubular」
Webサイトのページ背景に動画を流して、お洒落に演出したい方にオススメなのがこの「Tubular」というjQueryプラグイン。 YouTube動画をWebサイトの背景としてフルスクリーンで流すことができます。 Youtubeを利用しているので、表示も軽くて快適です。 設定も簡単です。サンプルを作ってみました。 ※ iPhoneのSafariではうまく動作しない場合があります。 「Tubular」の使い方は、続きをご覧下さい。 「Tubular」の設置方法 まずは、Tubularのダウンロードページから、jquery.tubular.1.0.1.zipをダウンロードします。 https://code.google.com/archive/p/jquery-tubular/downloads ダウンロードしてきた一式のファイルの中で、利用するのは以下のファイルになります。 screen.cs
IE8 IE7 IE6 でCSS3の background-size: contain; を使用できるようにするjQueryプラグイン｜プログラムメモ
とこれが Windows IE8 7 6 ではこのプロパティは認識されません。 そこで以下のjQueryプラグイン ■ jquery.backgroundSize.js （要 jQuery バージョン1.7.0以降 ） http://louisremi.github.com/jquery.backgroundSize.js/demo/ ■ 使い方（＜div class="hoge"＞に { background-size : cover; } を適用する。） <script type="text/javascript" src="jquery.js"></script> <!--[if lte IE 8]> <script type="text/javascript" src="jquery.backgroundSize.js"></script> <script> jQuery(docu
[Å] YouTubeやVimeoなど固定サイズになった外部の動画をレスポンシブに対応させる方法
[Å] YouTubeやVimeoなど固定サイズになった外部の動画をレスポンシブに対応させる方法
![[Å] YouTubeやVimeoなど固定サイズになった外部の動画をレスポンシブに対応させる方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/281d1afb5b5dd5d7e106c8f1e614d3faa97c7c93/height=288;version=1;width=512/http%3A%2F%2Fwebmemo.biz%2Fwp-content%2Fuploads%2Feye-fitvids.jpg)
jScrollPaneでスクロールバーを自作した際の覚え書き | ウェブ制作日記
このブログのフッター部分にはwordpressのプラグイン「Twitter Widget Pro」を使って僕のタイムラインを表示しています。 その際にどうしてもディフォルトのスクロールバーを使うのが嫌だったのでスクロールバーを自作してみることにしました。 しかし、どうせならjqueryのプラグインでいいものがあるんじゃないか？ と思い検索してみると「jScrollPane」というプラグインを発見しました。 jScrollPaneのダウンロードとファイル構成 まずはここから必要なファイルをダウンロードします。 上の図の赤枠内の「jquery.jscrollpane.min.js」「jquery.jscrollpane.css」「jquery.mousewheel.js」の三つを使用します。 ちなみに必須となるのは「jquery.jscrollpane.min.js」「jquery.jscro
javascriptでGETパラメータを取得する
javascriptでGETパラメータを受信するには以下の関数を使うと簡単です。 関数を定義する 以下のコードをコピペしてください。 function getUrlVars() { var vars = [], hash; var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); for(var i = 0; i < hashes.length; i++) { hash = hashes[i].split('='); vars.push(hash[0]); vars[hash[0]] = hash[1]; } return vars; } 返り値 GETパラメータを含むURLが以下の場合 URL http://www.example.com/?me=myValue&n
【jQuery】Cookieを使って、モーダルウィンドウの年齢認証を作成する方法 ｜ KLUTCHE
アダルトコンテンツを作る場合に便利なモーダルウィンドウの作り方です。 ※改良版を作りました。 モーダルウィンドウによる年齢認証の作り方 モーダルウィンドウとは？ コンテンツ前面に出てきて、ボタン操作をするまで、ページのコンテンツに触れなくするウィンドウのことです。 年齢認証とは？ アダルトページに入る時にある「18歳以上ですか？」というアレです。 Cookieを使う？ 一度年齢認証を行った後、同じページに訪れた場合に再び年齢認証を表示させないように、ユーザーが訪れた記録をCookieに保存する必要があります。 使用するJavascript jQueryと、そのプラグインであるjquery.cookie.js・jquery.simplemodal.jsを使用します。 jQuery jquery.cookie.js SimpleModal Javascriptの読み込み <script typ
jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種
jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種 ちょっと前まではマウスオーバーといえば画像の切り替えくらいでしたけど、最近ではアニメーションで切り替わるマウスオーバーも増えてきましたね。 ということでこの記事ではjQueryを使用して、わりと簡単に作れるマウスオーバーアクションをご紹介します。 投稿日2010年10月24日 更新日2012年03月05日 ナビゲーションはテキストにしないとseo的にあれだよとか言われていますが、コーポレートサイトではまだまだ画像を使用されていることが多いと思います。なので、今回は画像ナビゲーション限定です。（テキストでもあまり変わらないと思いますが……） 縦型+テキストタイプのナビゲーションはこちらの記事をご覧ください。 「jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種」 htmlと画像の準
jQuery事始めvol.3・プラグインに頼らず自分でクリックで切り替わるタブメニューを作ってみる - かちびと.net
暫く空いてしまいましたが、jQueryを コピペに頼らず自分で書いてみよう、 という記事。第三回目です。僕よりも 全然詳しい人のほうが多いんですが、 最近何度かデベロッパーさんの憤り の発言を目にするので多少でも貢献 出来ればと思います。 というわけで第三回目はよく見るタブメニューを書いてみましょう、というもの。 「jQueryを使ったスムースなタブメニュー – ウェビメモ」という記事をお見かけしたのですが、簡単なタブメニューですのでコピペにもプラグインにも頼らず自分で作ってみようじゃないかと、そういう趣向です。 内容は完璧に良いコードとかではなく、あくまで脱ビギナーという内容となります。ビギナーの僕が何様だみたいな話は置いといて。 分かりやすさをメインにしていますので厳密には説明が少し違う点もあるかもしれません。誤解招きそうな記述ありましたらご指摘下さい。 ゴールの確認 まず完成形を見て
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
BackgroundCheck
Camera | a free jQuery slideshow by Pixedelic
http://www.frescojs.com/
finefinefine.jp
jQueryを使ったHTML include | snippet