Написал за полчаса стиль для анимации при загрузке страницы (блоки выезжают сверху). Готов поделиться, ибо если допилить, будет классная функция для более-менее мощных пк.
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++;
}
}