闇雲にディズニー映画みたいなアニメーションを GUI に実装するのはもうやめよう - Qiita
はじめに 本稿は UI Design Advent Calendar 2015 – 9日目の GUI アニメーションに関する記事です。 アニメーションの12の基本原則と GUI ディズニーの アニメーションの12の基本原則/12 basic principles of animation というのがありまして、要はこの原則に沿ってアニメーションを制作すればまるでそれが生きているかのような動きをする、平たく言えばディズニーっぽい動きになる、というものです。http://the12principles.tumblr.com がとてもわかりやすいので、うちいくつかを転載しておきます。 SQUASH & STRETCH ANTICIPATION FOLLOW THROUGH & OVERLAPPING ARCS ビデオ解説：The illusion of life これらを見ただけでも、『あー、デ
Freebie: Flat Style Squared Preloaders (GIF, AEP, PNG) | Codrops
Freebie: Flat Style Squared Preloaders (GIF, AEP, PNG) A set of really nice and modern animated GIF preloaders by PixelBuddha. The colorful set comes with seven unique square style activity indicators in three sizes and the Adobe After Effects file. Today we are really happy to share a set of creative activity indicators by PixelBuddha with you! You may have seen the first set of the Flat Preloade
進化が止まらない！CSS3アニメーションを簡単に利用できるスクリプトやスタイルシートのまとめ
スクロールをトリガーに要素をアニメーションで表示したり、ページを表示した時にちょっとしたエフェクトを加えたり、ボタンのホバー時に気持ちいいアニメーションを加えたり、CSS3のアニメーションを簡単に加えることができるリソースを紹介します。 Story Box Story Box -GitHub スクロールをトリガーに54種類のアニメーションを簡単に実装できるjQueryのプラグイン。アニメーションは非常に軽快で、デモ：ユニークの派手なアニメーションでも快適です。 ScrollMagic ScrollMagic -GitHub Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、
Grid Item Animation Layout | Codrops
A responsive, magazine-like website layout with a grid item animation effect that happens when opening the content. Today we’d like to share a simple animated grid layout with you. The responsive layout has a sidebar and grid items that animate to a larger content area when clicked. In the first demo the content area fills the grid (inspired by a concept by Virgil Pana) and in the second demo, the
[CSS]重なった複数のパネルを扇状にアニメーションで優雅に開くスタイルシートのテクニック
レッド・イエロー・ブルーの三枚のパネルが重なっており、それをホバーするとそのパネルを扇状に開くスタイルシートのデモを紹介します。 アクションの度に、ぷるっと反動するのが細かい！ Calendar and Clock 実装はけっこう複雑ですが、このインタラクションはかっこいいですね。 日付や時刻の取得、不透明度の変更にJavaScriptを使用していますが、ホバーのアニメーションはスタイルシートで実装されています。 HTML 3つのパネルはdiv要素で、1枚目はノーマル時のカレンダーとホバー時の年と分と日、2枚目はホバー時の時と曜日、3枚目はホバー時の秒と月が要素として配置されています。 <div class="signboard outer"> <div class="signboard front inner anim04c"> <li class="year anim04c"> <sp
どんな動きにするか悩んだときに！UIアニメーションのインスピレーションを得られるサイトまとめ | Goodpatch Blog
皆さんはUIの動きを考えるときに、どんなものを参考にしていますか？いつも簡単にぴったりの動きが思い浮かぶわけではないし、悩んだときに何か参考になるギャラリーサイトなどがあったら便利だと思います。今回フランス人WebデザイナーのWalter Stéphanieさんが“Interface Animations and Transitions: where to get inspiration”というタイトルでUIのアニメーションやトランジションのインスピレーションを得られるサイトを紹介していたので、本人の許可を得て翻訳しました！ （以下”Interface Animations and Transitions: where to get inspiration”の翻訳。） photo credit: Jorge Quinteros via photopin cc UI/UXデザインにおいて、細
サファリの動物達がぼよんぼよんに膨らむアニメーション「Rollin' Safari」 | naglly.com
2013年4月にドイツのシュトゥットガルトで開催されるショートフィルムフェスティバル「ITFS 2013」のプロモーションの為に作成されたアニメーション「Rollin' Safari」です。短編のアニメが4本あります。 サファリに住む動物達がみんな、風船みたいに膨らんでしまったどこかの世界を描いたショートアニメーションです。 ROLLIN' SAFARI - 'Flamingos' - Official Trailer FMX 2013 on Vimeo https://vimeo.com/54943110 ROLLIN' SAFARI - 'The Chase' - Official Trailer ITFS 2013 on Vimeo https://vimeo.com/54943111 ROLLIN' SAFARI - 'Sleeping Beauty' - Official Tra
gifアニメーションで表現した東京23区の区章 | カラフルで「お役所」感が全然ない : きよおと-KiYOTO
6月20 gifアニメーションで表現した東京23区の区章 | カラフルで「お役所」感が全然ない カテゴリ:Awesomeデザイン http://blog.livedoor.jp/clock510/archives/1818437.htmlgifアニメーションで表現した東京23区の区章 | カラフルで「お役所」感が全然ない モーションデザイナーUKYO Inabaさんの作品 東京23区の区章をカラフルでスタイリッシュなgifアニメーションで表現した斬新なアイデア。 普段、目にする状態だといかにも紋章といった感じで堅苦しく、道路標識などで無意識に見ていても、あまり記憶に残らないことが多いですが、これなら興味をもって身近な存在と感じられそうです。（6/21追記：コチラもおすすめ→東京23区のgifアニメに新展開〜 映画のオープニングのようなクールな表現がスゴイ!!） uky0178(UKYO I
CSS3 Animated Media Queries
A new trend in website design is the use of media queries, this is because of the amount of devices that can now access the internet all the websites need to usable on any device type. This is where responsive design comes into action, this is the process of discovering what device the visitor is using so we can change the design to adapt to the visitor.For example if a visitor is using a desktop
Experimental CSS3 Animations for Image Transitions | Codrops
Today we want to share some experimental 3D image transitions with you that use CSS3 animations and jQuery. We’ll be using CSS3 3D Transforms for Webkit only. Today we want to share some experimental 3D image transitions with you that use CSS3 animations and jQuery. We’ll be using CSS3 3D Transforms for Webkit only. Check out the Photo Transitions at the Safari Technology Demos site, some of which
[JS]jQueryを使って、超スムーズなCSS3アニメーションを実装する -jQuery Transit
昨日に続いて、jQueryとCSS3アニメーションのコラボです。 今回紹介するのは、jQueryでCSS3アニメーションを超スムーズにするように助けるプラグインです。 jQuery Transit デモページ [ad#ad-2] jQuery Transitの使い方 jQuery Transitのデモ jQuery Transitの対応ブラウザ jQuery Transitの使い方 「jquery.js」の後に当スクリプトを外部ファイルとして記述します。 外部ファイル <script src='jquery.js'></script> <script src='jquery.transit.js'></script> あとはjQueryの「.animate」の代わり、「.transiton」を使用してアニメーションを実装します。 $('...').transition jQuery Tra
アーティスト鈴木康広さんによるパラパラマンガを公開します | jiku
11.10.17 現在、ワークショップの参加者を募集している「鈴木康広ワークショップーーひらめきを誘発するためのスケッチとパラパラマンガ」。パラパラマンガについて鈴木さんは本誌150号の連載「まばたきの記憶」で触れていますが、百聞は一見にしかずということで、鈴木さんのつくったパラパラマンガをご紹介します。鈴木さんによれば、この動画は、描きためたもののほんの一部にすぎないそうです。 （動画が表示されない場合は、こちらへ） （動画が表示されない場合は、こちらへ） （動画が表示されない場合は、こちらへ） ＊ワークショップの詳細については、こちらをご覧ください。
Animatable: One property, two values, endless possiblities
box-shadow ◀ ▶ From: 0 0 black To: 0 150px 10px -50px rgba(0,0,0,.5) Author: @leaverou Tweet
Original Hover Effects with CSS3
Hover Style #1 A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. Read More Hover Style #1 A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. Read More Hover Style #1 A wonderful serenity has taken possession of my entire soul, like these
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Birdbox Studio – Animation Studio
Redirecting to Animate.css
Rotating Words with CSS Animations
Animated Buttons with CSS3
Victor Coulon : Mon blog High Tech
Creative CSS3 Animation Menus