タグ

webアニメーションとcssアニメーションに関するgravity01のブックマーク (2)

  • GSAP入門 - アニメーション制作のための高機能なJSライブラリ(前編) - ICS MEDIA

    JavaScriptライブラリの「GSAPジーサップ」はウェブサイトのモーション制作に役立ちます。GSAPは高機能であり、実行性能が良好で、互換性も高い利点があります。 始点と終点の間を補間することでモーションを実現することは「トゥイーン」と呼ばれます(Betweenが語源のFlash用語)。トゥイーンの機能を提供するJSライブラリは多くの種類が存在しますが、その中でもGSAPは評判が高く、機能の多さでは群を抜いています。当サイトの記事『トゥイーンライブラリの比較検証』でも、類似のライブラリに比べて性能が高いことを確認しています。 旧TweenMax時代から数えてGSAP利用歴15年の筆者が、GSAPのおさえておくべき最低限の使い方から、現場で役立つテクニックを紹介します。 ▼GSAP公式サイト GSAP入門は前後編の2回にわたり解説します。前編では基的なGSAPの使い方を中心に説明しま

    GSAP入門 - アニメーション制作のための高機能なJSライブラリ(前編) - ICS MEDIA
  • 【おさらい】WEBサイトでアニメーションをつけるには?

    最近のWEBサイトではアニメーションなどで、なにかしらの動きをつけるのが当たり前になってきました。普段、私も制作をして「ここにちょっと動きをつけたいんだけど…」「面白い動かし方ないですかね?」と相談を受けることが増えました。 ひと昔前までは「動き」というと、Flashで作るのが定番でしたが、スマートフォンの普及や新しいブラウザの広がりにより、今はFlash以外で対応するのが一般的になりつつあります。 そこで今回は、自分自身の備忘録も兼ねて、アニメーションをつける方法をまとめてご紹介したいと思います。ひとくちに「動き」といっても、実装方法もさまざまありますし、見せ方も豊富。今後のWEB制作のちょっとしたヒントになれば幸いです。 CSSで動かす CSS3では要素にアニメーションを設定し、色々な動きをつけることができます。よく見かけるフェードイン、フェードアウトといったおなじみの動きだけでなく、

    【おさらい】WEBサイトでアニメーションをつけるには?
  • 1