Плавно падающие разноцветные листья на SVG и HTML5 Canvas

Разместил: Apocalypse
18 октября 2018

Скачать Очень сипотная реализация осеннего настроения для вашего сайта. Плавно падающие разноцветные листья - что может быть прекраснее? Для начала посмотрите ДЕМО Установка: 1#: В самый низ вашего CSS файла поместите:

svg {
display: block;
width: 100%;
height: 100%;
}

#storage {
position: absolute;
left: -100%;
top: -100%;
}

#leafTemplate .stem {
fill: currentColor;
}

.light-red {
fill: #e57373;
color: #d93232;
}

.red {
fill: #f44336;
color: #d2190b;
}

.dark-red {
fill: #d32f2f;
color: #962020;
}

.light-orange {
fill: #ffb74d;
color: #ff9801;
}

.orange {
fill: #ff9800;
color: #b36a00;
}

.dark-orange {
fill: #f57c00;
color: #a95500;
}

.light-yellow {
fill: #fff176;
color: #ffe92a;
}

.yellow {
fill: #ffeb3b;
color: #eed500;
}

.dark-yellow {
fill: #fbc02d;
color: #d79b04;
}

.light-green {
fill: #81c784;
color: #4dae52;
}

.green {
fill: #4caf50;
color: #357a38;
}

.dark-green {
fill: #388e3c;
color: #225725;
}

.light-purple {
fill: #ba68c8;
color: #973da7;
}

.purple {
fill: #9c27b0;
color: #641971;
}

.dark-purple {
fill: #7b1fa2;
color: #4a1362;
}

svg {

display: block;

width: 100%;

height: 100%;

}

#storage {

position: absolute;

left: -100%;

top: -100%;

}

#leafTemplate .stem {

fill: currentColor;

}

.light-red {

fill: #e57373;

color: #d93232;

}

.red {

fill: #f44336;

color: #d2190b;

}

.dark-red {

fill: #d32f2f;

color: #962020;

}

.light-orange {

fill: #ffb74d;

color: #ff9801;

}

.orange {

fill: #ff9800;

color: #b36a00;

}

.dark-orange {

fill: #f57c00;

color: #a95500;

}

.light-yellow {

fill: #fff176;

color: #ffe92a;

}

.yellow {

fill: #ffeb3b;

color: #eed500;

}

.dark-yellow {

fill: #fbc02d;

color: #d79b04;

}

.light-green {

fill: #81c784;

color: #4dae52;

}

.green {

fill: #4caf50;

color: #357a38;

}

.dark-green {

fill: #388e3c;

color: #225725;

}

.light-purple {

fill: #ba68c8;

color: #973da7;

}

.purple {

fill: #9c27b0;

color: #641971;

}

.dark-purple {

fill: #7b1fa2;

color: #4a1362;

}

2#: Сразу после тега body вставьте:

<script type="text/javascript" src="/js/script1.js"></script>
<script type="text/javascript" src="/js/script2.js"></script>

1 2	<script type="text/javascript" src="/js/script1.js"></script> <script type="text/javascript" src="/js/script2.js"></script>

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

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

не в сети 4 дня

Apocalypse

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

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

Метки: Autumn Falling HTML5 Javascript Leaves Листья Осень Падающие

Apocalypse

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

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

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

Старые

Новые

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

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

topka

Есть скрипт ( денег или баллов ? )
где можно потратить эти баллы или передать и заработать ?

Что-то такое видел на одном сайте ( сталкер сайт на юкозе было)

2024-03-06 21:31:46

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

Новый пост от installusd1 в теме «PPI Pay-Per-Install Best Advertising Network»

2024-03-25 09:45:25

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

Новый комментарий от пользователя паоа: «пкаор» в материале Ajax отправка комментариев в Wordpess без плагинов от Apocalypse

2024-03-27 20:08:09

Apocalypse

Сайт был восстановлен спустя несколько месяцев бездействия

2024-06-27 16:12:56

fapalnaapo

а Шо случилось за что блокировали

2024-06-30 20:46:10

Apocalypse

@fapalnaapo, банально хостинг не был уплачен

2024-07-14 08:27:24

Apocalypse

Всем привет. У кого как жизнь?

2024-07-30 19:50:15

fapalnaapo

давольно таки не плохо, очень приятно, мне очень нравится между прочем

2024-08-13 10:09:49

Apocalypse

Всем доброго дня

2024-11-07 12:00:10

Al-Sher

Всем привет

2024-11-09 17:57:18

......

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