Hover.css - A collection of CSS3 powered hover effects
2D Transitions Grow Shrink Pulse Pulse Grow Pulse Shrink Push Pop Bounce In Bounce Out Rotate Grow Rotate Float Sink Bob Hang Skew Skew Forward Skew Backward Wobble Horizontal Wobble Vertical Wobble To Bottom Right Wobble To Top Right Wobble Top Wobble Bottom Wobble Skew Buzz Buzz Out Forward Backward Background Transitions Fade Back Pulse Sweep To Right Sweep To Left Sweep To Bottom Sweep To Top
Javascriptのアニメーション処理を高速化するプラグインVelocity.jsの使い方 ｜ Tips Note by TAM
今回はjQueryのanimate()に比べて高速で高機能なプラグイン「Velocity.js」について調べてみました。 ■Velocity.js（公式/記事作成時最新バージョン 1.2.2） http://julian.com/research/velocity/ ■GitHub https://github.com/julianshapiro/velocity ■デモギャラリー http://codepen.io/collection/tIjGb/ Velocity.jsの主な特徴 animate()よりアニメーション処理が高速。 animate()と書き方に互換性がある。（velocity()） jQueryを読み込んでいなくても使用できる。（使用しない場合はIE8はサポート対象外） モック機能がある。 animate()よりオプションが柔軟で豊富。 ... Velocity.jsの
アニメーション最強のVelocity.jsの使い方 - Qiita
はじめに 今話題のVelocity.jsについて初歩の初歩だけまとめました。 ※追記：↓対抗馬のanime.jsについて記事書きました※ アニメーションライブラリ決定版か!?anime.jsで軽量・軽快に実装！ Velocity.jsとは jQueryのプラグイン。 $.animateと互換性を持ち、さらに高機能で非常に軽快なアニメーションをする。 アニメーション技術補足 jQuery Animation 便利だが重い。コマ落ちし過ぎ。 CSS Transition, CSS Animation 軽いが、アニメーションを繋ぐなどが出来なかったりなど使い勝手が悪い。 結局、JavaScriptを頼らないと使い物にならないことが多い。 Transit.js 有名なアニメーションライブラリのひとつであるjQueryプラグイン。 CSS Animationを制御しているため、軽快。 そして、3d-
アニメーションを高速化する「Velocity.js」を使ってみた。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、CTOのづやです。 今更ですが、jQueryのプラグインでアニメーションを高速化してくれる「Velocity.js」を使ってみました。 今回は、簡単な使い方をまとめたのでご紹介したいと思います。 まずは準備から http://julian.com/research/velocity/ 上記の公式ページにjQueryやtransitとのアニメーションの比較をできるデモがありますが、他よりかなり軽快に動くようです。モバイル対応もいい感じらしいですよ。 使うときは、ソースをとってくるか、用意されているCDNなどからVelocity.jsを読み込みます。 <!-- 今回はjQueryも読み込む --> <script src="//code.jquery.com/jquery-2.1.3.min.js"></script> <!-- CDNから読み込んでみる --> <script s
jQuery.Deferredでわかりやすく順番にアニメーションする方法 | スターフィールド株式会社
以前の記事(コチラ→jQueryで順番にアニメーションする方法を考える)で、コールバック関数とdelay()を使って、順番にアニメーションする方法をご紹介しましたが、 今回はjQuery Defferdを使って、処理する順番をよりわかりやすくしてアニメーションする方法をご紹介いたします。 jQuery Defferdの使い方については、コチラのサイトを参考にさせていただきました→「爆速でわかるjQuery.Deferred超入門」 前回の方法を使った場合、並べるアニメーションの数が少ない場合は問題ありませんが、 並べるアニメーションの数が増えてきた場合は、 コールバック関数の中にコールバック関数があるという入れ子の状態が多重になり、 とてもプログラムとして見にくいものとなります。 また、順番を入れ替える必要が出てきたときにも、書き換える作業が煩雑になってしまいます。 その問題を解決してくれ
jQuery不要でスクロールにあわせて要素をアニメーションで表示するスクリプト -WOW.js | コリス
ページ下部にもたくさんのアニメーションが！ アニメーションはAnimate.cssを使用しているので、さまざまなものが利用できます。 どのようなアニメーションががあるのか、実装方法など、当ブログで以前紹介した記事をご覧ください。 classを加えるだけで多彩なアニメーションが簡単に使用できるスタイルシート -Animate.css WOW.jsはデモ以外にも、他のサイトで実際に使用されているさまざまな例があります。 どのサイトもアニメーションが楽しく、とても印象的です。 Stream Line Icons WOW.jsのつかいかた Step 1: 外部ファイル 当スクリプトを</body>の上、Animate.cssをhead内に外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/libs/animate.css"> </
Background image zoom-out effect
I would like to achieve an effect where the site loads with the background "zoomed-in". The background images should gradually zoom out after the document is ready. I decided to use an absolute positioned element for my background: HTML: <div class="intro"> <div class="intro_bg"></div> </div> CSS: .intro { width: 100vh; height: 95vh; } .intro_bg { width: 140%; height: 140%; position: absolute; top
ダイナミックなアニメーションでズームイン・ズームアウトできる「Zoomooz」
Comment Zoomoozは、各要素をダイナミックなアニメーションでズームイン、ズームアウトしてくれます。 しかしIEとFIREFOXでは表示が異なるため、いつか修正したいところ。 Download Zoomooz http://janne.aukia.com/zoomooz/
4時間で学ぶ Adobe Edge Animate CC［基礎編］
Adobe Edge Animate CC 基礎編は、6時間・全21回のコースになっており、体系的にじっくり学べるように構成されています。 Adobe Edge Animate CC 2014は、タイムラインベースのウェブコンテンツ制作ツールです。ウェブサイトの広告や動的なインフォグラフィック、ライトウェイトなウェブアプリ、実際に動くプロトタイプなどの作成に適しています。 コーディングなしで使えますので、スクリプトに詳しくないデザイナーやアーティストでも、自分のアイデアを具現化できます。モバイルに対応したコンテンツを直感的に作成できる大変優れたツールです。JavaScriptのスキルがある人なら、高度なウェブアプリケーションをつくることも可能です。 タブレットやスマートフォンでも学習することができます。ビデオは、小さな画面でも見やすいようにズーム処理を追加しています（※素材データはパソコン
コラム｜株式会社プロネクサスのweb制作部門レインボー・ジャパン
平日10：00〜19：00（土日祝日を除く）営業、パートナー応募のお問い合わせはお受けしておりません。
(K)ロールオーバー時に画像が拡大したり回転したりするCSS3を試した | web(K)campus|WEBデザイナーのための技術系メモサイト
ブログサイトでアイキャッチ画像にマウスを合わせると、画像が拡大するアニメーションがあります。 CSS3の「transform:」を使うことで、比較的簡単にアニメーション効果を実現できます。そんな訳で今回はCSS3を使って画像をロールオーバーした時に画像が拡大するアニメーションの備忘録 「transition:」と「transform:」を設定 「transform: scale();」プロパティを設定して、拡大させて 「transition: transform」でアニメーション速度の設定をします。 【HTML】 <div class="scale_anime"> <img src="img/img01.jpg" alt="大きくなる画像"/> </div> 拡大しても、横と縦幅が動かさないために＜img＞を＜div＞で囲ってます。 【CSS】 .scale_anime { width:
CSS3 アニメーションについてのメモ | Web Design Leaves
CSS3 アニメーションについてのメモ CATEGORY: HTML/CSS | TAG: Compass, Sass, アニメーション 2014年4月3日 CSS3でアニメーションを実装する方法は以下の2種類がある。 transition プロパティでの定義 animation プロパティでの定義 Transition 始点終点の2点間のアニメーション機能を提供 （始点から終点までの2点間のアニメーションしか行えない：設定がシンプル） 設定時間の中でアニメーション中の変化を自動的に設定し、終了後に自動で逆のアニメーションで元に戻る（hover で動かすロールオーバーなどが簡単に設定できる） ループの設定不可 Animation 設定時間の中で開始・終了するタイミングや値の変化具合などを細かく設定でき複雑なアニメーションを実現可能 アニメーション中のキーフレーム（keyframes）と呼ば
ri-mode.com - このウェブサイトは販売用です！ - ri mode リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
動きがユニークで参考になるメニュー系のUIアニメーションまとめ10選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです、フロントエンドエンジニアのはやちです( ˘ω˘)✌ 最近、編集長の朽木さんが一部の方々から「くーにゃん」と呼ばれているのですが、私から「くーにゃん」と呼ぶのは馴れ馴れしすぎるので「くーにゃんさん」と呼んでしまう次第であります。 はい(◞‸◟) さて、今回は動きが面白いUIを集めてみました！ 1つ1つアニメーションを確認しながらご覧いただけるとうれしいです( ˘ω˘)☝ 今回は紹介するアニメーションは全部で10個です( ˘ω˘)☝ 1. GIF Sticker App – Dribbble https://dribbble.com/shots/1719325-GIF-Sticker-App サイドメニューが斜めに表示するパターン、要素もくるくる動いております( ˘ω˘)☝ 2. Home Guard 02 – Dribbble https://dribbble.com/shots
YouTubeのURLをコピペするだけでGIFアニメが作れる「GIF YouTube」
YouTubeにアップロードされているムービーのURLを貼り付けるだけで1～10秒のGIFアニメ画像がカンタンに作成できるウェブサービスが「GIF YouTube」です。 GIF YouTube | Make Animated GIFs from Youtube https://gifyoutube.com/ GIF YouTubeで作成してみたGIFアニメがこちら。YouTubeのURLをコピペしただけで、あとはほとんど何もしなくてもカンタンにファイルを作成することができました。(画像クリックでGIFアニメ再生：容量1.48MB) GIFアニメの作り方はごくカンタン。まずはトップページにGIFアニメ化したいYouTubeのURLをコピー＆ペーストし、「CREATE GIF」をクリック。 ページが読み込まれてムービーの再生が始まるので、GIFアニメにしたい部分の最初と最後を指定します。再生
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
anime.js - a Collection by Julian Garnier on CodePen
Redirecting to Animate.css
Learn | Adobe Creative Cloud
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog
スクロールに応じて要素がアニメーションする、視差効果（パララックス）を取り入れたWebデザイン例とTipsいろいろ - かちびと.net
