This slider, as seen on the landing page of the FWA, plays with 3D perspective and performs some interesting animations on the right-hand side images. CSS Animations We are using 12 different animations for showing and hiding the items of a slide. The animations are defined by randomly adding data-attributes called data-effect-in and data-effect-out for every slide. Tilted Items The perspective vi

jqFloat.js is a jQuery plugin that able to make any HTML objects appear to be floating on your webpage. It is cross-browser compatibility. Look InsidejqFloat.js is a jQuery plugin that able to make any HTML objects appear to be “floating” on your web page. It helps create simple floating animation and make your websites come alive with these little “floating” object. Have fun with Floating ~ You c

前回の記事『Webデザインの参考にしたい遊び心あふれる「ページトップ」ボタン9個』にならって、jQueryとCSS3アニメーションを使って遊び心あふれる何度もクリックしたくなる「ページトップ」ボタン作成してみました。 Ninjaページトップボタンブックマークバーとスクロールアニメーションを活かしたページトップボタンにしてみました。サンプルページをご覧ください。 サンプルページ » 忍者登場はCSSスプライトアニメーションコマ送りでアニメーションさせるため、1枚のPNG画像に32px×32pxの絵を10個並べました。マウスオーバーした時に、X軸方向に-32pxずつ背景画像がずれることでアニメーションしているように見えます。 .ninja{ display:block; width:32px; height:32px; background:url(images/ninja.png) no-r

このサンプルは、 jQuery Mobileのパネルウィジェットを使用して Facebook風のパネル型のナビゲーションメニューを実装しています。 サンプルを表示したら ヘッダー部右端の[Menu]ボタンをタップします。 メインのコンテンツが左側にスクロールして パネル型のナビゲーションメニューが表示されます。 パネルを閉じるには[X]ボタンをタップします。 メインコンテンツをスクロールさせながら パネルを表示するには「data-display="reveal"」属性を追加します。 メインコンテンツの上にパネルを表示するには 「data-display="overlay"」属性を追加します。 ◆ライブデモを見る（スマホでご覧ください） ⇒　ライブデモを見る（スマホでご覧ください） <a href="#navPanel" data-role="button" data-icon="bars"

Posted: 2012.03.08 / Category: javascript / Tag: jQuery, アニメーション 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-

Google MapのデザインをjQueryで変更する為のメモ書き。Google Map APIとjQueryでGoogle Mapの色合いを変更し、オリジナルのマーカーを付けてみます。こうする事で、既存デザインに合わせたGoogle Mapが出来ます。 今後必要になりそうだったので調べ物をしたついでにメモ書きです。デザインを変更、というと語弊がありますけど、好みの色に変えてみます。 ゴール↓ こんな感じのをjQueryでやろう、みたいな内容です。特に目新しい情報では無いですが。 なんかシャドウ変になっちゃった・・色やマーカーだけでもWebサイトで使用している色にあわせれば地図だけ浮いてしまうような事も無くなるんじゃないかなと思います。 ジオコーディングリクエスト<script type='text/javascript' src='http://ajax.googleapis.com/a

デザインテクノロジスト 松井 健氏 デザインとエンジニアリング、フロントエンドとバックエンド、ソフトウエアとハードウエアといったプロダクト開発のさまざまな軸を手掛けるデザインテクノロジスト。iPhone/iPadアプリ、JavaScript、Ajax、Flash/Flexを用いたリッチアプリケーションの開発を得意とする。新しいテクノロジーを利用し、大規模な企業向けシステムからソーシャルゲームなどを開発している。fullstack.jpではテクニカルディレクターとして活躍 最近のWebアプリケーションは、ネイティブ・アプリケーションに引けをとらないほど高度でインタラクティブな操作性を実現しており、その進化はモバイル向けWebアプリケーションにも影響を与えています。 この変化は、2005年にダイナミックなWebアプリケーションを作る手法として一世を風靡したAjaxの登場がきっかけでした。当時は

$('#要素ID').jPlayer({ /* イベントハンドラ */ ready: function(){ /* 再生するメディアの定義(URLは相対・絶対パスどちらでも) */ $(this).jPlayer('setMedia', { mp3: '/content/media/audio/Q701.mp3', m4a: '/content/media/audio/Q701.m4a', oga: '/content/media/audio/Q701.ogg', /* サムネイル画像 */ poster: 'http://phpjavascriptroom.com/content/media/thumb/poster1.png' }).jPlayer('play'); /* 自動再生 */ }, /* プレロード（デフォルトは'metadata'、プレロードする場合は'auto'） */

この記事は1年以上前の記事のため、内容が古い可能性があります。 メモ MP4（H.264）動画をHTMLに埋め込む場合、下記のようにvideoタグで埋め込むことになるかと思います。 <video src="video.mp4" width="320" height="200" controls preload></video> が、ブラウザによってはH.264をサポートしていなかったり（Firefox）、そもそもvideoタグが利用できなかったり（IE8）で、結局はそれぞれのブラウザ用の動画を用意したり、タグを振り分ける必要がありました。 しかし、それを一気に解決する方法がこちらのサイトに書かれておりました。 IE8でHTML5のvideoタグを使う方法 - [Swb:]渋谷に住むWEBデザイナの備忘録 やり方はとにかく簡単！ スクリプトをダウンロード＆解凍。 apiフォルダのみサーバに丸

こちらが新テーマの記事ページ。上のバーの右側の水玉アイコンをタップするとメニューが開く仕掛けにしてあります。 タップするとこのように右から「にゅっ」とメニューが出てくるように。それほど動きがカクつかないので満足。上の「MENU」というところか「閉じる」をタップすればメニューを閉じる仕様に。 また、最初からCSSも付いてくるので文字を入力するだけでそれなりにカッコイイメニューを作ることが可能です。 「Sidr」実装方法・使い方 <script src="javascripts/jquery.js"></script> <script src="javascripts/sidr/jquery.sidr.min.js"></script> <link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css"

Today we will be making something entirely for fun - a "gravity" gallery. This will be a script that runs a search on Instagram, fetches and displays the photos in a grid, and then uses the Box2D library to simulate physical interactions between them. And all of this in less the 40 lines of JS! Let's see how this is done. Note: This example currently only works in chrome, as the jGravity plugin ha

スマートフォン用に作られたアプリのうち、今年はサークルが広まっています。 同時にフラットデザインなんかと併用して使われることがあり、今回はこうしたサークルデザインのアクセントとして使うことが出来るサークルボタンをご紹介致します。 これはjQueryを利用して、比較的簡単に設置出来るのが利点です。 以下からダウンロード可能。 ClassySocial | Class.PM とりあえずイメージとしては以下の様な。 中心から周りに展開。 ボタンから右へ展開。 今回の紹介されているものは、ソーシャルボタンですが、使い道はいろいろですね。 設置 jQueryお決まりのコレ。<head></head>内に記述。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 続いて、CSS