Очень красивый и интересный эффект. Выглядит все максимально реалистично. Великолепно.
Демо:
Демо 1,
Демо 2,
Демо 3,
Демо 4.
Установка:
ПУ → Управление дизайном → CSS → В самый низ:
Код
#background {
width: 100%;
height: 100%;
}
Теперь заходим в дизайн той страницы, где хотим видеть эффект и после ставим:
Код
<img id="background" alt="background" src="" />
<script src="http://my-wos.ru/load_files/rainday.js"></script>
<script>
window.onload = function () {
run();
}
function run() {
var image = document.getElementById('background');
image.onload = function () {
var engine = new RainyDay({
image: this
});
engine.rain([
[2, 2, 5], // Поиграйтесь с этими значениями
[1, 2, 2] // И с этими тоже
], 500);
};
image.crossOrigin = 'anonymous';
image.src = 'http://mytestportal.ucoz.ru/123.jpg';
}</script>
- отвечает за отображаемую картинку. Поменяйте адрес на свой, если моя вам не нравится
Теперь разберем установку данного эффекта на задний план.
Демо.
Разница небольшая, всего-то надо в css вместо первого кода вставить это:
Код
body {
min-height:1000px;
margin: 0;
padding: 0;
}
#background {
width: 100%;
height: 100%;
top:0px;
left:0px;
position:fixed !important;
z-index:-2;
}
canvas {
position:fixed !important;
top:0px;
left:0px;
z-index:-1
}
Перезалейте его себе на сайт и замените ссылку.
На этом все. Эффект просто замечательный.
