利用TweenMax針對HTML頁面製作動畫 – CSS篇

by 馬老師 · 2012-07-30

前一篇文章跟大家分享了如何利用TweenMax在HTML裡面製作基礎的動畫，接下來示範如何利用TweenMax來控制CSS的效果，當然前置作業跟之前相同，這邊就不多提，但在TweenMax內需加上CSS的控制項目，大致的語法如下：

TweenMax.to(物件,動畫秒數,{css:{樣式名稱:值},ease:動畫模式});

其實跟前篇文章大致相同，只是在動畫的部分要利用「css:{}」這段語法來包含欲更改的樣式，以下是更改寬度和高度的範例：

TweenMax.to(div,1,{css:{width:100, height:200},ease:Expo.easeOut});

接下來為各位示範一下在網頁上製作動畫的範例，這是第一個範例，主要為Div移動的效果，下面是本範例整個網頁的程式碼：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>GreenSock HTMLTweening CSS Move</title>
    <style type="text/css">
        #box {
            height: 200px;
            width: 200px;
            position: absolute;
            background-color: #9CF;
        }

        /* box div 的樣式 */
    </style>
    <script src="src/minified/TweenMax.min.js"></script>
    <script language="javascript">
        window.onload = moveFn;

        function moveFn() {
            var div = document.getElementById("box"); /* 利用div變數儲存ID名稱為box的物件 */
            var divX = "0px" /* 利用變數儲存div預設的x位置 */
            var divY = window.innerHeight / 2 - 100 + "px"; /* 利用變數儲存div預設的y位置 */
            var moveX = window.innerWidth / 2 - 100 + "px"
            div.style.left = divX div.style.top = divY TweenMax.to(div, 1, {
                css: {
                    left: moveX
                },
                ease: Expo.easeOut
            });
        }
    </script>
</head>
<body style="background-color:#FFF">
    <div id="box"></div>
</body>
</html>

延續上面，接下來第二個範例程式碼大致與上面相同，只是增加了div變形和旋轉的效果，可以看得出來除了CSS本身的樣式之外，還可以利用TweenMax所提供的scale和rotation來製作動畫，下面是本範例整個網頁的程式碼：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>GreenSock HTMLTweening CSS Move</title>
    <style type="text/css">
        #box {
            height: 200px;
            width: 200px;
            position: absolute;
            background-color: #9CF;
        }

        /* box div 的樣式 */
    </style>
    <script src="src/minified/TweenMax.min.js"></script>
    <script language="javascript">
        window.onload = moveFn;

        function moveFn() {
            var div = document.getElementById("box"); /* 利用div變數儲存ID名稱為box的物件 */
            var divX = "0px" /* 利用變數儲存div預設的x位置 */
            var divY = window.innerHeight / 2 - 100 + "px"; /* 利用變數儲存div預設的y位置 */
            var moveX = window.innerWidth / 2 - 100 + "px"
            div.style.left = divX div.style.top = divY TweenMax.to(div, 1, {
                css: {
                    left: moveX
                },
                ease: Expo.easeOut
            });
            TweenMax.to(div, 1, {
                css: {
                    scale: 2,
                    rotation: 90
                },
                delay: 1,
                ease: Expo.easeOut
            });
        }
    </script>
</head>
<body style="background-color:#FFF">
    <div id="box"></div>
</body>
</html>

接下來第三個案例加上了更換背景顏色的部分，背景顏色更換的部分，要注意語法跟css的背景顏色樣式名稱有所不同，下面是本範例整個網頁的程式碼：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>GreenSock HTMLTweening CSS Move</title>
    <style type="text/css">
        #box {
            height: 200px;
            width: 200px;
            position: absolute;
            background-color: #9CF;
        }

        /* box div 的樣式 */
    </style>
    <script src="src/minified/TweenMax.min.js"></script>
    <script language="javascript">
        window.onload = moveFn;

        function moveFn() {
            var div = document.getElementById("box"); /* 利用div變數儲存ID名稱為box的物件 */
            var divX = "0px" /* 利用變數儲存div預設的x位置 */
            var divY = window.innerHeight / 2 - 100 + "px"; /* 利用變數儲存div預設的y位置 */
            var moveX = window.innerWidth / 2 - 100 + "px"
            div.style.left = divX div.style.top = divY TweenMax.to(div, 1, {
                css: {
                    left: moveX
                },
                ease: Expo.easeOut
            });
            TweenMax.to(div, 1, {
                css: {
                    scale: 2,
                    rotation: 90
                },
                delay: 1,
                ease: Expo.easeOut
            });
            TweenMax.to(div, 3, {
                css: {
                    backgroundColor: "#EEEEEE"
                },
                delay: 2,
                ease: Expo.easeOut
            });
        }
    </script>
</head>
<body style="background-color:#FFF">
    <div id="box"></div>
</body>
</html>

接下來第四個案例是利用TimelineMax來輔助製作這段動畫，可以看的出來上面範例都在使用delay來決定動畫播放順序，但在前面的文章中有提到TimelineMax可以協助我們來掌握動畫播放的順序，所以本範例更改為利用TimelineMax來製作動畫，下面是本範例整個網頁的程式碼：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>GreenSock HTMLTweening CSS Move</title>
    <style type="text/css">
        #box {
            height: 200px;
            width: 200px;
            position: absolute;
            background-color: #9CF;
        }

        /* box div 的樣式 */
    </style>
    <script src="src/minified/TweenMax.min.js"></script>
    <script language="javascript">
        window.onload = moveFn;

        function moveFn() {
            var div = document.getElementById("box"); /* 利用div變數儲存ID名稱為box的物件 */
            var divX = "0px" /* 利用變數儲存div預設的x位置 */
            var divY = window.innerHeight / 2 - 100 + "px"; /* 利用變數儲存div預設的y位置 */
            var moveX = window.innerWidth / 2 - 100 + "px"
            div.style.left = divX div.style.top = divY
            var tMax = new TimelineMax;
            tMax.to(div, 1, {
                css: {
                    left: moveX
                },
                ease: Expo.easeOut
            });
            tMax.to(div, 1, {
                css: {
                    scale: 2,
                    rotation: 90
                },
                ease: Expo.easeOut
            });
            tMax.to(div, 3, {
                css: {
                    backgroundColor: "#EEEEEE"
                },
                ease: Expo.easeOut
            });
        }
    </script>
</head>
<body>
    <div id="box"></div>
</body>
</html>

看了上面的幾個案例之後，在這邊也來製作幾個比較完整的範例供大家參考，首先是第一個範例，利用文字連結來更換div內容的效果，下面是本範例整個網頁的程式碼：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>GreenSock HTMLTweening CSS Sample 1</title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
        }

        body {
            font-size: 13px;
        }

        #box {
            height: 450px;
            width: 600px;
            margin-left: auto;
            margin-right: auto;
            background-color: #EEE;
        }

        /* box div 的樣式 （內容div） */
        #content {
            padding: 10px 10px 0px 10px;
            line-height: 26px;
            width: 500px;
            margin-left: auto;
            margin-right: auto;
        }

        /* content div 的樣式 （內容p） */
        #btn {
            height: 30px;
            width: 600px;
            text-align: center;
            margin-left: auto;
            margin-right: auto;
            padding-top: 10px;
        }

        #btn a {
            margin: 5px;
        }

        /* btn div 的樣式 （下方文字連結div） */
    </style>
    <script src="src/minified/TweenMax.min.js"></script>
    <script language="javascript">
        var intro1 =
            "<p style='text-align:center;'><img src='ford/p1.jpg' style='border:1px solid #000; background-color:#FFFFFF'></p><p>全新導入的運動模式（S-Mode），讓變速箱升檔時機往後遞延，以維持較高的引擎轉速再進行換檔，充分提升駕駛加速感受。在中高速行駛時，運動模式可提供更及時的降檔反應，使引擎仍可保持在扭力峰值的轉速範圍內，同時讓動力輸出對油門的反應更加靈敏，整體引擎動力的運動性大幅提升，創造最動感的馳騁體驗。</p>";
        var intro2 =
            "<p style='text-align:center;'><img src='ford/p2.jpg' style='border:1px solid #000; background-color:#FFFFFF'></p><p>高科技的雙離合器變速箱擁有自排、手排、上坡、下坡、高海拔修正、怠速、斜坡潛滑減緩、緊急安全八大模式。以手排齒輪箱為基礎，搭配平行排列濕式雙離合器機構，能在極短時間內完成換檔，沒有傳統自排變速箱的扭力頓挫感，加速也更加敏捷平順，且操作介面與傳統自排一樣簡易方便。</p>";
        var intro3 =
            "<p style='text-align:center;'><img src='ford/p3.jpg' style='border:1px solid #000; background-color:#FFFFFF'></p><p>全新高傳真CD/MP3/WMA音響主機，具備DSP數位音場設定、Clip失真檢測功能、智慧型音量控制、高傳真音效調整、AST電台頻道自動掃描儲存功能、位於中央扶手中AUX-IN功能的孔狀插槽與USB插槽（包含一般MP3裝置與iPod主機連結功能），是目前同等級房車中與iPod整合性最高的機種。</p>"; /* 以上為利用三個變數儲存不同的網頁內容 */
        window.onload = moveFn; /* 網頁載入時執行moveFn */
        function moveFn() {
            var div = document.getElementById("box"); /* 利用div變數儲存ID名稱為box的物件 */
            var intro = document.getElementById("content"); /* 利用intro變數儲存ID名稱為content的物件 */
            intro.innerHTML = intro1; /* 設定content的div內容為第一個連結的內容 */
            var tMax = new TimelineMax;
            tMax.from(div, 0.5, {
                css: {
                    scale: 0
                },
                ease: Expo.easeOut
            });
            tMax.from(intro, 1, {
                css: {
                    alpha: 0
                }
            }); /* 以動畫的方式呈現內容 */
        }

        function changeFn(no) {
            var div = document.getElementById("box"); /* 利用div變數儲存ID名稱為box的物件 */
            var intro = document.getElementById("content"); /* 利用intro變數儲存ID名稱為content的物件 */
            var tMax = new TimelineMax;
            tMax.to(intro, 0, {
                css: {
                    alpha: 0
                }
            });
            tMax.to(div, 0.5, {
                css: {
                    scale: 0
                },
                ease: Expo.easeOut
            });
            tMax.to(div, 0.5, {
                css: {
                    scale: 1
                },
                ease: Expo.easeOut
            });
            tMax.to(intro, 1, {
                css: {
                    alpha: 1
                }
            });
            switch (no) {
                case 1:
                    intro.innerHTML = intro1;
                    break;
                case 2:
                    intro.innerHTML = intro2;
                    break;
                case 3:
                    intro.innerHTML = intro3;
                    break;
            }
        }
    </script>
</head>
<body style="background-color:#FFF">
    <div id="box">
        <p id="content"></p>
    </div>
    <div id="btn"><a href="javascript:;" onClick="changeFn(1)">運動模式</a><a href="javascript:;"
            onClick="changeFn(2)">雙離合器</a><a href="javascript:;" onClick="changeFn(3)">整合音響</a></div>
</body>
</html>

接下來的範例是利用TweenMax來設計讓一個div永遠保持在畫面左邊中間的效果，下面是本範例整個網頁的程式碼：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>GreenSock HTMLTweening CSS Sample 2</title>
    <script src="src/minified/TweenMax.min.js"></script>
    <script language="javascript">
        window.onload = init; //網頁載入時執行init
        window.onscroll = init; //捲動網頁時執行init
        window.onresize = init; //網頁更改尺寸時執行init
        function init(){
            var div=document.getElementById("bannerDiv");
            //利用div變數儲存網頁上ID為bannerDiv的物件（即為放圖片的Div）
            var banner=document.getElementById("tweenMax");
            //利用banner變數儲存網頁上ID為tweenMax的物件（即為圖片本身）
            positionY= window.innerHeight/2-banner.height+window.pageYOffset;
            //利用PositionY儲存在畫面中Div應該出現的座標位置
            TweenMax.to(div,1,{css:{top:positionY},ease:Elastic.easeOut});
            //利用TweenMax將Div移動到上面所儲存的位置
        } 
    </script>
    <style type="text/css">
        #bannerDiv {
            height: 54px;
            width: 108px;
            position: absolute;
        }
    </style>
</head>

<body style="background-color:#FFF">
    <div id="bannerDiv"><img src="mw_tweenmax.gif" name="tweenMax" width="108" height="54" id="tweenMax" /></div>
    <div
        style="width:400px; height:2000px; background-color:#EEE; margin-left:auto; margin-right:auto; font-size:13px; text-align:center">
        網頁內容</div>
</body>

</html>

看完了上面幾個範例之後，相信大家可以利用TweenMax搭配HTML和Javascript來取代更多需要Flash才可以完成的效果了，祝大家設計順利！

Tags: HTML

Dwayneseisa表示:

2025-03-2615:58:39

Officiele Kamagra van Nederland Kamagra Kopen kamagra kopen nederland

回覆
TerryDus表示:

2025-03-2615:54:24

http://generic100mgeasy.com/# Generic100mgEasy

回覆
Carlosgycle表示:

2025-03-2615:13:51

Строительные бытовки
Контейнеры и модульные здания: проверенное подход для личных задач
Контейнеры и передвижные помещения помогают организовать рабочее пространство, помещение для хранения или временный домик. Наши специалисты обеспечиваем здания, которые соответствуют высоким стандартам долговечности и удобства.

Особенности
Прочность. Каждая модули выполнены из ресурсов, надёжных к нагрузкам и природным явлениям.
Оперативность транспортировки. Объект доставляется в рамках 1–2 суток после подтверждения заявки.
Персонализация. Доступна добавление термоизоляции, электрики или воздухообмена.
Зоны действия
На строительных площадках для размещения оборудования или создания зоны отдыха.
Во время мероприятий для создания информационного центра или хранилища техники.
В качестве офисных модулей или центров координации.
Преимущества
Сокращение сроков. Отпадает потребность строить временные помещения.
Функциональность. Обстановка, которые увеличивают результативность действий сотрудников.
Вариативность. Решение краткосрочного пользования или постоянного владения под разные периоды и бюджет.
Пример использования
Фирма-застройщик внедрила модульное здание для создания хранилища и помещения для персонала. Модуль была доставлена на место за 24 часа, с специальным утеплением. Пользователь отметил на повышение комфорта и сокращение простоя.

Как начать сотрудничество
Для оформления заказа необходимо написать с нами. Обеспечим всю необходимую информацию, окажем помощь подобрать оптимальное решение и обеспечим доставку.

回覆
ArchieToult表示:

2025-03-2615:04:12

Всё о строительстве, дизайне и ремонте в своём доме.

Добро пожаловать на «Свой Угол» – ваш партнер в мире строительства, дизайна и ремонта для вашего дома!
Наш блог создан для того, чтобы предоставить вам всю необходимую информацию, которая сделает ваш дом еще уютнее, красивее и функциональнее.

Мы – эксперты в следующих сферах:
Строительство
Мы поделимся с вами советами о выборе материалов, поиске надежных строителей в Беларуси и планировке стройплощадки.
Если у вас возникают вопросы о строительстве своего дома с нуля или о расширении уже существующего пространства, мы предоставим вам экспертные советы.

Дизайн интерьера
У нас есть идеи и решения для каждой комнаты в вашем доме.
Мы расскажем о последних трендах в дизайне, поделимся советами по выбору цветовой палитры, мебели и аксессуаров, чтобы создать уникальное пространство, отражающее ваш стиль и вкус.

Ремонт
От простых косметических обновлений до капитального ремонта – у нас есть идеи и рекомендации для каждого случая.
Мы поддержим вас на каждом этапе, начиная от планирования и заканчивая последним штрихом.

Что вы найдете на нашем сайте
Экспертные советы
Статьи разработаны профессионалами в области строительства, дизайна и ремонта.

Полезные ресурсы
Ссылки на проверенные магазины, услуги и материалы, которые помогут вам в ваших проектах.

Модные тренды
Мы следим за последними тенденциями и новинками в мире строительства и дизайна.

«Свой Угол» – ваш проводник в мире уюта и стиля в вашем доме. Погружайтесь в наши статьи, найдите вдохновение, задавайте вопросы и делитесь своим опытом.
Создайте свой угол вместе с нами!

Информационный портал «Свой Угол»

回覆
JamesGag表示:

2025-03-2614:40:20

india online pharmacy store: online medicine shopping in india – lowest prescription prices online india

回覆
Arthurhow表示:

2025-03-2614:02:01

http://indiamedfast.com/# order medicines online india
prescription drugs canada buy online

回覆
Williszew表示:

2025-03-2613:19:32

https://indiamedfast.shop/# IndiaMedFast

回覆
Ремонт приставок Xbox Москва表示:

2025-03-2612:53:33

Предлагаем услуги профессиональных инженеров офицальной мастерской.
Еслли вы искали ремонт приставок xbox цены, можете посмотреть на сайте: ремонт приставок xbox в москве
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

回覆
Billydum表示:

2025-03-2612:51:37

https://shvejnye.ru/

回覆
Ремонт приставок Xbox Москва表示:

2025-03-2612:25:09

Предлагаем услуги профессиональных инженеров офицальной мастерской.
Еслли вы искали ремонт приставок xbox рядом, можете посмотреть на сайте: ремонт приставок xbox цены
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

回覆
Williszew表示:

2025-03-2612:12:32

https://interpharmonline.com/# the canadian drugstore

回覆
Ремонт приставок Xbox表示:

2025-03-2610:49:34

Предлагаем услуги профессиональных инженеров офицальной мастерской.
Еслли вы искали срочный ремонт приставок xbox, можете посмотреть на сайте: ремонт приставок xbox
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

回覆
Arthurhow表示:

2025-03-2610:46:16

https://interpharmonline.com/# medication canadian pharmacy
canadian pharmacy

回覆
Howardenace表示:

2025-03-2610:37:38

best canadian pharmacy online: canada pharmacy no prescription – canadianpharmacy com

回覆
JamesGag表示:

2025-03-2609:49:20

order medicines online india: buying prescription drugs from india – india online pharmacy store

回覆
Howardenace表示:

2025-03-2609:08:17

my canadian pharmacy review: legitimate canadian pharmacies online – canadianpharmacymeds com

回覆
Ремонт массажных кресел в Москве表示:

2025-03-2607:59:15

pdacenter.ru – сервис по ремонту бытовой техники
Ремонт массажных кресел в Москве в официальном сервисном центре PDACENTER.
Наши инженеры выполняют ремонт любой сложности по дотупным ценам!

回覆
JamesGag表示:

2025-03-2607:30:10

online pharmacy india: india online pharmacy store – IndiaMedFast

回覆
Carlosgycle表示:

2025-03-2607:26:31

Вагончики и временные конструкции: практичное подход для клиентских проблем
Бытовки и модульные здания позволяют создать место для деятельности, склад или временную постройку. Наши специалисты предлагаем конструкции, которые подходят строгим требованиям качества и комфорта.

Особенности
Устойчивость. Данные бытовки изготовлены из ресурсов, надёжных к воздействию и климатическим факторам.
Быстрая поставка. Объект транспортируется в рамках 1–2 суток после оформления заказа.
Индивидуальная адаптация. Доступна добавление утепления, электропроводки или приточной системы.
Области применения
На строительных площадках для размещения оборудования или оборудования места для персонала.
Во время акций для организации стойки приёма или хранилища техники.
В качестве временных офисов или управляющих центров.
Выгоды
Экономия времени. Отпадает потребность создавать временные конструкции.
Удобство. Атмосфера, которые повышают эффективность работы сотрудников.
Адаптивность. Шанс проката или покупки под индивидуальные нужды и финансовые возможности.
Опыт внедрения
Строительный подряд внедрила передвижной модуль для организации склада инструментов и места для рабочих. Модуль была транспортирована за один день, с дополнительным утеплением. Заказчик подчеркнул на улучшение обстановки и сокращение простоя.

Как сделать заказ
Для заключения договора следует обратиться с нами. Дадим всю необходимую информацию, окажем помощь определить правильный путь и проведём транспортировку.

回覆
Arthurhow表示:

2025-03-2606:58:55

http://interpharmonline.com/# the canadian drugstore
canadian pharmacy drugs online

回覆
JamesGag表示:

2025-03-2606:41:47

cheapest online pharmacy india: online medicine shopping in india – online medicine shopping in india

回覆
Williszew表示:

2025-03-2606:13:47

https://indiamedfast.com/# india pharmacy without prescription

回覆
Williszew表示:

2025-03-2605:09:22

http://mexicanpharminter.com/# Mexican Pharm International

回覆
Arthurhow表示:

2025-03-2603:49:12

https://indiamedfast.com/# india online pharmacy store
canada online pharmacy

回覆
Montebeera表示:

2025-03-2603:35:01

mexican pharmacy online order mexican pharmacy online Mexican Pharm Inter

回覆
JamesGag表示:

2025-03-2601:54:21

india pharmacy without prescription: lowest prescription prices online india – IndiaMedFast

回覆
Howardenace表示:

2025-03-2601:11:51

trusted canadian pharmacy: Inter Pharm Online – canadian world pharmacy

回覆
AlbertAxoge表示:

2025-03-2600:11:59

где продать аккаунт http://market-accs.ru

回覆

利用TweenMax針對HTML頁面製作動畫 – CSS篇

You may also like...

46,326 Responses

發佈留言取消回覆

教學相關連結

最新分享

隨機文章

研究室功能

利用TweenMax針對HTML頁面製作動畫 – CSS篇

You may also like...

利用Tweener製作動畫 – 基礎篇

Facebook互動製作範例 – 馬老師 友沒有搞錯

jQuery Plugin – jQzoom

46,326 Responses

發佈留言 取消回覆

教學相關連結

最新分享

隨機文章

內容標籤

研究室功能

Facebook互動製作範例 – 馬老師友沒有搞錯

發佈留言取消回覆