ホームページ制作フィールビー|FEELBEE

  • SERVICE
  • WORKS
  • NEWS & TOPICS
  • ABOUT
  • RECRUIT
  • CONTACT
  • Facebook
  • Instagram

  • HOME
  • SERVICE
    • ホームページ制作Website Design
    • スマートフォンサイト制作Smartphone site Design
    • ランディングページ制作Landing page Design
    • ポータルサイト制作Portal site Design
    • 下北沢ジャック広告Shimokita Jack
  • WORKS
  • NEWS & TOPICS
  • ABOUT US
  • RECRUIT
  • CONATCT
    • 採用情報Careers
    • パートナー募集Partner
  • facebook
  • Instagram

NEWS & TOPICS

  • NEWS TOP
  • お知らせ
  • ウェブブランディング
  • ウェブマーケティング
  • LIFE
  • WEB

[WEB] Tween Maxを使ったアニメーション

25 07 2016

[WEB] Tween Maxを使ったアニメーション

 

Tween Maxの説明

TweenMaxは、スピードも早い高機能なアニメーションライブラリになります。
jQueryに依存はしていませんのでTweenMaxのみ読み込んでも動きます。
CSSでアニメーションを書くよりもスマートに書くことができます。

 

ライセンス

TweenMaxのライセンスは、無料で公開されるなら商用コンテンツでも無償で使用可能だそうです。
有料でないと見られなかったり、有料会員向けの場合はライセンスを購入する必要があるようです。

詳しくはこちらをご覧ください。
・ライセンス
・標準的な「無償」 GreenSockライセンス

 

TweenMaxの使い方

●TweenMaxのダウンロード
サイトからダウンロードします。

TweenMaxをサイトからダウンロードします。
http://greensock.com/

 

●TweenMaxのjsを設置し四角を左から右に移動

01.HTMLで動かす要素を設置

<div id="box">BOX</div>
<style>
#box {
  position: relative;
  width: 100px;
  height: 100px;
  background: #cc000;
  color: #fff;
}
</style>

 

02.TweenMaxのjsを設置

<script type="text/javascript" src="js/TweenMax.js"></script>
	
<script>
TweenMax.to('#box', 0.5, { left: 300 });
</script>

※jsの読み込む位置はfooterに読込んでください。
動かす要素の「id="box"」より上にあると動きません。

デモ

 

TweenMaxの説明

01.TweenMaxのファイル
・TweenMax.js
・TweenLite.js
・TimelineMax.js
・TimelineLite.js

●Liteがついているものが軽量版になります。
●TweenMax
 アニメーションを実行するときに使用します。
●TimelineMax
 複数のアニメーションを実行するときに使用します。
 詳しくはこちら

 

02.TweenMax 設定したjsの説明
TweenMax.to('#box', 0.5, { left: 300 });

to
オブジェクトの操作方法
その他に
・to(指定のプロパティの値を、初期値から設定した値にアニメーションさせる)
・set(指定のプロパティの値を設定する(アニメーションはされない))
・from(指定のプロパティの値を、設定した値から初期値にアニメーションさせる)
・fromTo(指定のプロパティの値の初期値を再設定し、設定した値から初期値にアニメーションさせる )
などの指定ができます。

#box
アニメーションさせる要素

0.5
アニメーションの時間(0.5秒)

left: 300
アニメーションの動き

以上が今回設定したアニメーションの動きの説明になります。

今回はTweenMaxの簡単な説明になります。
調べると沢山の使い方がありますので是非使ってみて下さい。

ニューストップに戻るニューストップに戻る

SERVICE

ホームページ・スマートフォンサイト・ランディングページ・ポータルサイト・ECサイトなどの
制作を通じてクライアント様のウェブ上での目標を実現化いたします。

Small ideas make a Big innovation

「小さなアイデアが大きなイノベーションを起こす!」
をコンセプトに、クライアントとユーザーの双方がイノベーションを起こすご提案をいたします。

クライアント様も気が付かない小さなアイデアを積み重ねて、大きなインパクトのあるソリューションを創造いたします。

  • Website Designホームページ制作
  • Smartphone site Designスマートフォンサイト制作
  • Landing page Designランディングページ制作
  • Portal site Designポータルサイト制作
  • Shimokita Jack下北沢ジャック広告

ABOUT
FEELBEEについて

ABOUT
FEELBEEについて

受付 平日10:00-18:00

03-6416-3903

お問合せフォーム

ホームページリニューアル制作サービス ブラボーウェブ

 

rindo

  • HOMEホームページ制作 トップ
  • ABOUT会社案内
  • 採用情報
  • パートナー募集
  • WORKS制作実績
  • NEWS & TOPICSお知らせ・最新情報
  • CONTACTお問合せ
  • SERVICEサービス紹介
  • ホームページ制作
  • スマートフォンサイト制作
  • ランディングページ制作
  • ポータルサイト制作
  • facebook
  • twitter

ホームページ制作フィールビー|FEELBEE

© Copyright FEELBEE. All Rights Reserved.