Показать сообщение отдельно
sdore
04.09.2017
 
Мимо проходил, заглянул)
О пользователе
 
Сообщений: 1
ВкоптоКарма: 1


[#4231]
Счастье ГОТОВЫЙ КОД: плавное появление блоков

Написал за полчаса стиль для анимации при загрузке страницы (блоки выезжают сверху). Готов поделиться, ибо если допилить, будет классная функция для более-менее мощных пк.

JS:
Код:
function anim() {
  var animStyle = document.createElement("style");
  animStyle.innerHTML = "@keyframes anim {from {opacity: 0; top: -20px;} to {opacity: 1; top: 0px;}} .page_block {animation-name: anim; animation-duration: 2s;}";
  document.head.appendChild(animStyle);
}
CSS:
Код:
@keyframes anim {
  from {
    opacity: 0;
    top: -20px;
  }
  to {
    opacity: 1;
    top: 0px;
  }
}

.page_block {
  animation-name: anim;
  animation-duration: 2s;
}
JS (пытался сделать появление по-очереди, но чёт не прокатило):
Код:
function anim() {
  var animStyle = document.createElement("style");
  animStyle.innerHTML = "@keyframes anim {from {opacity: 0; top: -20px;} to {opacity: 1; top: 0px;}} .page_block {animation-duration: 2s;}";
  document.head.appendChild(animStyle);
  var animList = document.getElementsByClassName("page_block");
  var animIndex = {i: 0};
  var animInterval = setInterval(draw(animIndex), 20);

  function draw(anim) {
    if (anim.i == animList.length) clearInterval(animInterval);
    animList.item(anim.i).style = "animation-name: anim;";
    anim.i++;
  }
}
Вложения
Тип файла: js VKAnim.user.js (793 байт, 10 просмотров)
Оффлайн
 
Ответить с цитированием
Пользователь сказал cпасибо: