ここまで動かせる！楽しいcss アニメーションのサンプル集 - コムテブログ
TL;DR 小気味よいアニメーションを用いた Web サイトを国内でも多く見かけるようになってきました。CSS3 により画像編集や Flash が減りメンテナンス性も向上しています。2015 年もアニメーションを取り入れるサイトは増えていくでしょう。 今回は CSS アニメーションを使って、面白い動きができるコードをご紹介します。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 エフェクトサンプル １．アニメのようにテキスト下の画像を移動させる アニメのタイトルのように、テキスト上に画像を載せて画像のみ移動させる方法。background-clipを使って画像をテキストでくり抜き、アニメーションでbackground-positionの位置を右に移動させます。 .type-mask h2 { -webkit-animation: scrollmask 10s ease 1.5s
アニメーション最強の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-
jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法
可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。 まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。 このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。 画面サイズに合わせて高さを指定する3つの方法｜Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー｜Webpark とい
CSS3のアニメーションで「ふわふわ」「ゆらゆら」させる方法や便利なオンラインツール - コムテブログ
TL;DR いざアニメーションを作ろうとすると結構面倒ですよね。できれば勉強しながら便利なツールを使ってアニメーションを作りたいところ。今回は CSS3 のアニメーションで「ふわふわ」させたり「スカッシュ」させる方法や便利なオンラインツールをご紹介します。 アニメーション１２の基本原則を確認 こちらは「何か動きを出してくれ」と依頼された時に見ておきたい、ディズニーによって開発されたアニメーションの１２の基本原則（12 basic principles of animation - Wikipedia）デモですが、CSS のみでこういった動きやアニメーションを実現できたら楽しいですよね。ロゴやボタン、イラストなどの一部に使ったら一味違うアイキャッチになるかもしれません。 The illusion of life from cento lodigiani on Vimeo. THE ILLUS
動きがなめらかなアニメーションライブラリ「anime.js」を使ってみた！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうでもです、お久しぶりです、はやちですよ₍₍ (ง ˘ω˘ )ว ⁾⁾ 今回はなめらかなアニメーションを再現できるライブラリ「anime.js」を紹介します(˘ω˘)👆 導入方法 それではさっそく、導入方法からご説明します。 まず、ソースはGitHubで公開しているので、こちらをダウンロードしてください。 https://github.com/juliangarnier/anime#specific-animation-parameters ダウンロードしたら、anime.min.jsを読み込みます。 <script src="anime.min.js"></script> タスクランナーをお使いの方は、 npm install animejs または bower install animejs でインストールして、 使用するjsファイルに import anime from 'ani
コピペで使える！マテリアルデザインなUIアニメーション | UX MILK
近年、UIにおけるアニメーションやインタラクションの重要度が増していますが、それらをデザインしたり実装する際、様々なものを参考にすると思います。 実在するアプリもさることながら、DribbbleやBehanceなどのポートフォリオサイトではデザインコンセプトとしてアップロードされているものも多く、参考になるものはたくさんあります。 中には独創的なものもあって、実用性に欠けると感じるようなものもあるかもしれませんが、それでも固定概念を覆す機会になったり、断片的にインスピレーションを得たりもできますし、何よりも、見ていて楽しいものです。 今回は海外のUIコンセプトをたくさんストックしているMaterialUpからいくつかの作品をピックアップしてご紹介していきます。MaterialUpはその名のとおりマテリアルデザインの文脈を組んだ作品を多くそろえているサイトです。 そして多くのGIFだけのサイ
ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ - CSS Animation
ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ フロントエンド・デザイナーやデベロッパーは、スタイリングや配置、またデザイン性の良いサイトを作成するために CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）を利用します。しばしばページに変化（英: Transition）やアニメーション（英: Animation）を加えるために CSS を利用しますが、まだまだ開発する余地がありそうです。 アニメーションは、訪問ユーザーにとってデザインをよリ理解しやすく、ためになる情報を伝える強力なツールとなるでしょう。ウェブサイト制作で活用でき、よりパワフルな使い方ができる基本原則を今回はご紹介します。 ディズニー社の現場で長年培われた、アニメーションの基本原則 12 個（英: 12 Principles of Animation）
初心者にもコピペで使えるCSSジェネレーター8個 | 楽天ティップスRakutenTips
web初心者やなるべく楽したいwebデザイナーさんにも嬉しいコピペで簡単に使えるCSSジェネレーターをご紹介。 CSS Generator 13種類のCSSを自動生成してくれる楽チンジェネレーター。対応ブラウザも表示されて分かりやすいです 種類：(border Radius, Box Shadow, Text shadow, RGBA, @font face, Multiple Colums, Box Resize, Box sizing, outline, transition, transform, flexbox, gradient) CSS EASING ANIMATION TOOL transitionアニメーションツールはアニメーションの時間と動きをグラフで調節できるのあが感覚でやれて使いやすい。見た目の動きが自分の好みとマッチしたら表示されているCSSをコピーして使うだけ。こ
実践 Swift UIViewアニメーション PART I | 株式会社メイプルシステムズ
こんにちは、最近ずっと Swift で iPhone のアプリを作ってる渡部です。 まだまだ分からない事が色々でてきて中々面白いです。 iPhoneのアプリを作っているとよく出てくるのが、UIViewのアニメーション。 対象Viewの移動や縮小・拡大をする際にアニメーションさせると、一気にいい感じのアプリになります。 UIViewのアニメーション関連のメッソッドは下記の７種類あります。 【アニメーション】 １. UIView.animateWithDuration 【トランジション】 ２. UIView.transitionWithView ３. UIView.transitionFromView 【キーフレームアニメーション】 ４. UIView.animateKeyframesWithDuration ５. UIView.addKeyframeWithRelativeStartTim
Objective-Cのみで4種類の画面遷移アニメーションを実行する方法 - 廣川政樹の開発ブログ - Dolice Lab
Objective-Cのみで画面遷移をアニメーション付きで実行するサンプルを以下に作成しました。 サンプルダウンロード https://github.com/masakihirokawa/objc-modal-transition-style 必要な手順 1. ヘッダファイルに遷移先 ViewControllerのヘッダインポート
cocos2dの基礎 アクションを使う - CCAnimateとstopAction. | thaty
前回まででかなり複雑なアクションを組めるようになったと思います。今回は発展編、っていうか残りの知っておくべきことといったほうがいいでしょう。次の2点を解説していきます。 画像を切り替え、パラパラ漫画のようにアニメーションにする方法 アクションを途中で止める方法 パラパラ漫画のようなアニメーションを作る方法 アニメーションを描画するためには、まずそのアニメーションに使いたい画像をすべて登録しなければなりません。これらをセットにし、アクションクラスへ渡してやります。 このセットを作るためにcocos2dではCCAnimationクラスが用意されており、このクラスのオブジェクトに、”どの画像を使うか”、”何秒ごとに画像を切り替えていくか”、”何回ループさせるか”などを登録します。 アニメーションオブジェクトを今度はアクションクラスのCCAnimateに登録します。こうすることで作成したアニメーシ
プラグインを使わずに、かんたん実装できるjQueryマウスオーバーアニメーションのまとめ | ニトなび
ここのところ少しブログをリニューアルしたのですが、過去に導入してほとんど活躍していないjQueryマウスオーバーアニメーションを外しました。しかし、なんかせっかく実装したものを外しただけでは無意味なので、今後再導入するときの為に、スクリプトを書きとめておく事にしました。 マウスオーバーアニメーションの種類 オンマウスで画像を切り替えるアニメーション フェイドさせながらテキスト色を変化させるアニメーション フェイドさせながら背景色を変化させるアニメーション テキスト（画像）を横にピコッとずらすアニメーション 画像をボワ～と大きく変化させるアニメーション 画像を右から左へスライドさせ入れ替えるアニメーション 画像をクルッと縦に回転させるアニメーション ※jQuery導入方法の基本は過去にこちらの記事に書きましたのでご参考下さい。 オンマウスで画像を切り替えるアニメーション DEMO ⇓ 1.
jQueryのanimateで自由にアニメーションできるようになろう
jQueryのanimateで自由にアニメーションできるようになろう jQueryにはアニメーションをするための機能がいろいろとありますが、ここでは「animate」メソッドの扱い方をご紹介いたします。 投稿日2011年12月27日 更新日2011年12月27日 動かす前の準備 jQueryの前に動かす要素をhtml&cssで作成しておきましょう。 html <div id="box"></div> css #box { width: 100px; height: 100px; background: #3399FF; } jQueryコードを書くときの基本的な形は次のようになります。 javascript <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.m
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3のtransition-timing-functionの値、cubic-bezier()に関して | KnockKnock
CSS初心者でも簡単！画像をホバーするとコンテンツをさまざまなアニメーションで表示するスタイルシート -imagehover.css
GitHub - facebookarchive/pop: An extensible iOS and OS X animation library, useful for physics-based interactions.
GitHub - splhack/Hello-LWF-UIKit: Hello LWF for C++ with UIKit renderer
GitHub - theguildjp/GLDTween: SuperHandy Animation Engine
