SVGとjQueryで絵を描いているようなアニメーションを実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもお久しぶりです。 フロントエンドエンジニアのはやちです( ˘ω˘)✌ 最近『天空のクラフトフリート』というソーシャルゲームにハマっております。 もともとは弊社のエンジニアの何人かに誘われてDLしたのですが、みなさん最近ログインしている様子がなく、もくもくとひとりでミッションをこなし、練り上げております( ∵ ) まけないひとりたのしい、強くなる✌(´ʘ‿ʘ｀)✌ さて、今回はSVGで絵を描いているようにアニメーションを生成してくれるサイト、LAZY LINE PAINTERの使用方法をご紹介します。 SVGとは Scallable Vecter Graphocs（スケーラブル・ベクター・グラフィックス）の略で、XMLをベースとした二次元ベクターイメージの画像形式のことです( ˘ω˘)☝ SVGはjpgの様にimg要素で扱ったり、cssで色を変えたり背景画像として扱ったりできます( ˘
任意の要素を3D回転させ、立体的に見せる国産のjQueryプラグイン・TURNBOX.js
任意の要素をアニメーションエフェクトで立体的に見せる、というスクリプト・TURNBOX.jsのご紹介。フラットなデザインと相性良さそうです。 要素に立体的なアニメーションエフェクトを与えて、3DなUIにする事ができます。フラットなデザインに使って欲しいとの事です。開発者さんはNOHTさんという日本の企業さんなので疑問があった場合でも連絡が取りやすいので安心ですね。 動作サンプルです 他にもアップロードのローディングに使えたりいろいろ応用幅が広い印象です。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="turnBox.js"></script>↑ 本体とプラグインを読み込みます。 $(".foo").
[CSS]ぼよよーんと気持ちいいアニメーションでエレメントをページに表示させるスタイルシートのテクニック
パネルを構成する画像、ラベル、見出し、テキスト、そして全体をそれぞれ個別のタイミングでぼよよーんと気持ちよく弾むアニメーションで表示するスタイルシートのテクニックを紹介します。 使いどころは限られるけど、こういうの好き。 bounceIn animated 実装はこんな感じになります。 HTML HTMLは、画像、ラベル、見出し、テキスト、ラッパーの5つで構成されています。 <div class="cu-card animated bounceIn"> <div class="cu-card-image animated second bounceIn"> <img src="http://placehold.it/640x360/99ff99/ffffff" /> <div class="cu-card-label-group animated third bounceIn"> ラベル
画像をフルスクリーンに拡大できるギャラリー作成jQueryプラグイン「fullsizable」:phpspot開発日誌
jQuery fullsizable by MSchmidt 画像をフルスクリーンに拡大できるギャラリー作成jQueryプラグイン「fullsizable」。 HTML5のフルスクリーンAPIなども使ってLightBoxの代替として大きい画像を楽しむサイトに使えそうなプラグインです。 関連エントリ Google画像検索風のイメージギャラリーが作れる「jQuery.GI.TheWall.js」 レスポンシブ対応でCSS3アニメーションを使った超クールギャラリー実装プラグイン「S Gallery」 レスポンシブでPinterest風レイアウトのギャラリーが作れるjQueryプラグイン「Galereya」 新Flickr風のギャラリーが作れるjQueryプラグイン「Justified Gallery」
[CSS]背景を固定させ、カーテンをあげるようにコンテンツを次々にスクロールで表示させるテクニック
ブラウザの高さいっぱいに表示した写真画像とベタ塗り背景のコンテンツを交互に配置した縦長ページをスクロールした際、写真画像の背景を固定表示させ、カーテンをあげるようなスクロールエフェクトを実装するスタイルシートのテクニックを紹介します。 スクリプト無しなのでスクロールのもっさり感がなく、非常にさくさく動作します。 Alternate Fixed & Scroll Backgrounds デモ 実装 ファイルのダウンロード デモ デモはChrome, Safari, Firefox, Operaなどのモダンブラウザ、IEは9+でご覧ください。 エフェクトにスクリプトを使用していないので、スクロールも快適です！ 少しスクロールしたところ 写真画像の背景は固定表示で、コンテンツとベタ塗りだけがスクロールします。 実装 HTML HTMLはシンプルで、main要素をラッパーに、div要素で写真画像と
次のプロジェクトで使いたい、CSS3からSVGまでアニメーションを実装するスクリプトのまとめ
最近のウェブやスマフォのページで使われている効果的で面白いさまざまなアニメーションを実装できるスクリプトを紹介します。 スクロールに連動してさまざまな要素がアニメーションで表示されたり、ページを表示する時にふわっとさせたり、画像にSVGでブラーをかけてテキストを載せたり、物理演算エンジンで慣性を楽しんだりなど、デモを見るだけでもかなりいい刺激がもらえるスクリプトばかりです。 Agile Agile -GitHub SVGやWebGLを使用せず、JavaScriptでCSS3アニメーションを生成するライブラリ。デスクトップの各ブラウザ対応だけでなく、スマフォやタブレットにもパフォーマンスが最適化されています。キーフレームやトゥイーンを使ったアニメーションが得意です。
知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ
作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動する効果 ５．異なるタイミングを設定できる ナビゲーション・メニュー ６．多階層 ドロップダウンメニュー ７．多階層 効果つき ８．スマホではドロップダウン ９．スマホではセレクトメニューに １０．Amazon風 メガドロップダウンメニュー １１．横スライド １
アイテムをクールにアニメーションしつつフィルタ・ソートが出来るjQueryプラグイン「MixItUp」:phpspot開発日誌
MixItUp アイテムをクールにアニメーションしつつフィルタ・ソートが出来るjQueryプラグイン「MixItUp」 これはなかなか汎用性があって便利そう。デモサイトではレスポンシブにもなっていて、タッチデバイスでも快適に使えそうです。 ブログ、ポートフォリオサイトなど、実装すればよりモダンでクールなサイトに仕上がりそうです。 関連エントリ 画像表示をレスポンシブ対応にするjQueryプラグイン「Data Img」 レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 レスポンシブでタッチフレンドリな軽量LightBox実装jQueryプラグイン「Image Lightbox」 クールに実装できるレスポンシブなモーダルダイアログ「Remodal」 レスポンシブサイト用レイアウトフレームワーク「Grid」 レスポンシブかつフラットなソーシャルボタンを実
[JS]指定した要素内いっぱいに背景画像を最適に配置するシンプルなスクリプト -Wallpaper
幅480pxで表示 Wallpaperの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="js/jquery.bp.wallpaper.js"> Step 2: HTML HTMLは通常通りで、背景画像を配置する要素は指定できるようidなどを加えます。 <header id="element"> ヘッダ </header> 複数箇所を適用する時は、classの方が便利です。 Step 3: JavaScript jQueryのセレクタで要素を指定し、sourceに画像を指定し、スクリプトを実行します。 $("#element").w
GoogleMapを使って場所の選択や追加、削除、検索を可能にするjQueryプラグイン「mappy.js」:phpspot開発日誌
mappy.js - jQuery plug-in for Google Maps and Places API integration GoogleMapを使って場所の選択や追加、削除、検索を可能にするjQueryプラグイン「mappy.js」 利用者がマップに情報を追加したり、追加された情報を選択したり、検索したりするUIが作れます 地図情報と絡めたようなサービスを作る際に活用できそうです。 関連エントリ Googleマップを好みの色にカスタマイズできるスタイルまとめ「Snazzy Maps」 素早く簡単にGoogleマップを導入できるjQueryプラグイン「initmap.js」 2Dの地図をリアルな3Dにして3Dマップを作れるPhotoshopアクション
超カッコイイ立体的なメニューを実装したデモ:phpspot開発日誌
Perspective Page View Navigation | Codrops 超カッコイイ立体的なメニューを実装したデモ。 ページがあって、クリックすると次のようにページが傾いてメニューが表示されるというデモです。 デザインもフラットでクール。 数年後のWEBではこうしたデザインは当たり前になっているのかもしれませんね。 関連エントリ スマホでも多階層のメニューが作れるレスポンシブなjQueryプラグイン「slimMenu」 レスポンシブ対応のメガメニュー実装jQueryプラグイン「Accessible Mega Menu」 ページ上で独自の右クリックメニューを作れるjQueryプラグイン「contextMenu.js」 アコーディオン型のシンプルな階層メニューが作れるjQueryプラグイン「navgoco」 レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Nav
footerをウィンドウ下部に固定する『footerFixed.js』
footerをウィンドウ下部に固定する『footerFixed.js』 footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。 フッターをコンテンツの内容量にかかわらずwindow下部に表示させるためのjsライブラリです。 サンプル 設置方法は head要素なのでfooterFixed.jsを読み込みます。 <script type="text/javascript" src="./footerFixed.js"></script> ウィンドウ下部に固定したい要素にid属性「footer」を付けます。 これでその要素をウインドウの下部に表示させることが可能です。 (ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です
レスポンシブでPinterest風レイアウトのギャラリーが作れるjQueryプラグイン「Galereya」:phpspot開発日誌
Galereya. jQuery gallery. レスポンシブでPinterest風レイアウトのギャラリーが作れるjQueryプラグイン「Galereya」 PCでもスマホでも使えるPinterest風ギャラリーが作れるjQueryプラグイン。サンプルの画像は若干気持ちが悪いですが、使う分には問題ないですね。 カテゴリ分けしてフィルタリングも可能っぽい。 関連エントリ CSSで設定ができるPinterest風レイアウト実装ライブラリ「Salvattore」 ドラッグ＆ドロップで再編成できるPinterest風レイアウト作成プラグイン「jQuery.Shapeshift」 ダイナミックなタイル状レイアウトを実現できるjQueryプラグイン「Freewall」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
雨粒が落ちて水面に見立てたブロック要素が揺らぐエフェクト「Raindrops.js」:phpspot開発日誌
タイトルヘッダーをフルスクリーンにしてクールにするチュートリアル:phpspot開発日誌
uibox.in
これはカッコイイ！アイテムを浮かせて斜めにスライドさせるコンテンツスライダー -Tilted Content Slideshow
Flatis
プラグインやチュートリアル 25
Loading...
