Падающие осенние листья на TreeCanvas

Разместил: Apocalypse
Опубликовано: 18 сентября 2017

Отличный листопад для вашего сайта, который наверняка придётся по душе вашим посетителям Для начала посмотрите ДЕМО Установка: 1#: В самый низ вашего CSS вставьте:

.dot{
width:35px;
height:35px;
position:absolute;
background: url(/img/red-lobed-fall-clipart-leaf.png);
background-size: 100% 100%;
}

#container {
width:100%;
height:100%;
}

.dot{

width:35px;

height:35px;

position:absolute;

background: url(/img/red-lobed-fall-clipart-leaf.png);

background-size: 100% 100%;

}

#container {

width:100%;

height:100%;

}

2#: На нужных страницах после тега body вставьте:

<div id="container"></div>
<script src='/js/TweenMax.min.js'></script>
<script >
/*
a Pen by DIACO : twitter.com/Diaco_ml  ||  codepen.io/MAW
powered by GSAP : https://www.greensock.com/
*/
TweenLite.set("#container",{perspective:600})
TweenLite.set("img",{xPercent:"-50%",yPercent:"-50%"})
var total = 30;
var warp = document.getElementById("container"), w = window.innerWidth, h = window.innerHeight;
for (i=0; i<total; i++){
var Div = document.createElement('div');
TweenLite.set(Div,{attr:{class:'dot'},x:R(0,w),y:R(-200,-150),z:R(-200,200)});
warp.appendChild(Div);
animm(Div);
}

function animm(elm){   
TweenMax.to(elm,R(6,15),{y:h+100,ease:Linear.easeNone,repeat:-1,delay:-15});
TweenMax.to(elm,R(4,8),{x:'+=100',rotationZ:R(0,180),repeat:-1,yoyo:true,ease:Sine.easeInOut});
TweenMax.to(elm,R(2,8),{rotationX:R(0,360),rotationY:R(0,360),repeat:-1,yoyo:true,ease:Sine.easeInOut,delay:-5});
};

function R(min,max) {return min+Math.random()*(max-min)};
// a Pen by DIACO : twitter.com/Diaco_ml  ||  codepen.io/MAW
</script>

a Pen by DIACO : twitter.com/Diaco_ml || codepen.io/MAW

TweenLite.set("#container",{perspective:600})

TweenLite.set("img",{xPercent:"-50%",yPercent:"-50%"})

var total = 30;

var warp = document.getElementById("container"), w = window.innerWidth, h = window.innerHeight;

for (i=0; i<total; i++){

var Div = document.createElement('div');

TweenLite.set(Div,{attr:{class:'dot'},x:R(0,w),y:R(-200,-150),z:R(-200,200)});

warp.appendChild(Div);

animm(Div);

}

function animm(elm){

TweenMax.to(elm,R(6,15),{y:h+100,ease:Linear.easeNone,repeat:-1,delay:-15});

TweenMax.to(elm,R(4,8),{x:'+=100',rotationZ:R(0,180),repeat:-1,yoyo:true,ease:Sine.easeInOut});

TweenMax.to(elm,R(2,8),{rotationX:R(0,360),rotationY:R(0,360),repeat:-1,yoyo:true,ease:Sine.easeInOut,delay:-5});

};

function R(min,max) {return min+Math.random()*(max-min)};

// a Pen by DIACO : twitter.com/Diaco_ml || codepen.io/MAW

</script>

Осталось лишь залить JS файл из прикреплённого архива в папку js и картинку в папку img

Автор публикации

не в сети 4 месяца

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Комментарии: 393Публикации: 1096Регистрация: 27-08-2018

Метки: Autumn Leaf Leaves TreeCanvas Листопад Листья Осень Эффект

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Вам может также понравиться...

0 Комментарий

Старые

Межтекстовые Отзывы

Посмотреть все комментарии

Всевидящее око

Новый комментарий от пользователя Эдуард: «Забыл добавить. Снег появляется то в футере (когда ставил перед закрывающим тегом body), то наоборот почему-то в самом верху (причем сам блог сдвигался вниз), когда ставил его после открывающего тега, как было указано в статье.» в материале Приятный Новогодний снежок на HTML5 Canvas

2024-12-29 16:26:03

VVL99

Всех с новым годом!

2025-01-02 17:46:18

Всевидящее око

Новый комментарий от пользователя Acıbadem su kaçak tespiti: «Acıbadem su kaçak tespiti Kadıköy su kaçağı tespiti: Kadıköy’deki su sızıntılarında noktasal tespit için yanınızdayız. https://www.grand-indonesia.com/author/kacak/» в материале Фон из анимированных самолётов на CSS3

2025-01-02 18:25:49

Всевидящее око

Новый комментарий от пользователя elavil for anxiety reviews: «elavil for anxiety reviews

elavil for anxiety reviews» в материале Крутой анимированный индикатор загрузки в виде снежка на CSS3

2025-01-03 19:51:39

Всевидящее око

Новый комментарий от пользователя how long can you take elavil: «how long can you take elavil

how long can you take elavil» в материале След за курсором из частиц на HTML5 Canvas

2025-01-05 15:00:13

stalker1313

Привет. Может кто-нибудь знает почему не получается зайти на сайт playstation через vpn и как это исправить? Без vpn захожу на сайт, но не могу зарегать акк.
Ошибка:
Страница недоступна
Сайт playstation.com не отправил данных.
ERR_EMPTY_RESPONSE

2025-01-08 18:00:15

Al-Sher

@stalker1313, Привет. Возможно впн блочит их сайт. Попробовал со своим личным впном - сайт открывается

2025-01-08 19:56:24

stalker1313

@Al-Sher, бесплатный, хороший vpn посоветуете?

2025-01-08 22:01:35

stalker1313

Можно как-то сохранить все статьи с сайта wp в отдельные вордовские документы?

2025-01-09 19:50:03

Al-Sher

@stalker1313, Увы, я уже давно пользуюсь только личным впн на своей впске)

2025-01-10 20:41:42

......

Для публикации сообщений в чате необходимо авторизоваться