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

Question

Бернар

html , javascript , css

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

Как можно настроить CSS стили, чтобы создать анимированную звезду, используя абсолютное позиционирование элемента span и свойство box-shadow?

18 апреля 2024 г. 8:00

Ответы на вопрос 1

Похожие вопросы

Answer 1

Для того чтобы анимация падающей звезды запускалась только при прокрутке страницы, можно использовать JavaScript для добавления класса с анимацией при достижении определенной позиции на странице. Например, можно использовать метод `window.addEventListener('scroll', function() { ... })` для отслеживания прокрутки страницы и добавления класса к элементу с анимацией.

Пример:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Falling Star Animation</title>
<style>
    .star {
        display: block;
        width: 20px;
        height: 20px;
        background: #f1c40f;
        position: absolute;
        animation: fall 2s linear infinite;
    }

    @keyframes fall {
        0% {
            top: -20px;
        }
        100% {
            top: 100vh;
        }
    }
</style>
</head>
<body>
<div class="container"></div>
<script>
    const container = document.querySelector('.container');

    function createStar() {
        const star = document.createElement('span');
        star.classList.add('star');
        star.style.left = `${Math.random() * window.innerWidth}px`;
        container.appendChild(star);
    }

    window.addEventListener('scroll', function() {
        if (window.scrollY > 500) {
            createStar();
        }
    });
</script>
</body>
</html>
```

Для создания анимированной звезды с использованием абсолютного позиционирования элемента span и свойства box-shadow, можно воспользоваться следующим CSS кодом:

```css
.star {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid #f1c40f;
    position: absolute;
    animation: fall 2s linear infinite;
}

@keyframes fall {
    0% {
        top: -20px;
        box-shadow: 0 0 10px #f1c40f;
    }
    100% {
        top: 100vh;
        box-shadow: none;
    }
}
```

Этот код создаст звезду с помощью CSS треугольника и добавит анимацию падения с использованием свойства box-shadow для создания иллюзии "мерцания" звезды.