Анимация фона сайта и страниц на JS
 | |
| Оригинально смотрятся стильный эффект с использованием Canvas и JS, что предназначен для анимации фона сайта или страницы в разном исполнении. Изменение положения фонового изображения было наилучшим подходом к созданию эффекта, который можно представить. Что теперь не сложно поставить оригинальный фон, который безусловно украсит страницу или блок, где расположен. Ведь изначально мы ставим реальное изображение, а точнее фон. Вторым приемом идет, это под наш фон подобрать эффект, который аналогично идет под изображение в формате png. Так как на прозрачном фоне только будет виден тот рисунок, что расположится на основном фоне, а также срабатывает при наведении клика. Что понравилось, то, что самостоятельно можно разместить тот эффект на фоне, который будет уникален в своем построение по анимации. Но фон намного больше, чем просто выбрасывание фотографии или текстуры в большое пространство. Комбинация CSS и немного JavaScript помогает создавать удивительные спецэффекты. Давайте рассмотрим некоторые из уникальных способов, которыми дизайнеры приправляют фоны. Мы также включим ручку для каждой техники, чтобы вы могли точно видеть, как они работают. Первым, это подключаем библиотеку TweenMax.min.js под скрипт анимации: Код <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script> HTML Никто не любит добавлять дополнительный HTML, чтобы извлечь все изворотливые вещи, и поэтому мы смотрим на очень простой список. Код <canvas id="bg-img"></canvas> CSS Для этого я просто запустил навигацию и установил ссылку под отображения. Код #bg-img { background: url(Ссылка на фон.image.png); background-position: center center; background-size: cover; width: 100%; } JS И наконец дошли до сценария, который для всего этого очень прост, где должна запускаться, когда пользователь перемещает указатель мыши. Код var n = 30, speed = 15, startSize = rand(200,400), c = document.getElementById("bg-img"), ctx = c.getContext("2d"), mousePos = {x:"", y:""}, img = new Image(), particles = [], particleNumber = 0, Particle = function(index) { this.index = index; this.dur = (100-rand(9, 90))/speed; this.draw = function() { ctx.translate( this.x, this.y ); ctx.globalAlpha = this.alpha; ctx.globalCompositeOperation = 'lighter'; if (index%2==0) ctx.globalCompositeOperation = 'xor'; ctx.drawImage(img, -this.size/2, -this.size/2, this.size, this.size); ctx.translate( -this.x, -this.y ); } }; c.onmousemove = function(e){ mousePos = { x:e.clientX - c.getBoundingClientRect().left, y:e.clientY - c.getBoundingClientRect().top }; } c.onmouseleave = function(e){ mousePos = {x:"", y:""} } function setParticle(p, firstRun) { var _x = cw*rand(0,1), _y = ch*rand(0,1), _s = startSize; if (rand(0,1)>0.3 && mousePos.x!=""){ _x = mousePos.x; _y = mousePos.y; _s = _s/10; } var _tl = new TimelineMax() .fromTo(p, p.dur, { x:_x, y:_y, size:_s, alpha:0 },{ size:'+='+String(rand(200,400)), bezier:[{alpha:rand(0.15,0.65)},{alpha:0}], ease:Power1.easeOut, onComplete:function(){ setParticle(p); } }); if (firstRun) _tl.seek(p.dur*rand()); } TweenMax.ticker.addEventListener("tick", function(){ ctx.clearRect(0, 0, cw, ch); for (var i=0; i<n; i++) particles[i].draw(); }); window.addEventListener('resize', doResize) function doResize() { 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], true); } TweenMax.fromTo(c, 0.3, {alpha:0},{alpha:1, ease:Power3.easeInOut}); } for (var i=0; i<n; i++) particles.push(new Particle(i)); doResize(); function rand(min, max) { (min) ? min=min : min=0; (max) ? max=max : max=1; return min + (max-min)*Math.random(); } img.src = "Ссылка на фон.image.png"; Простота изображения также позволяет уменьшить размер файла, где анимация с большой глубиной цвета, то потребует большего размера файла, где нужно соблюдать баланс между эффектом и производительностью. n - Количество элементов графики; speed - Здесь задается скорость появление графического элемента; startSize - Задаем размер, от и до. ch - Высота блока cw - Ширина блока. img.src - Как раз эта картинка в png или другом формате, что задействована в анимации. Главное на что нужно обратить внимание, что любая анимация останавливается перед повторной попыткой анимации. Это позволяет избежать многократного перемещения анимации в очередь из элемента. Демонстрация Также по такому формату, только не подключаем изображение под основной фон. Как пример, здесь выставили темный оттенок и поставили под эффект падающий снег.  Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |