Я ищу способ анимации (с @keyframes, transform ...) некоторые элементы, когда пользователь прокручивает страницу. Например:Как оживить разделы в чистом CSS при прокрутке страницы?
div имеет height: 100px.div - height: 50px и color: blue.ли возможно с использованием чистого CSS? Если это не так, каковы наиболее эффективные способы сделать это с помощью HTML или Javascript?
Наиболее эффективный путь к анимировать свойство стиля элемента в зависимости от положения прокрутки, вероятно, будет добавить класс с функцией прокрутки:
myID = document.getElementById("myID");
var myScrollFunc = function() {
var y = window.scrollY;
if (y > 500) {
// myID.style.backgroundColor = "blue"; // you can add individual styles
myID.className = "blue" // or add classes
} else {
// myID.style.backgroundColor = "red";
myID.className = "red"
}
};
window.addEventListener("scroll", myScrollFunc);body {
height: 1100px;
}
#myID {
position: fixed;
height: 100px;
line-height: 20px;
transition: all 1s;
}
.blue {
background: blue;
animation: myAnimation 1s both;
}
.red {
background: red;
}
@keyframes myAnimation {
0% {
border-radius: 0px;
line-height: 10px;
}
100% {
border-radius: 100%;
line-height: 100px;
}
}<div id="myID" class="red">Hello world</div>Docs:
Прокрутка - это событие. Когда вы прокручиваете страницу, событие активируется, и что-то происходит. Вы не можете управлять событиями с помощью Pure CSS. Период.
Некоторые люди утверждают, что даже :hover - это событие. Да, и это по какой-то странной причине реализовано в CSS, но не в других.
С чистым CSS: нет.
Но вы можете иметь класс с ассоциированной с ним ключевой анимацией, а затем сказать, когда элемент равен scrolled into view, чтобы добавить класс к элементу. Это позволит начать анимацию.
Я видел эту страницу раньше, но хотел бы использовать только чистые JS, возможно ли это? – Davdriver
Вы можете использовать Waypoints.js, чтобы установить, что происходит, когда вы достигаете определенного элемента страницы.
Я бы хотел использовать только чистый JS, возможно ли это? – Davdriver
Да, вы можете проверить прокрутку, если текущая позиция больше смещения прокрутки и высоты прокручиваемого элемента. –
Метиннкс нельзя «прокрутить» свиток с чистым css. Если вы хотите, вы можете сделать это с помощью JQuery:
$(document).scroll(function() {
var pos = parseInt($(document).scrollTop())
if(pos == 0) {
$('.yourDivClass').css({
height : '100px' ,
color : '#fff'
})
}
if (pos > 0 && pos <= 100) {
$('.yourDivClass').css({
height : '50px' ,
color : 'blue'
})
}
console.log(pos)
})
и, конечно, если вы хотите получить плавный переход, вы должны объявить переходы в вашем CSS файле
.yourDivClass {
transition: height 0.5s ease
}
Я так знаю, но я спросил, можно ли без плагинов только с чистым JS. – Davdriver
Спасибо, это работает. Может быть, лучше работать с «переходом» вместо «@keyframes», не так ли? – Davdriver
@ Davdriver Я добавил анимацию, чтобы показать, что вы можете, но да, переход будет работать так же хорошо. – apaul