SVGとjQueryで絵を描いているようなアニメーションを実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもお久しぶりです。 フロントエンドエンジニアのはやちです( ˘ω˘)✌ 最近『天空のクラフトフリート』というソーシャルゲームにハマっております。 もともとは弊社のエンジニアの何人かに誘われてDLしたのですが、みなさん最近ログインしている様子がなく、もくもくとひとりでミッションをこなし、練り上げております( ∵ ) まけないひとりたのしい、強くなる✌(´ʘ‿ʘ｀)✌ さて、今回はSVGで絵を描いているようにアニメーションを生成してくれるサイト、LAZY LINE PAINTERの使用方法をご紹介します。 SVGとは Scallable Vecter Graphocs（スケーラブル・ベクター・グラフィックス）の略で、XMLをベースとした二次元ベクターイメージの画像形式のことです( ˘ω˘)☝ SVGはjpgの様にimg要素で扱ったり、cssで色を変えたり背景画像として扱ったりできます( ˘
jQueryで行うFlashみたいなスプライトアニメーションのチュートリアル:phpspot開発日誌
jQuery & CSS Sprite Animation Explained In Under 5 Minutes | AddyOsmani.com | Where Web Businesses Grow jQueryで行うFlashみたいなスプライトアニメーションのチュートリアルが公開されています。 iPhone向けのサイト等ではFlashは使えませんが、jQueryによって実装すればアニメーション機能も実装出来ますね。 デモページ jQueryのコードが意外にシンプルです。 数年後のアニメーションはどうなっているのでしょうか。 関連エントリ アニメーションの残像が残るjQueryアニメーションチュートリアル キャラクターとバックグラウンドをアニメーションさせられるjQueryプラグイン「Spritely」 ブロック内の背景画像をスクロールアニメーションするjQueryサンプルプログラ
jQuery入門講座 使い方
索引 ├ 使い方 目次 └ バグノート(1) 1章：jQuery入門 ├ jQueryのメリット ├ readyイベント ├ オブジェクトについて ├ メソッドについて ├ 情報の取得 ├ イベント(1) ├ イベント(2) └ 初歩なサンプル 2章：jQuery基礎 ├ thisについて(1) ├ thisについて(2) ├ jQueryとDOM要素 ├ 簡単な演出 ├ thisから辿る ├ 汎用的なアニメ(1) ├ 汎用的なアニメ(2) ├ アニメの停止 ├ アニメを管理する仕組み └ 汎用的なアニメ(3) 3章：jQuery発展 ├ イベントフロー(1) ├ イベントフロー(2) ├ イベントフロー(3) ├ 画像のプリロード ├ jQueryの高速化 └ メソッドチェーン 番外編：研究 ├ イベントを外す ├ cssアニメとの連携(1) ├ cssアニメとの連携(2) ├ cssア
超リアルな単語帳っぽいものを作るCSS3＋jQueryチュートリアル:phpspot開発日誌
Swatch Book with CSS3 and jQuery | Codrops 超リアルな単語帳っぽいものを作るCSS3＋jQueryチュートリアル。 次のような綺麗なデザインの単語帳っぽいものを実装するチュートリアルです。クリックすればインタラクティブに回転等を加えながら動くのが特徴です。 CSS3によって秀逸にデザインされているため、質感はかなり美しく、更にアニメーション等の動きが加わることでよりリアルになってます。 若干動きがもっさりしているようですが、一度見ておいて損はないデモです 一昔前は、ちょっとWEBのデザインが上手であればプロに間違われるなんてこともありましたが、こういうのが当たり前になってくると、プロとアマの差がどんどん広がってくるのかもしれませんね。 関連エントリ CSS3でシャレオツなリストを作るチュートリアル コンテンツをアニメーションさせつつ切り替えるタブを
jQueryのアニメーション関連いろいろまとめ :: 5509
jQueryを使えば単体でもフェードやスライドなどのアニメーションを誰でも簡単に使えますが、animateメソッドを使うとより便利に凝ったアニメーションを実行することができます。animateメソッドを使って何かを作るときに役立ちそうなチュートリアルと、すぐ使いたい人向けのプラグインを集めました。 TIPS/チュートリアル プラグイン/animateメソッドの拡張など プラグイン/単体で使えるものなど プラグイン/スクロール系 TIPS/チュートリアル animate(params, options) http://semooh.jp/jquery/api/effects/animate/params,+options/ まずはjQuery animateの基本を押さえましょう。 Using jQuery Stop http://css-tricks.com/examples/jQuery
パララックス効果を使った秀逸なjQueryスライダー実装チュートリアル＆サンプルDL:phpspot開発日誌
Parallax Slider with jQuery パララックス効果を使った秀逸なjQueryスライダー実装チュートリアル＆サンプルDL スライダーの背景がパララックスを利用していて画像が切り替わる際に奥行きが表現されるというものです。 サンプルのUIも超カッコいいのですが、画像が切り替わった時の奥行き感が素晴らしい。 ちょっと古い記事なんですが、知らなかったのでご紹介です デモはこちら パララックス効果を導入してみたいという方にはいいチュートリアルにもなります 関連エントリ 並べた画像を敷き詰めて超カッコよくするjQueryサンプル 円形で回転するタイマーを実装できるjQueryサンプル 良い感じで動作するニュースティッカー実装jQueryサンプル
[JS]実行のタイミング（開始時間・回数・リピートなど）を簡単に設定できるスクリプト -timing
JavaScriptにはsetTimeout(), setInterval()とタイミングを設定できるメソッドがありますが、より簡単にタイミング（遅延時間・回数・リピートなど）を設定できるjQueryのプラグインを紹介します。 timing — a jQuery plugin [ad#ad-2] デモを例に、スクリプトの使い方を紹介します。 スクリプトの準備 スクリプトを使用するには「jquery.js」と当スクリプトを外部ファイルとして記述します。 ※jQueryは1.2+対応で、.join()使用時は1.7+を。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/<preferred-version>/jquery.min.js"></script> <script type=
フローティングメニューの使い方（スクロールするメニュー）｜クロノドライブ
今回は、ブラウザのスクロールに合わせてするする付いてくるフローティングメニューのご紹介です。 あまり使う機会はありませんが、覚えておくといざというときに便利です。 それでは早速使い方のご紹介 必要なデータを揃える まずは、JQUERY SCROLL FOLLOWから下記ファイルをダウンロードしましょう。 ここではファイル名を下記の通り保存しました。 jquery.js jquery-ui.js jquery.easing.js jquery.scrollfollow.js ディレクトリはこのようになりました（ jsフォルダの中にダウンロードした jsファイルがすべて入っています）。 HTMLからjsデータを読み込む フローティングメニューを使用するHTMLファイルから先ほどダウンロードした jsファイルを読み込みます。 {path}の部分はHTMLファイルからのパスにしてください。
HTML5で色々作るチュートリアル＆チートシート:phpspot開発日誌
25 Useful Html5 Cheat Sheets and Tutorials For Web Developer HTML5で色々作るチュートリアル＆チートシート ギャラリーやcanvas、スライドショー、コンタクトフォーム等色々なものを作るチュートリアルとチートシートなどがまとまっています。 HTML5でテトリスを作るチュートリアルなんかもあります 最近HTML5ネタが多くなって来ました。 ネタに事欠かないのはいいことですが実際に追っていくのは大変ですね 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」 HTML５でブラウザにドラッグ＆ドロップでファイルアップ可能なjQueryプラグイン「jQuery HTML5 Uploader」 HTML5ベースのオー
画像を矩形以外の形状で表示したい人のためのチュートリアル
画像にPNGマスクを使用して、ブラシストローク状、サークル状など、矩形とは異なる形状で表示するチュートリアルを紹介します。 デモページ もう一つのサークル状のデモは、下記ページのギャラリーのサムネイルとして使用されています。 Roundfolio 画像の枚数が少ないのであれば個別に画像を作成してもよいかもしれませんが、このデモのように数多くあると、このテクニックを使用した方がより効率よく実装できます。 [ad#ad-2] 画像の作り方 画像は3種類が必要で、全て同じサイズにします。 ロールオーバー用の画像 ※透過PNG画像 マスク用の画像 ※透過PNG画像 ベースとなる画像 サークル状に使用する画像3種類 制作：HTML, CSS, JavaScript HTML ロールオーバーとマスク用に2つの空span要素を使用します。 <a href="images/gallery-full.jpg
jQueryで背景画像をフルスクリーン表示してスライドショーに出来るやつ色々
気が向いたのでメモ。背景に配置した 画像をフルスクリーンで表示して、更 にスライドショー化できるjQueryのプ ラグインとか。さほど数は無いですけ ど・・・使う可能性があるかもなので 備忘録的にまとめておきます。 タイトル考えるの結構面倒くさいので適当になってきました。語彙が中学生レベルですが気にしないで下さい。 さて、フルスクリーンにした背景をスライドに出来るjQueryいろいろです。ほぼ択一っちゃ択一なんですけど・・・ちょっと出来上がりすぎていじりにくいので他もチェックしたい、という事で調べたものを羅列しておきます。触ったこと無いのもあるのでその程度の記事という事で。 Supersized 定番の高機能プラグインです。IE6では動作しません。スマートフォンでも大丈夫っぽい。多数のオプションも用意されており、FlickrAPIにも対応してるくさいです。ライセンスはMIT/GPLのデュア
PHPを使って画像をアップしてjQueryで切り抜くチュートリアル:phpspot開発日誌
Image Upload and Cropping with PHP and Jquery PHPを使って画像をアップしてjQueryで切り抜くチュートリアルとデモが公開されています。 配布されているプログラムをダウンロードしてプロトタイプとして使って開発効率を高める事もできますし、単に学習用に使うこともできそうです。 実際のサービスで使うにはセキュリティの問題がないかどうかをちゃんとチェックして使いましょう デモページはこちら 関連エントリ PHPでWEBサイトのスクリーンショットを作成するチュートリアル PHPでAmazon SESを使うチュートリアル PHPとGDを使ってCaptchaを自作するチュートリアル
ページを下にスクロールするにつれ表示する「TOPへ」ボタン実装チュートリアル:phpspot開発日誌
Animated Scroll to Top ページを下にスクロールするにつれ表示する「TOPへ」ボタン実装チュートリアル。 ページの上の方にいる場合は必要ないかもしれないボタン。下に行くにつれ表示されることで上に戻れることが分かりやすく、上にいるときは邪魔にならないという使いやすいボタンが作れますね。 jQueryにて実装するチュートリアルとなっており、サンプルのダウンロードも出来るのでいざ実装する際に参考にできそう。 デモページ 最近WEBを巡回していると散見するUIですね。 関連エントリ 指定位置までスクロールするとヒントを表示させられる便利jQueryプラグイン「SlideNote」 スクロールするとAjaxで次の内容をガンガン読んでくれるjQueryプラグイン「AjaxScroll」 カッコ悪いスクロールバーとはオサラバできるjQueryプラグイン「jQuery vScroll」
超カッコいい確認ダイアログをjQueryで実装するチュートリアル:phpspot開発日誌
How to Create a jQuery Confirm Dialog Replacement | Tutorialzine 超カッコいい確認ダイアログをjQueryで実装するチュートリアル 普通、ダイアログというと javascript の confirm とか、その他 jquery プラグインを使って実装されるものが多いですが、これまで見たなかでもかなりのカッコよさのダイアログ実装チュートリアルです。 サンプルのダウンロードも可能。 一見全て画像のようにも見えますが、CSS3を使って綺麗にデザインされています。 ここら辺もこだわりたいという方は参考にしてみるとよさそう。 関連エントリ 効果音付きでアニメーションするクールなダイアログ実装jQueryプラグイン「Float Dialog」 その場でポップアップするクールな確認ダイアログ実装用jQueryプラグイン「jConfirmAc
[JS]省スペースに最適、コンテンツをローテーションで拡大表示するチュートリアル
複数のコンテンツをサムネイルで配置し、ローテーションで打ち出しエリアに拡大表示するフィチャーボックスを実装するチュートリアルを紹介します。 Rotating Feature Boxes デモページ [ad#ad-2] デモでは右側に配置されたサムネイルのコンテンツをクリックすると、打ち出しエリアにアニメーションでスライド移動して、全文が表示されます。 ※アニメーションはCSS3で実装されているためChrome, Safariのみで、非対応ブラウザはアニメーション無しです。 デモページ 2番をクリックして、2番が打ち出しエリアに。 [ad#ad-2] ローテーションするフィチャーボックスの実装 HTML 3つのコンテンツはdiv要素で実装されており、それぞれidとclassを付与し、全部をdiv要素で内包します。 <div id="rotator"> <div id="block-1" cl
jQueryでリアルな本をペラペラめくるＵＩ作成チュートリアル:phpspot開発日誌
Moleskine Notebook with jQuery Booklet | Codrops jQueryでリアルな本をペラペラめくるＵＩ作成チュートリアル。 デザインの美しさも素晴らしいのですが、アニメーションしながらめくれる感じもちゃんと出てるところがすごいです。 デモページ jQueryベースというのはあまり見たことがなかったのですが、これを参考に作れそうですね。 CSS3なんかも使われているので、総合的に学習できる資料として役立ちそうです。 関連エントリ Flashで本をペラペラめくる感じのUIを実装する「Dynamic Page Flip v2」 Flashで本をペラペラするUI実装いろいろ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
syboos.jp
CSS3とjQueryでクールな通知バーが作れるチュートリアル | IDEA*IDEA