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の間の値しか取りません。グラフにあらわすと波線（正弦波といわれるもの）になります。 要素を回転させ続
[JS]動画をブラウザいっぱいやエレメントの背景として配置できるスクリプト（スマホにも配慮） -Vide
.mp4, .webm など、動画をブラウザいっぱいやdivなどのエレメントの背景として配置できるjQueryのプラグインを紹介します。 デスクトップでは動画が再生され、スマホでは仕様のため代替の静止画像が表示されます。 デモページ iOSでは動画はネイティブのプレイヤーのみ再生可能なので、静止画像が表示されます。Androidでは一部の機種で動画が再生されてしまいますが、基本的には静止画像が表示されます。 Videの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部スクリプトとして記述します。 <body> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/jquery.vide.min.js"></scr
レスポンシブ対応のナビゲーションメニューを実装するチュートリアル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サイズでは通常のボタンが並ぶメニュー、 幅の狭いスマホ・タブレット系の
Quiz Generator Script - Sawa's Factory
JSライブラリを使用したメニューや、Lightboxを導入したCGI、自作のJSライブラリなどを配布しています。 Quiz Generator Script (クイズ作成スクリプト) 自作 JSライブラリの４択（複数選択）クイズジェネレータ（クイズ作成スクリプト）です。 以前に公開したFlash版クイズをJavascriptで書きました。 2012/03/17、Version2.0 リリース。選択岐のシャッフル機能追加、スクリプトの手直しを行いました。 レベルアップクイズ作成スクリプトはこちらです ランキング機能の付いたQuiz Generator Script Ranking＋はこちらです 複数選択式Quiz Generator Scriptはこちらです 複数選択式レベルアップQuiz Generator Scriptはこちらです 特徴 JS設定ファイルを変更するだけで、簡単に4択クイズ
マウスの動きに追従して奥行きのある背景移動をする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に差し替えとかないとね……そうしないと、あっちの記事だけ読んだ人が「ああん？ 動かねーじゃねーか。嘘情報
ページ背景をフルスクリーンのスライドショーにするjQueryプラグインを作ってみた。（CSS3のアニメーション機能のみで実現） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ページ背景をフルスクリーンのスライドショーにするjQueryプラグインを作ってみた。（CSS3のアニメーション機能のみで実現） デモページ ダウンロード↓ こんばんは、デザイナーのOです。 まずはデモをどうぞლ(╹◡╹ლ)。 先日、「ページ背景に画像をフルスクリーンで表示させてスライドショーを流す」という案件がありました。 これの実装ですが、まっさきに考えたのはやはりjQueryプラグインでした。 この手のプラグインなら探せばそこら中にごろごろ転がってるし、あまり新鮮味が感じられないというか・・ ところが、いつものようにプラグインあさりしてたら、こんな面白い記事が目に留まった！ Fullscreen background image slideshow with CSS3 これ、CSS3のみでフルスクリーンのスライドショーを作るという試みですな！僕的には結構面白くて、特に三番目のデモ、背景
背景、全画面で動画を再生。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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
BackgroundCheck
Camera | a free jQuery slideshow by Pixedelic
http://www.frescojs.com/
finefinefine.jp
jQueryを使ったHTML include | snippet