Напиши js html css код, который будет перемещать блок по горизонтали, когда пользователь прокручивает страницу
window.addEventListener('scroll', function() {
// Здесь будем менять положение блока
});
Далее, нужно получить блок, который необходимо перемещать. Лучше всего это сделать по классу или идентификатору:
var block = document.querySelector('.block'); // Допустим, класс блока - block
Теперь можно начать менять положение блока при прокрутке страницы. Для этого нужно узнать текущее положение прокрутки окна и с помощью CSS задать блоку новое положение.
window.addEventListener('scroll', function() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop; // Получаем текущее положение прокрутки
block.style.left = scrollTop + 'px'; // Задаем новое положение блока
});
Где `scrollTop` - текущее значение прокрутки страницы, а `block.style.left` - свойство CSS `left` для блока, указывающее его горизонтальное положение.
Также можно добавить анимацию перемещения, например, с помощью `transition` в CSS:
.block {
transition: left 0.5s ease; // Анимация перемещения с продолжительностью 0.5с и функцией easing ease
}
Полный код будет выглядеть примерно так:
var block = document.querySelector('.block');
window.addEventListener('scroll', function() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
block.style.left = scrollTop + 'px';
});
Также можно добавить проверку на прокрутку вниз или вверх, чтобы блок двигался только в одну сторону:
var block = document.querySelector('.block');
var prevScroll = 0;
window.addEventListener('scroll', function() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
var direction = (scrollTop > prevScroll) ? 'down' : 'up'; // Определяем направление прокрутки
if (direction === 'down') {
block.style.left = scrollTop + 'px'; // Двигаем блок вправо при прокрутке вниз
}
prevScroll = scrollTop; // Запоминаем предыдущее состояние прокрутки
});
Таким образом, мы создали код на JavaScript, который перемещает блок по горизонтали при прокрутке страницы с помощью CSS.Нажимая «Регистрация» или «Войти через Google», вы соглашаетесь с Публичной офертой, даете Согласие на обработку персональных данных, а также подтверждаете что вам есть 18 лет
Нажимая «Регистрация» или «Войти через Google», вы соглашаетесь с Публичной офертой, даете Согласие на обработку персональных данных, а также подтверждаете что вам есть 18 лет