LIFEHACKOV.RU

Tilda Publishing

Фоновая анимация в zero block на Tilda Publishing

agadzhango Комментариев нет
817

Введение

Zero Block в Tilda Publishing предоставляет множество возможностей для создания красивого и интерактивного контента. Одна из таких возможностей – использование фоновой анимации. Фоновая анимация в zero block может придать вашему сайту эффектности и оригинальности, а также усилить визуальное впечатление от контента.

Что такое фоновая анимация в Zero Block на Tilda

Фоновая анимация в Zero Block — это анимация, которая происходит в заднем плане вашего сайта. Это может быть абстрактная анимация, видеофрагмент или любой другой эффект, который помогает выделиться на фоне других сайтов. В этой статье мы рассмотрим несколько разных анимаций и разберем способы их реализации.

Важно учитывать, что слишком активная и сложная анимация может отвлечь посетителей от вашего контента и замедлить загрузку страницы. Поэтому важно выбирать анимацию, которая будет соответствовать общему дизайну сайта и не перегружать его.

Как создать фоновую анимацию в Zero Block

Создание фоновой анимации в Zero Block на Tilda Publishing – простой процесс. Для начала вам нужно определиться с видом анимации и выбрать блок на странице, в котором и будет ваша анимация.

Первая фоновая анимация в zeroblock. Волна и градиент

  1. Создайте zero block.
  2. Нажмите на кнопку «Редактировать контент».
  3. Удалите стандартное наполнение блока.
  4. Нажмите на кнопку «+» и выберите пункт «Add HTML».
  5. Левой кнопкой мыши кликните на созданный html блок.
  6. В левом меню в полях «W» и «H», вместо пикселей выберите значение «%» и пропишите в двух полях значение «100».
  7. Нажмите на «+ CONTAINER».
  8. В поле «CONTAINER» выберите «Window Container».
  9. Выберите значение «CENTER» в «AXIS X» «AXIS Y». Анимация заполнит всю ширину и высоту вашего zero block.
  10. После этого кликните в любом свободной области редактора, чтобы открыть настройки zero block.
  11. В результате, в поле «WINDOW CONTAINER HEIGHT» введите значение «100», чтобы высота блока всегда была равна высоте экрана, на котором он отображается.
  12. Зайдите в html блок.
  13. Скопируйте и вставьте туда следующий код:
<style>
 @keyframes move_wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1)
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.55)
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1)
    }
}
.waveWrapper {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}
.waveWrapperInner {
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 100%;
    bottom: -1px;
    background-image: linear-gradient(to top, #86377b 20%, #27273c 80%);
}
.bgTop {
    z-index: 15;
    opacity: 0.5;
}
.bgMiddle {
    z-index: 10;
    opacity: 0.75;
}
.bgBottom {
    z-index: 5;
}
.wave {
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    transform-origin: center bottom;
}
.waveTop {
    background-size: 50% 100px;
}
.waveAnimation .waveTop {
  animation: move-wave 3s;
   -webkit-animation: move-wave 3s;
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
}
.waveMiddle {
    background-size: 50% 120px;
}
.waveAnimation .waveMiddle {
    animation: move_wave 10s linear infinite;
}
.waveBottom {
    background-size: 50% 100px;
}
.waveAnimation .waveBottom {
    animation: move_wave 15s linear infinite;
}
</style>
   
    <div class="waveWrapper waveAnimation">
  <div class="waveWrapperInner bgTop">
    <div class="wave waveTop" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-top.png')"></div>
  </div>
  <div class="waveWrapperInner bgMiddle">
    <div class="wave waveMiddle" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-mid.png')"></div>
  </div>
  <div class="waveWrapperInner bgBottom">
    <div class="wave waveBottom" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-bot.png')"></div>
  </div>
</div>
  1. Сохраните изменения и выйдите из zero block.
  2. Обновите страницу и посмотрите на результат.
  3. Если хотите изменить цвета градиента и самих волн, посмотрите видео на нашем YouTube канале.
  4. Поверх html блока вы можете добавлять и редактировать любой контент. Анимация является адаптивной и будет хорошо отображаться на всех экранах.

Вторая фоновая анимация в zeroblock. Мозаика

  1. Повторите шаги из предыдущей анимации с первого по двенадцатый.
  2. Скопируйте и вставьте в html блок следующий код:
<style>

}
 body  {
     content: '';
     background: #c4252a url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/cheap_diagonal_fabric.png);
     background-blend-mode: multiply;
     mix-blend-mode: multiply;
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     z-index: 10;

}
 canvas {
     opacity: 0;
     transition: 1s opacity cubic-bezier(0.55, 0, 0.1, 1);
}
 canvas.ready {
     opacity: 0.4;
}
 .intro {
     position: absolute;
     padding: 20px;
     transform: translate(-50%, -50%);
     left: 50%;
     top: 50%;
     text-align: center;
     color: #fafafa;
     z-index: 10;
     width: 100%;
     max-width: 700px;
     font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
     text-shadow: 0px 5px 20px black;
}
 .intro h1 {
     font-size: 40px;
     font-weight: 300;
     letter-spacing: 2px;
}
 .intro p {
     letter-spacing: 1px;
     line-height: 24px;
}

 </style>


     <canvas id="canvas" data-image="http://unsplash.it/g/450/200/?random=1"></canvas>

<div class="intro">

</div>

<script>
    (function() {
  var Photo, addListeners, canvas, createGrid, ctx, gridItem, grids, height, img, imgInfo, imgSrc, imgs, init, magnet, mouse, populateCanvas, render, resizeCanvas, rotateAndPaintImage, updateMouse, useGrid, width;

  canvas = document.getElementById('canvas');

  ctx = canvas.getContext('2d');

  width = canvas.width = window.innerWidth;

  height = canvas.height = window.innerHeight;

  imgSrc = canvas.dataset.image;

  img = new Image();

  useGrid = true;

  imgInfo = {};

  imgs = [];

  grids = [];

  magnet = 2000;

  mouse = {
    x: 1,
    y: 0
  };

  init = function() {
    addListeners();
    img.onload = function(e) {
      var numberToShow;
      imgInfo.width = e.path ? e.path[0].width : e.target.width;
      imgInfo.height = e.path ? e.path[0].height : e.target.height;
      numberToShow = (Math.ceil(window.innerWidth / imgInfo.width)) * (Math.ceil(window.innerHeight / imgInfo.height));
      if (useGrid) {
        createGrid();
      }
      populateCanvas(numberToShow * 4);
      canvas.classList.add('ready');
      return render();
    };
    return img.src = imgSrc;
  };

  addListeners = function() {
    window.addEventListener('resize', resizeCanvas);
    window.addEventListener('mousemove', updateMouse);
    return window.addEventListener('touchmove', updateMouse);
  };

  updateMouse = function(e) {
    mouse.x = e.clientX;
    return mouse.y = e.clientY;
  };

  resizeCanvas = function() {
    width = canvas.width = window.innerWidth;
    return height = canvas.height = window.innerHeight;
  };

  populateCanvas = function(nb) {
    var i, p, _results;
    i = 0;
    _results = [];
    while (i <= nb) {
      p = new Photo();
      imgs.push(p);
      _results.push(i++);
    }
    return _results;
  };

  createGrid = function() {
    var c, grid, i, imgScale, item, r, x, y, _i, _j, _k, _ref, _ref1, _ref2, _results;
    imgScale = 0.5;
    grid = {
      row: Math.ceil(window.innerWidth / (imgInfo.width * imgScale)),
      cols: Math.ceil(window.innerHeight / (imgInfo.height * imgScale)),
      rowWidth: imgInfo.width * imgScale,
      colHeight: imgInfo.height * imgScale
    };
    for (r = _i = 0, _ref = grid.row; 0 <= _ref ? _i < _ref : _i > _ref; r = 0 <= _ref ? ++_i : --_i) {
      x = r * grid.rowWidth;
      for (c = _j = 0, _ref1 = grid.cols; 0 <= _ref1 ? _j < _ref1 : _j > _ref1; c = 0 <= _ref1 ? ++_j : --_j) {
        y = c * grid.colHeight;
        item = new gridItem(x, y, grid.rowWidth, grid.colHeight);
        grids.push(item);
      }
    }
    _results = [];
    for (i = _k = 0, _ref2 = grids.length; 0 <= _ref2 ? _k < _ref2 : _k > _ref2; i = 0 <= _ref2 ? ++_k : --_k) {
      _results.push(grids[i].draw());
    }
    return _results;
  };

  gridItem = function(x, y, w, h) {
    if (x == null) {
      x = 0;
    }
    if (y == null) {
      y = 0;
    }
    this.draw = function() {
      ctx.drawImage(img, x, y, w, h);
    };
  };

  Photo = function() {
    var TO_RADIANS, finalX, finalY, forceX, forceY, h, r, seed, w, x, y;
    seed = Math.random() * (2.5 - 0.7) + 0.7;
    w = imgInfo.width / seed;
    h = imgInfo.height / seed;
    x = window.innerWidth * Math.random();
    finalX = x;
    y = window.innerHeight * Math.random();
    finalY = y;
    console.log("INIT Y :: " + finalY + " || INIT X :: " + finalX);
    r = Math.random() * (180 - (-180)) + (-180);
    forceX = 0;
    forceY = 0;
    TO_RADIANS = Math.PI / 180;
    this.update = function() {
      var distance, dx, dy, powerX, powerY, x0, x1, y0, y1;
      x0 = x;
      y0 = y;
      x1 = mouse.x;
      y1 = mouse.y;
      dx = x1 - x0;
      dy = y1 - y0;
      distance = Math.sqrt((dx * dx) + (dy * dy));
      powerX = x0 - (dx / distance) * magnet / distance;
      powerY = y0 - (dy / distance) * magnet / distance;
      forceX = (forceX + (finalX - x0) / 2) / 2.1;
      forceY = (forceY + (finalY - y0) / 2) / 2.2;
      x = powerX + forceX;
      y = powerY + forceY;
    };
    this.draw = function() {
      return rotateAndPaintImage(ctx, img, r * TO_RADIANS, x, y, w / 2, h / 2, w, h);
    };
  };

  rotateAndPaintImage = function(context, image, angle, positionX, positionY, axisX, axisY, widthX, widthY) {
    context.translate(positionX, positionY);
    context.rotate(angle);
    context.drawImage(image, -axisX, -axisY, widthX, widthY);
    context.rotate(-angle);
    return context.translate(-positionX, -positionY);
  };

  render = function() {
    var x, y;
    x = 0;
    y = 0;
    ctx.clearRect(0, 0, width, height);
    while (y < grids.length) {
      grids[y].draw();
      y++;
    }
    while (x < imgs.length) {
      imgs[x].update();
      imgs[x].draw();
      x++;
    }
    return requestAnimationFrame(render);
  };

  init();

}).call(this);
</script>
  1. На нашем YouTube канале мы показываем, как изменить свойства этой анимации в zero block.
  2. Поверх html блока вы можете добавлять и редактировать любой контент. Анимация является адаптивной и будет хорошо отображаться на всех экранах.

Третья фоновая анимация в zeroblock. Звёздное небо

  1. Повторите шаги из предыдущей анимации с первого по двенадцатый.
  2. Скопируйте и вставьте в html блок следующий код:
<style>
canvas {
  display: block;
  vertical-align: bottom;
}


/* ---- particles.js container ---- */

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>   
   
<div id="particles-js"></div>

<!-- particles.js lib - https://github.com/VincentGarreau/particles.js --> 
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
 
 <script>
    particlesJS("particles-js", {
  "particles": {
    "number": {
      "value": 355,
      "density": {
        "enable": true,
        "value_area": 789.1476416322727
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.48927153781200905,
      "random": false,
      "anim": {
        "enable": true,
        "speed": 0.1,
        "opacity_min": 0,
        "sync": false
      }
    },
    "size": {
      "value": 2,
      "random": true,
      "anim": {
        "enable": true,
        "speed": 1,
        "size_min": 0,
        "sync": false
      }
    },
    "line_linked": {
      "enable": false,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 0.1,
      "direction": "none",
      "random": true,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "bubble"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 83.91608391608392,
        "size": 1,
        "duration": 3,
        "opacity": 1,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
});
 </script>
  1. На нашем YouTube канале мы показываем, как изменить свойства этой анимации в zero block.
  2. Поверх html блока вы можете добавлять и редактировать любой контент. Анимация является адаптивной и будет хорошо отображаться на всех экранах.

Четвертая фоновая анимация в zeroblock. Пузыри

  1. Выполните аналогичные шаги из других анимаций и создайте zero block с html блоком.
  2. Вставьте в html блок код:
<style>
 #desc{
font-size:80%;
font-family:tahoma;
color:#222;
width:250px;
float:left;
position:absolute;
margin:5px;
background-color:rgba(255, 255, 255, 0.5);
}
 
</style>      
<canvas id = 'canvas'></canvas>
 
 <script>
     window.onload = init();
function init(){
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
canvas.width = window.innerWidth ;
canvas.height = window.innerHeight;
canvas.addEventListener('mousemove',MouseMove,false);

mouse = {x:0,y:0}
particleHolder = [];
x = 100;
y = 100;
angle = 0.2;
radius = 80;
particleCount = 1000;
color = [
'rgba(106, 210, 231, 0.5)',
'rgba(250, 104, 0, 0.5)',
'rgba(243, 132, 48, 0.5)',
'rgba(198, 244, 98, 0.5)',
'rgba(255, 107, 107, 0.5)',
'rgba(250, 204, 0, 0.5)',
 'rgba(232, 125, 2, 0.5)',
'rgba(202, 232, 105, 0.5)',
'rgba(0, 169, 199, 0.5)',
'rgba(63, 191, 202, 0.5)',
'rgba(174, 225, 55, 0.5)',
 'rgba(208, 231, 80, 0.5)',
'rgba(78, 189, 233, 0.5)',
'rgba(37, 174, 228, 0.5)',
'rgba(249, 214, 36, 0.5)',
'rgba(240, 122, 25, 0.5)',
'rgba(239, 169, 46, 0.5)',
'rgba(136, 197, 38, 0.5)',
'rgba(190, 242, 2, 0.5)',
'rgba(250, 42, 0, 0.5)',
'rgba(0, 178, 255, 0.5)',
'rgba(127, 255, 36, 0.5)',
'rgba(194, 255, 102, 0.5)',
'rgba(200, 255, 0, 0.5)',
'rgba(19, 205, 75, 0.5)',
'rgba(126, 112, 215, 0.5)',
'rgba(187, 233, 7, 0.5)',
'rgba(192, 250, 56, 0.5)',
'rgba(170, 255, 0, 0.5)',
'rgba(255, 170, 0, 0.5)',
'rgba(255, 0, 170, 0.5)',
'rgba(170, 0, 255, 0.5)',
'rgba(0, 170, 255, 0.5)',
'rgba(255, 255, 0, 0.5)'
];


function MouseMove(event)
{
	mouse.x = event.pageX - canvas.offsetLeft;
	mouse.y = event.pageY - canvas.offsetLeft;
}
for(i = 0; i < particleCount ; i++)
{particleHolder.push(new generateParticles());}
function generateParticles()
{
this.x = Math.random()*canvas.width;
this.y = Math.random()*canvas.height;
this.color = color[Math.floor(Math.random()*color.length)];
this.rad = Math.floor(Math.random()*8);
}
function vibrate()
{

context.fillStyle = 'white';
context.fillRect(0, 0, canvas.width, canvas.height);
for(var j = 0; j < particleHolder.length; j++)
{
var p = particleHolder[j];
var distanceX = p.x - mouse.x;
var distanceY = p.y - mouse.y;
particleDistance =  Math.sqrt(distanceX*distanceX + distanceY*distanceY);

particleMouse = Math.max( Math.min( 75 / ( particleDistance /p.rad ), 10 ), 0.1 );
context.beginPath();
context.fillStyle = p.color;
context.arc(p.x + Math.sin(angle++*Math.cos(radius++)), 
p.y - Math.cos(angle++*Math.sin(radius++)), 
p.rad*particleMouse, Math.PI*2, false);
context.fill();
}
}
setInterval(vibrate, 30);
};
 </script>
  1. На нашем YouTube канале мы показываем, как изменить свойства этой анимации в zero block.
  2. Поверх html блока вы можете добавлять и редактировать любой контент. Анимация является адаптивной и будет хорошо отображаться на всех экранах.

Заключение

В заключение, использование фоновой анимации в Zero Block на Tilda Publishing — это прекрасный способ украсить ваш сайт и сделать его более эффектным. Важно помнить, что анимация должна быть не только красивой, но и функциональной, не мешая посетителям получить доступ к вашему контенту.

Узнайте как сделать автоматический слайдер в тильде в нашей другой статье или на нашем YouTube канале.

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

zero block слайдер

Адаптивный zero block слайдер в Tilda

agadzhango 1
дизайн из Figma в Tilda

Как импортировать дизайн из Figma в Tilda. Пошаговый гайд

agadzhango 0
Пагинация в Tilda.

Пагинация в Tilda. Как сделать пагинацию на тильда сайте

agadzhango 0

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Сайт функционирует за счет рекламы

Пожалуйста, выключи блокировщик рекламы, чтобы продолжить пользоваться сайтом