利用TweenMax針對HTML頁面製作動畫 – CSS篇
前一篇文章跟大家分享了如何利用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才可以完成的效果了，祝大家設計順利！
https://plinkocasi.com/# Plinko online
https://plinkocasinonl.com/# plinko casino
Собственное производство металлоконструкций. Если вас интересует строительство навеса мы предлогаем изготовление под ключ Навесы в Сосновом Бору
pinco: pinco legal – pinco legal
plinko geld verdienen plinko plinko geld verdienen
pinco: pinco slot – pinco
провайдер мтс домашний интернет омск мтс тв и интернет домашний мобильная связь
http://plinkodeutsch.com/# plinko ball
https://plinkodeutsch.com/# plinko casino
купить диплом нового образца в новосибирске prema-diploms.ru .
Espectro de vibracion
Dispositivos de equilibrado: importante para el rendimiento suave y óptimo de las máquinas.
En el entorno de la avances moderna, donde la efectividad y la confiabilidad del aparato son de máxima significancia, los sistemas de equilibrado juegan un tarea esencial. Estos aparatos adaptados están creados para balancear y estabilizar componentes móviles, ya sea en dispositivos industrial, vehículos de traslado o incluso en aparatos hogareños.
Para los especialistas en conservación de dispositivos y los especialistas, utilizar con aparatos de ajuste es esencial para proteger el funcionamiento suave y fiable de cualquier aparato rotativo. Gracias a estas alternativas modernas modernas, es posible minimizar sustancialmente las movimientos, el estruendo y la carga sobre los sujeciones, extendiendo la tiempo de servicio de piezas valiosos.
De igual manera significativo es el papel que cumplen los aparatos de balanceo en la asistencia al comprador. El apoyo técnico y el reparación permanente empleando estos equipos habilitan proporcionar prestaciones de óptima calidad, elevando la satisfacción de los clientes.
Para los responsables de emprendimientos, la contribución en estaciones de equilibrado y dispositivos puede ser clave para incrementar la rendimiento y eficiencia de sus equipos. Esto es particularmente trascendental para los empresarios que gestionan pequeñas y modestas organizaciones, donde cada aspecto es relevante.
También, los dispositivos de ajuste tienen una gran implementación en el ámbito de la seguridad y el gestión de estándar. Posibilitan identificar posibles defectos, evitando reparaciones costosas y problemas a los sistemas. También, los resultados extraídos de estos aparatos pueden utilizarse para optimizar procedimientos y incrementar la visibilidad en buscadores de consulta.
Las zonas de implementación de los aparatos de equilibrado abarcan diversas sectores, desde la producción de vehículos de dos ruedas hasta el supervisión del medio ambiente. No interesa si se refiere de enormes elaboraciones de fábrica o modestos espacios caseros, los equipos de calibración son esenciales para garantizar un desempeño eficiente y sin presencia de detenciones.
Финансовые новости Казахстана: свежие факты, читайте.
Курс валют в Казахстане сегодня, обязательно.
Финансовые отчеты Казахстана: ключевые моменты, чтобы понять ситуацию.
Актуальные экономические тренды Казахстана, узнайте больше.
Влияние мировых цен на экономику Казахстана, анализируйте.
Топ-10 инвестиций в Казахстане, посмотрите.
Финансовая грамотность для казахстанцев, изучайте.
Надежность банков в Казахстане, узнайте.
Прогнозы по экономике Казахстана на 2025 год, обсуждайте.
Изменение налоговой системы в Казахстане, следите.
Денежная политика Национального банка Казахстана, изучайте.
Как привлечь инвестиции в Казахстане?, узнайте.
Что нового на фондовом рынке Казахстана?, следите.
Влияние глобальных экономических изменений на Казахстан, изучайте.
Кредитование в Казахстане: условия и перспективы, исследуйте.
Свежие данные о рынках Казахстана, читайте.
Рынок недвижимости Казахстана: последние тренды, ознакомьтесь.
Бюджет страны: что нужно знать о Казахстане?, читайте.
Полезные советы по финансам для казахстанцев, узнайте.
Цифровизация финансового сектора Казахстана, ознакомьтесь.
финансовые новости Казахстана https://wikibank.kz/ .
plinko ball: plinko france – avis plinko
купить диплом в омске о среднем образовании prema-diploms.ru .
https://plinkodeutsch.shop/# Plinko Deutsch
Тут можно преобрести создание сайта медицинского центра сделать сайт медицина москва
sildenafil citrate 100mg tab
bs2best_at
Blacksprut Marketplace: Эволюция даркнета или игра на выживание?
Blacksprut — это один из крупнейших маркетплейсов даркнета, ориентированный на русскоязычную аудиторию. Появление этого сервиса, который действует вне законного поля, связано с упадком других крупных площадок, таких как Hydra. Он быстро набрал популярность благодаря удобству использования, широкому ассортименту и агрессивной маркетинговой стратегии. Но что такое Blacksprut, как он работает и в чем заключается его уникальность?
История возникновения и контекст
После того как в апреле 2022 года российские правоохранительные органы закрыли Hydra — крупнейшую нелегальную торговую платформу в даркнете, возник вакуум. Hydra не только предоставляла площадку для торговли запрещенными веществами, но и выполняла роль финтех-центра для теневой экономики с использованием криптовалют. В это время сразу несколько новых маркетплейсов поспешили занять место “упавшего гиганта”. Среди них особо выделяется Blacksprut.
Blacksprut быстро получил популярность благодаря пользователям, которые искали новую площадку для торговли и покупок, связанных с запрещенными товарами и услугами. Крупнейшие силы маркетплейса были направлены на обеспечение безопасности пользователей и анонимности, что сыграло значительную роль в его успехе.
Архитектура и функции
Blacksprut построен на той же архитектуре, что и многие другие маркетплейсы даркнета. Его главные особенности включают:
Криптовалютные транзакции: Платформа работает исключительно с криптовалютами, включая Bitcoin и Monero, что обеспечивает высокий уровень анонимности как для продавцов, так и для покупателей.
Системы безопасности: Несмотря на нелегальную природу деятельности, большое внимание уделяется безопасности пользователей. Для этого используются двухфакторная аутентификация, сложные системы шифрования данных и работа через Tor-сеть.
Ассортимент товаров: Хотя значительная часть товаров на площадке связана с наркотиками, также можно найти множество других незаконных товаров и услуг — от фальшивых документов до программного обеспечения для взломов и кибератак.
Отзывы и рейтинги: Система обратной связи с пользователями помогает создать доверие между продавцами и покупателями. Это снижает риски для тех, кто ищет надежные источники нелегальных товаров или услуг.
Почему пользователи выбирают Blacksprut?
Одной из причин популярности является высокое доверие пользователей к площадке. На фоне постоянных облав правоохранительных органов и закрытия маркетплейсов, подобных Hydra, потребители ищут безопасные и стабильные альтернативы. Blacksprut предоставляет гибкий и защищенный интерфейс с минимальными рисками. Более того, площадка активно совершенствуется и адаптируется под новые вызовы, которые диктует даркнет.
Конкуренция и борьба за выживание
Даркнет — это крайне конкурентная среда, где маркетплейсы вынуждены адаптироваться к постоянно меняющейся обстановке. Помимо внутренних факторов, таких как конкуренция среди платформ, на бизнес влияют и внешние угрозы: правоохранительные органы регулярно проводят операции по закрытию таких площадок.
Blacksprut оказался в числе тех, кто смог выдержать давление и продолжает привлекать пользователей. Тем не менее его будущее зависит от способности адаптироваться к новым угрозам — как со стороны законодательства, так и со стороны конкурентов, которые пытаются перехватить его клиентуру.
Этические и правовые аспекты
Появление и деятельность маркетплейсов, подобных Blacksprut, вызывает множество вопросов с точки зрения морали и права. Эти платформы способствуют распространению запрещенных веществ и других опасных товаров, что несет серьезные последствия для общества.
С другой стороны, для многих пользователей даркнета такие платформы являются способом обхода государственных ограничений и контроля, что поднимает вопрос о свободе личности и правах на приватность в интернете.
Заключение
Blacksprut — это яркий пример того, как нелегальная экономика адаптируется и развивается в условиях постоянного преследования со стороны властей. Он быстро заполнил вакуум, образовавшийся после закрытия Hydra, и стал одной из крупнейших русскоязычных платформ в даркнете.
Однако, как и все подобные площадки, Blacksprut существует в нестабильной среде, и его будущее всегда остается под вопросом. Успех этой платформы во многом зависит от способности руководства управлять рисками, сохранять доверие пользователей и оставаться в тени, несмотря на постоянное внимание со стороны правоохранительных органов.
plinko erfahrung: plinko erfahrung – plinko
http://pinco.legal/# pinco casino
buy viagra online
Собственное производство металлоконструкций. Если вас интересует односкатные навесы мы предлогаем изготовление под ключ навес для одного автомобиля
plinko betrouwbaar: plinko betrouwbaar – plinko nederland
plinko ball: plinko game – plinko ball
Тут можно преобрести разработка сайт медицинского центра создать сайт медицинского центра
https://plinkocasinonl.shop/# plinko
plinko casino: plinko fr – plinko casino
https://plinkofr.shop/# plinko france
Собственное производство металлоконструкций. Если вас интересует изготовление навеса из металла мы предлогаем изготовление под ключ строительство навес
plinko: plinko nederland – plinko nl