Дождевые капли, отскакивающие от границы окна на SVG и HTML5 Canvas

Разместил: Apocalypse
17 августа 2016

Необычный эффект: дождь идёт внутри блока, а его капли отскакивают за его пределы Для начала посмотрите ДЕМО Моё тестирование в редакторе: КЛИК Установка: 1#: В самый низ вашего CSS вставьте:

.container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

#card {
background: #fff;
box-shadow: 9px 7px 37px -6px rgba(0, 0, 0, 0.75);
overflow: hidden;
width: 320px;
padding: 0 10px;
height: 400px;
margin: 10pc 20px 0 20px;
}

#rain {
top: 0px;
bottom: 0;
left: 0;
right: 0;
}

#splash {
margin-top: -80px;
}

.container {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

margin: 0;

padding: 0;

height: 100%;

width: 100%;

}

#card {

background: #fff;

box-shadow: 9px 7px 37px -6px rgba(0, 0, 0, 0.75);

overflow: hidden;

width: 320px;

padding: 0 10px;

height: 400px;

margin: 10pc 20px 0 20px;

}

#rain {

top: 0px;

bottom: 0;

left: 0;

right: 0;

}

#splash {

margin-top: -80px;

}

2#: HTML + JS коды примера:

<div class="container">
<div>
<div id="card">
<svg width="300" height="400" viewbox="0 0 300 400" id="rain"></svg>
</div>
<svg width="380" height="200" viewbox="0 0 380 200" id="splash"></svg>
</div>
</div>

<script>
var rainColor = '#0000ff';
var rainSVG = Snap("#rain");
var rainContainer = {
width: 300,
height: 400
};
var rain = [];
var rainCount = 10;
var rainLength = 50;
var rainSpeed = 0.3;
var splashColor = '#3333ff'
var splashSVG = Snap('#splash');
var splashContainer = {
width: 380,
height: 200
};
var splashes = [];
var splashBounce = 80;
var splashSpeed = 0.6;

for (var i = 0; i < rainCount; i++) {
// var x = gaps + (gaps * i); 
var line = rainSVG.line(0, 0, 0, rainLength).attr({
fill: "none",
stroke: rainColor,
strokeWidth: Math.random() * 3,
//strokeDasharray: [rainLength, rainContainer.height - rainLength],
//strokeDashoffset: Math.random() * rainContainer.height + rainLength
});

rain.push(line);

var points = [];
var randomX = ((Math.random() * 80) - 40);
points.push('M' + 0 + ',' + splashBounce);
points.push('Q' + randomX + ',' + (0 - (Math.random() * splashBounce)));
points.push((randomX * 2) + ',' + ((Math.random() * (splashContainer.height - splashBounce)) + splashBounce));

var splash = splashSVG.path(points.join(',')).attr({
fill: "none",
stroke: splashColor,
strokeWidth: 1
});

splashes.push(splash);

}

start();
document.onclick = start;

function animate(line, delay, index) {
var x = Math.random() * rainContainer.width;
var delay = delay || splashSpeed + Math.random() * rainSpeed;
//var time = rainSpeed - ((line.node.style.strokeDashoffset / rainContainer.height) * rainSpeed);
TweenMax.fromTo(line.node, rainSpeed, {
y: -rainLength,
x: x
}, {
y: rainContainer.height - rainLength,
delay: delay,
ease: Linear.easeIn,
onComplete: startSplash,
onCompleteParams: [line, index]
})

//TweenMax.kil(splashes[index])
var pathLength = Snap.path.getTotalLength(splashes[index]);
splashes[index].node.style.strokeDasharray = 50 + ' ' + (pathLength);
// splash.node.style.strokeDashoffset = pathLength;
TweenMax.fromTo(splashes[index].node, splashSpeed, {
strokeWidth: line.node.style.strokeWidth,
x: 40 + x,
opacity: 1,
strokeDashoffset: 50
}, {
strokeWidth: 0,
strokeDashoffset: -pathLength,
opacity: 1,
delay: delay + rainSpeed,
ease: SlowMo.ease.config(0.4, 0.1, false)
})

}

function startSplash(line, index) {
//line.node.style.strokeDashoffset = rainContainer.height;
animate(line, null, index);
}

function start() {
TweenMax.killAll();

for (var i = 0; i < rain.length; i++) {
animate(rain[i], Math.random() * 30, i);
}
}
</script>

100

101

102

103

104

105

106

107

108

<div>

</div>

</div>

var rainColor = '#0000ff';

var rainSVG = Snap("#rain");

var rainContainer = {

width: 300,

height: 400

};

var rain = [];

var rainCount = 10;

var rainLength = 50;

var rainSpeed = 0.3;

var splashColor = '#3333ff'

var splashSVG = Snap('#splash');

var splashContainer = {

width: 380,

height: 200

};

var splashes = [];

var splashBounce = 80;

var splashSpeed = 0.6;

for (var i = 0; i < rainCount; i++) {

// var x = gaps + (gaps * i);

var line = rainSVG.line(0, 0, 0, rainLength).attr({

fill: "none",

stroke: rainColor,

strokeWidth: Math.random() * 3,

//strokeDasharray: [rainLength, rainContainer.height - rainLength],

//strokeDashoffset: Math.random() * rainContainer.height + rainLength

});

rain.push(line);

var points = [];

var randomX = ((Math.random() * 80) - 40);

points.push('M' + 0 + ',' + splashBounce);

points.push('Q' + randomX + ',' + (0 - (Math.random() * splashBounce)));

points.push((randomX * 2) + ',' + ((Math.random() * (splashContainer.height - splashBounce)) + splashBounce));

var splash = splashSVG.path(points.join(',')).attr({

fill: "none",

stroke: splashColor,

strokeWidth: 1

});

splashes.push(splash);

}

start();

document.onclick = start;

function animate(line, delay, index) {

var x = Math.random() * rainContainer.width;

var delay = delay || splashSpeed + Math.random() * rainSpeed;

//var time = rainSpeed - ((line.node.style.strokeDashoffset / rainContainer.height) * rainSpeed);

TweenMax.fromTo(line.node, rainSpeed, {

y: -rainLength,

x: x

}, {

y: rainContainer.height - rainLength,

delay: delay,

ease: Linear.easeIn,

onComplete: startSplash,

onCompleteParams: [line, index]

})

//TweenMax.kil(splashes[index])

var pathLength = Snap.path.getTotalLength(splashes[index]);

splashes[index].node.style.strokeDasharray = 50 + ' ' + (pathLength);

// splash.node.style.strokeDashoffset = pathLength;

TweenMax.fromTo(splashes[index].node, splashSpeed, {

strokeWidth: line.node.style.strokeWidth,

x: 40 + x,

opacity: 1,

strokeDashoffset: 50

}, {

strokeWidth: 0,

strokeDashoffset: -pathLength,

opacity: 1,

delay: delay + rainSpeed,

ease: SlowMo.ease.config(0.4, 0.1, false)

})

}

function startSplash(line, index) {

//line.node.style.strokeDashoffset = rainContainer.height;

animate(line, null, index);

}

function start() {

TweenMax.killAll();

for (var i = 0; i < rain.length; i++) {

animate(rain[i], Math.random() * 30, i);

}

</script>

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

не в сети 1 месяц

Apocalypse

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

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

Метки: Canvas HTML5 Rain SVG Дождевые Дождь Капли Осень

Apocalypse

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

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

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

Старые

Новые

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

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

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

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

Новый комментарий от пользователя EugeneRig: «Сервис рассылок по любым каналам:

В нашем арсенале имеются базы:
- Москва и Санкт-Петербург
- Любые регионы РФ
- Компании всех сфер бизнеса
- Любые страны мира
- Сформируем базу по Вашим параметрам

Стоимость рассылки 1 000 000 сообщений на e-mail адреса составит всего 3 900 рублей.

А также рассылки по WhatsApp, Телеграм, ВКонтакте.

Обращайтесь по любым вопросам: 7(9 25) 3 45= 20= 0 3 (WhatsApp)» в материале contacts

2025-01-12 01:12:23

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

Новый комментарий от пользователя Charlesdeach: «Hello,

Are you ready to step into the future of web development? Neuron Expert, an advanced AI platform, is looking for skilled webmasters to collaborate on creating and managing AI-powered virtual companies. These innovative businesses leverage sophisticated AI technology to revolutionize online operations, and we need your expertise to make it happen!

Why Join Neuron Expert?

Innovative Projects:
Work on AI-driven companies that redefine the way businesses operate online.

Flexible Opportunities:
Choose your schedule and projects.

Competitive Earnings:
Get paid for your expertise while contributing to groundbreaking initiatives.

Expand Your Skills:
Gain experience in integrating AI with web development.

What We Need:
• Proficiency in web development and website management.
• Experience with various CMS platforms, plugins, themes, and customizations.
• Passion for innovation and AI-driven solutions.

Ready to Join?

Take the next step and become a part of the Neuron Expert community. Together, we’ll shape the future of virtual companies!

Click here (https://neuron.expert/network/#webmasters) to join or learn more!

Best regards,
The Neuron Expert Team» в материале contacts

2025-01-15 14:57:36

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

Новый комментарий от пользователя VincentPraky: «Здравствуйте!

К Вам есть предложение - предоставить Вам базу потенциальных клиентов и выполнить отправку сообщений в WhatsApp, с Вашим предложением.

Сообщения будут приходить тем людям, которые являются Вашими наиболее целевыми клиентами.

А также есть возможность выполнять рассылки на адреса электронной почты.

Напишите мне пожалуйста в WhatsApp: 7(92 5) 34 5=20- 03

Заранее благодарен, Вячеслав.» в материале contacts

2025-01-15 18:19:50

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

Новый комментарий от пользователя DavidFoemn: «Здравствуйте!

Хочу предложить спарить базу потенциальных заказчиков для Вашего бизнеса в формате excel.

База парится из интернета, может быть отфильтрована по отраслям и региону.

В данной базе будут содержаться:
- Емейл адреса
- Телефонные номера, в том числе мобильные
- Название фирм
- Адрес сайтов и т.п.

База предназначается для работы для Ваших менеджеров по продажам - для отправки коммерческих предложений т.п.

Также возможно произвести рассылку по по данной базе.

Обращайтесь: 7 (9 25) 4 7 3 ==00-- 9 6 (WhatsApp)

С уважением, Дмитрий.» в материале contacts

2025-01-16 15:40:27

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

Новый комментарий от пользователя MichaelLam: «Здравствуйте!

Есть заинтересованные клиенты - могу поставлять для Вас контакты по цене 500-1600 рублей за каждый лид.

Если не против - давайте перейдем в WhatsApp или позвоните мне пожалуйста: 7 (9 2 9) 5 0 4 == 73 0 4

Обговорим подробности.

А также есть возможность запуска рассылок по Email, WhatsApp, telegram и VK.

С уважением, Егор.» в материале contacts

2025-01-18 02:27:01

......

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