Googleも推奨！アニメーションライブラリTweenMaxの使い方 入門編 — un-Tech
ごきげんよう。フーミンです。 「JavaScriptでアニメーション作るならTweenMaxが最強だよ」と先輩から教わり早2年。いまだ現役最強（僕の中で）JavaScriptアニメーションライブラリTweenMaxの良さを広めるために、入門編・応用編の全2回に分けてご紹介しようと思います。 TweenMaxとは TweenMaxとは、GreenSock社が開発した超高性能アニメーションプラットフォーム「GSAP」のひとつで、DOMアニメーションに特化したJavaScriptライブラリです。 requestAnimationFrameを使用しているため、jQueryのanimateメソッドを使うより、動作が高速かつ安定しています。 同じようなライブラリにmokichiくんが紹介してくれたVelocity.jsというのもあります。 TweenMaxと同様に動作が高速かつ安定しており、jQuer
TweenMaxでアニメーションさせる - Hatsuka
最近お仕事でTweenMaxというJavascriptのアニメーションライブラリを使用する案件があったので、それについて書こうと思います。 TweenMaxについて 公式ページ Flashを使っていた人にはおなじみのライブラリのようですね。 サンプルページを観ていただければわかるかと思いますが、結構リッチな動きが可能です。 今までは簡単なものであればjQueryでアニメーションを書くことが多かったのですが、TweenMaxのほうが、シンプルに書けます。 また、docsの情報が結構しっかりしている上に開発者の人も結構、頻繁にアップしているのも魅力的の一つです。 今回は基本的な使い方もふまえ簡単なサンプルをあげてみたいと思います。 クラス 使用できるクラスは４つあります。 TweenLite TweenMax TimelineLite TimelineMax TweenとTimelineとがあ
jQueryでCSSアニメーションを実行させる方法｜BLACKFLAG
以前ここでも「CSS3 Transitionプロパティでアニメーションを実行させるパターン【ページロード／マウスオーバー／クリックアクション】」と題して、 CSSアニメーションの実行パターンをいくつか紹介しましたが、 アニメーションの実行制御をCSS側でなくjQueryで操作させる方法が 簡単でいろいろとこの先使えそうだったので紹介してみます。 構成としてはCSS側でアニメーション設定をしておいて jQuery側でコンテンツ要素に対してclassを付けたり外したりさせることで その要素に対してアニメーション制御をする形になります。 例えばHTMLには 以下のようなidを付けたdivを用意して、 ◆HTML <div id="action"></div> CSS側では 以下のようにアニメーションをセットします。 ◆CSS #action{ top: 0; left: 0; width: 50
ウェブサイト制作に欠かせない、アニメーション人気テクニック4つまとめ
機能的で楽しいアニメーションは、現代のウェブデザインに欠かせない重要な要素のひとつです。論理的に考えられたアニメーションを活用することで、ウェブサイトに大きな違いを生み出します。アニメーションはステータスを伝えたり、注意を引くことはもちろん、ユーザーの行った行動の結果をうまく表現できます。 今回は、より快適なウェブサイト体験を実現するために加えたい、アニメーションの制作テクニックをサンプル例と一緒に詳しく見ていきましょう。 進行状況（英: Progression） ローディング・アニメーション ウェブデザインに使われるアニメーションでもっとも一般的なもので、ページの読み込みに関係しています。ローディング・アニメーションは、コンテンツを読み込むまでの待ち時間をユーガーが短く感じられるように工夫されています。 シンプルな動きがローディング・アニメーションにとって最適で、音や余計なエフェクトなど
jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法
可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。 まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。 このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。 画面サイズに合わせて高さを指定する3つの方法｜Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー｜Webpark とい
コピペで素敵ウェブサイトを表現する、HTMLコードスニペット30個まとめ
面白デザインで差をつける、コピペで使える素敵なHTMLコードスニペットを、コード共有サイトCodePenから厳選してまとめています。 今後のウェブサイト制作で活用したい、一歩先を進んだ最先端のテクノロジーを駆使した、コードスニペットが揃います。先日制作から30周年を迎えたばかりの、あの映画をモチーフにしたデザインも数多く公開されていました。 詳細は以下から。 コード共有サイト「Codepen」から厳選した、素敵なHTMLスニペットまとめ サンプルが動いていない場合は、「Return」ボタンをクリックすることで再生がはじまります。 Responsive SVG Walk Cycle with GSAP レスポンシブに対応する、SVGを使ったスプライトテクニックで、なめらかに歩くアニメーションを実現しています。 See the Pen Responsive SVG walk cycle wit
CreateJS入門サイト - ICS MEDIA
このサイトはHTML5 Canvasのフレームワーク「CreateJS」の入門サイトです。初学者から学べるように基本的なCreateJSの使い方から解説しつつ、発展的な内容までまとめています。このサイトを通して、webでのインタラクションデザインについて学んでいきましょう。 導入編 webのリッチコンテンツを作るためのフレームワーク「CreateJS」。どのような場面で利用されるのか、どういった表現が可能なのかという点を中心に、概要と導入方法を説明します。 CreateJS とは CraeteJS の事例 簡単なサンプルを試そう ブラウザの開発ツールの使い方を抑えよう CDNのURL 次のコードをHTMLファイルに記述することでCreateJSが利用可能になります。 <script src="https://code.createjs.com/1.0.0/createjs.min.js">
アニメーションが表現できる直感的なUIデザイン・プロトタイピングツール「Atomic」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのぺちこです。 今回はUIデザイン・プロトタイピングツールの「Atomic」をご紹介します。 ブログのネタ探しにネットサーフィンをしていたら偶然見つけたものなのですが、サイトを見ているだけで簡単そう＆すごそう！と思ったので実際に使ってみました。 Atomicとは https://atomic.io/ まずは、思わず使いたくなった紹介動画をご覧ください。 アニメーションまでつけた分かりやすいプロトタイプが、なんともサクサクと簡単に……！しかも無料。（beta版だけかもしれませんが） これはとりあえず試してみるしかない！ 公式サイトの「SIGN UP FOR FREE」から登録ができます。 「Atomic」の特徴 それでは「Atomic」の特徴について、くわしくご紹介します。 ブラウザ上で使える 「Atomic」は、WindowsでもMacでも使えるオンラインツールなので
ここまで動かせる！楽しいcss アニメーションのサンプル集 - コムテブログ
TL;DR 小気味よいアニメーションを用いた Web サイトを国内でも多く見かけるようになってきました。CSS3 により画像編集や Flash が減りメンテナンス性も向上しています。2015 年もアニメーションを取り入れるサイトは増えていくでしょう。 今回は CSS アニメーションを使って、面白い動きができるコードをご紹介します。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 エフェクトサンプル １．アニメのようにテキスト下の画像を移動させる アニメのタイトルのように、テキスト上に画像を載せて画像のみ移動させる方法。background-clipを使って画像をテキストでくり抜き、アニメーションでbackground-positionの位置を右に移動させます。 .type-mask h2 { -webkit-animation: scrollmask 10s ease 1.5s
進化が止まらない！CSS3アニメーションを簡単に利用できるスクリプトやスタイルシートのまとめ
スクロールをトリガーに要素をアニメーションで表示したり、ページを表示した時にちょっとしたエフェクトを加えたり、ボタンのホバー時に気持ちいいアニメーションを加えたり、CSS3のアニメーションを簡単に加えることができるリソースを紹介します。 Story Box Story Box -GitHub スクロールをトリガーに54種類のアニメーションを簡単に実装できるjQueryのプラグイン。アニメーションは非常に軽快で、デモ：ユニークの派手なアニメーションでも快適です。 ScrollMagic ScrollMagic -GitHub Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、
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"> </
【初心者でもできる！】JavaScriptでFlashのようなタイムラインアニメーションを簡単に作る方法 | Digital experience University
2013年 05月 09日 【初心者でもできる！】JavaScriptでFlashのようなタイムラインアニメーションを簡単に作る方法 Yoshiaki Sato はじめまして、フロントエンド担当のヨシアキです。 この記事では、JavaScriptで作るFlashのようなタイムラインアニメーションについて、編集や管理の手間が省けるような作り方を説明していきます。 初心者向けに解説していますので、ぜひこの記事を参考にしてご自分のタイムラインアニメーションを作ってみて下さい！ 目次 はじめに - 増え続けるJavaScript製アニメーション 下準備 - HTMLとCSS JavaScriptアニメーションの作成！ まとめ このアニメーションのサンプルを見る はじめに - 増え続けるJavaScript製アニメーション iOSなどで表示ができないFlashの代替手段としてJavaScriptで
SVGアニメを手軽に作れるLazy Line Painter｜こうめの“これから使える”jQueryプラグイン
「Lazy Line Painter」 は、最近流行のSVGを使ったパスアニメーションを手軽に作れるプラグインです。自分で描いた線画をSVG形式で読み込み、手で描いたような動きをつけて表示できます。 あまり複雑な動きはできませんが、「Tatenaga GIF」のiPhoneの線画のように、さりげなく取り入れるにはぴったりのプラグインです。 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、Lazy Line PainterをGitHubからダウンロードします。ページ右下の「Download ZIP」ボタンからダウンロードできます。
[CSS]チェックしておきたい、最近のスタイルシートのテクニックのまとめ -2014年秋
次のプロジェクトでちょっと使ってみたくなる実用的なものから実験的なものまで、CodePenで多くのユーザーをうならせたスタイルシートのテクニックを紹介します。 まずはアニメーションが楽しいデモから。 ※上から10個くらいはアニメーションgifです。
![[CSS]チェックしておきたい、最近のスタイルシートのテクニックのまとめ -2014年秋](https://cdn-ak-scissors.b.st-hatena.com/image/square/d68594e0182d8d63cfb96eda05e4f18be75583c9/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014091401-04.gif)
keyframes（CSS3）とSassでイケてるアニメーションをシンプルなコードで実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいとです。 最近のブログではまとめ記事中心に書いていたのですが、このまえ編集担当の朽木に「最近エンジニアっぽい記事書いてないよね。」というグサっとくる一言をもらったので、今回はそれっぽい記事を書いてみようと思います。 はじめに モダンブラウザでは、CSS3のanimationプロパティ、@keyframesの2つを使ってイケてるアニメーションがJS抜きで実装できます。 そいつあすごいぜって話なんですが、1つ心配なことが。 それは、アニメーションのバリエーションが複数ある場合、コード量が長くなりがちという問題。 ただでさえ各ブラウザのベンダープレフィックス付ける必要があるので、その上アニメーションパターンをいくつも書こうとしたらもう…（´Д`） 実践その1 というわけで、Sassを使って簡潔に書くことにしましょう。 試行錯誤を繰り返し、いろんなサイト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSのすぐに使える小技から驚きのスゴ技まで！CSSアニメーションの素晴らしいアイデアのまとめ | コリス
今使用しているナビゲーションやタブやボタンにHTMLを汚さずにさまざまなアニメーションを適用できる -All Animation
http://cosao.net/archives/5137
CSSやSVGで実装するローディングアニメーション - NxWorld
mynameismatthieu.com - contact with domain owner | Epik.com
