ホームページ制作フィールビー|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を使ったアニメーション02

01 08 2016

Tween Maxを使ったアニメーション02

 

前回Tween Maxを使ったアニメーションを行いましたので、その続きでTween Maxを使ってBOXにアニメーションを設置しました。
デモ01~デモ03はBOXを回転させて移動するアニメーションを設置しています。
回転方向もX、Y、Zと指定でき、スピードのコントロールも出来ますので色々試してみました。
デモ04は、マウスをクリックするとついてくるアニメーションになります。

 

デモ01

「#box」を2秒かけて「右」方向に300px、Y方向に回転して移動します。

<div id="box" class="tween01">box01</div>

<style>
#box {
	position:relative;
	display:inline-block;
	padding:50px;
  background: #906;
  color: #fff;
}
</style>

<script>
var tween01 = document.getElementsByClassName("tween01");
// タイムラインを作成する
var tl = new TimelineMax({repeat: -1});
// 右側に2秒かけて移動するアニメーションを指定する
tl.to(tween01, 2.0, {left: "300px", rotationY: 360});
</script>

 


box01

デモ02

「#box」を2秒かけて「右」方向に300px、X方向に回転して2倍の速度で移動します。

<div id="box" class="tween01">box01</div>

<style>
#box {
	position:relative;
	display:inline-block;
	padding:50px;
  background: #906;
  color: #fff;
}
</style>

<script>
var tween02 = document.getElementsByClassName("tween02");
// タイムラインを作成する
var tl = new TimelineMax({repeat: -1});
// 右側に2秒かけて移動するモーションを指定する
tl.to(tween02, 2.0, {left: "300px", rotationX: 360});
// 2倍の速度のアニメーション
tl.timeScale(2.0);
</script>

box02

デモ03

「#box」を2秒かけて「右」方向に300px、Z方向に回転して移動
その移動する0.25秒後スローになり0.5秒後通常のスピードに戻る

<div id="box" class="tween01">box01</div>

<style>
#box {
	position:relative;
	display:inline-block;
	padding:50px;
  background: #906;
  color: #fff;
}
</style>

<script>
	var tween03 = document.getElementsByClassName("tween03");
	// タイムラインを作成する
	var tl = new TimelineMax({repeat: -1});
	// 右側に2秒かけて移動する動きを指定する
	tl.to(tween03, 2.0, {left: "300px", rotationZ: 360});
	// タイムラインの0.25秒後に
	tl.addCallback(function () {
		// 0.1倍の動きになり
		tl.timeScale(0.1);
	}, 0.25);
	// タイムラインの0.50秒後に
	tl.addCallback(function () {
		// 1.0倍の動きになる
		tl.timeScale(1.0);
	}, 0.5);
</script>

box03

デモ04

クリックするとついてくるアニメーションは下記デモボタンからご覧ください。

デモ

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

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

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.