Анимационный эффект дождя на JS/CSS
 | |
| Прекрасно выполнен анимационный эффект дождя, который отлично подойдет на блоки или отдельно созданные страницы для сайта с помощью JS и CSS3. Все это делается при помощи работы библиотеки TweenMax, что ранее на сайте размещали анимационный фон, который работает аналогично, только эффект совершенно другой. В большинстве выстраиваем блок и под него можно поставить этот эффект, так как он идет поверх изображение, и здесь уже сами выбираете какой формат можно поставить. Этот код инициализирует создание капель дождя, механизм случайного мигания, а также бесконечный цикл, который поддерживает эффект дождя. Некоторые системы частиц через некоторое время уничтожают частицы, но в этом коде, когда капли дождя достигают нижней части экрана, мы просто снова помещаем их сверху. Как пример, это для интернета магазинов, которые продают зонтики, но вообще вы поняли про что речь. Где не исключаю, что кто-то может поставить на отдельную страницу, где идет вверх сайта, и здесь просто по вверх прописать эту анимацию, что безусловно многих удивит. Предлагаю посмотреть этот материал, который использует ваш холст для создания эффекта проливного дождя. Установочный процесс: HTML Код <canvas id="effekt-dozhdya"></canvas> CSS Код #effekt-dozhdya { background: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/sgun.jpg); background-position: center center; background-size: cover; width: 100%; } JS Код var n = 900, c = document.getElementById("effekt-dozhdya"), ctx = c.getContext("2d"), cw = (c.width = c.offsetWidth); ch = (c.height = 500); duration = ch/850, img = new Image(), particles = [], particleNumber = 0, Particle = function() { this.alpha = rand(0.1, 0.4); this.size = rand(60, 70); this.draw = function() { ctx.globalAlpha = this.alpha; ctx.drawImage(img, this.x, this.y, this.size, this.size); } }; function setParticle(p) { particleNumber++; var _dur = rand(duration/2, duration), _tl = new TimelineMax() .fromTo(p, _dur, { x:rand(-p.size, cw+ch/2), y:-p.size },{ x:'-='+rand(ch/2-50,ch/2), y:ch+p.size, ease:Power0.easeNone, onComplete:function(){ setParticle(p); } }); if (particleNumber<n) _tl.seek(_dur*rand()); } for (var i=0; i<n; i++) { particles.push(new Particle()); setParticle(particles[i]); } TweenMax.ticker.addEventListener("tick", function(){ ctx.clearRect(0, 0, cw, ch); for (var i=0; i<n; i++) { particles[i].draw(); } }); window.addEventListener('resize', function() { particleNumber = 0; cw = (c.width = c.offsetWidth); ch = (c.height = 500); for (var i=0; i<n; i++) { TweenMax.killTweensOf(particles[i]); setParticle(particles[i]); } }); function rand(min=0, max=1) { return min + (max-min)*Math.random(); } img.src = "http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/dozhdya.png"; На demo странице вы можете посмотреть как получилось, но хотел о другом сказать. Ведь в скрипте вы увидите большую ссылку под элемент дождя, что ее поменял в img.src на формат png, что также получилось все корректно, но обзор эффекта дождя другой, что можно найти, тот который вам нужен, хотя не исключаю, что туман аналогично поставить можно, только скорость снизить. Идея TweenMax, что является самый многофункциональный и популярным инструментом для анимации, которая заключается в создании библиотеки JavaScript, которая использует холст HTML5 для рендеринга капель дождя, падающих на стеклянную поверхность. Также TweenMax позволяет не так сложно создавать ступенчатую анимацию для нескольких объектов. n - Отвечает за количество капель ch - Идет на высоту блока cw - Аналогично под ширина блока. img.src - Капля в base64 - где заменил на формат png, на demo в оригинальности. Основной фон задается через CSS Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |