🍦 Vanilla JS Starry Night

В этом посте я хотел бы поделиться с вами демо -версией Vanilla JS Twinkling Stars на гладком черном холсте. По сути, такая проблема включает в себя дело со случайными параметрами, такими как ширина звезды, высота, координаты и длительность мерцания. Я думаю, что, вероятно, лучше начать с соответствующей части CSS для этой небольшой демонстрации и пройти наш путь к части JS.

Вот несколько ссылок для этой демонстрации:

👉 Github Repo: https://github.com/yoss-abramov/starry-night

👉 страница GitHub: https://yossi-abramov.github.io/starry-night/

CSS

.star {
  --twinkle-duration: "";
  --twinkle-delay: "";
  --star-size: "";
  position: absolute;
  width: var(--star-size);
  height: var(--star-size);
  background: #fff;
  border-radius: 50%;
  animation: twinkle infinite alternate;
  animation-duration: var(--twinkle-duration);
  animation-delay: var(--twinkle-delay);
}

@keyframes twinkle {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.5);
        box-shadow: 0 0 5px 0.5px rgba(150, 150, 150, 0.6);
    }
}

Я создал .star Класс для моих звезд и инициализировал в нем переменные CSS. Образуя эти переменные в .star Класс Мы можем сделать эти переменные ведут себя как «аргументы». Это означает, что мы можем установить значение для нашего значения CSS -свойства на данном элементе Star (просто подумайте обо всех классных вещах, которые вы можете построить с помощью переменных CSS!). Далее я установил Ключевой кадр Анимация для эффекта «мерцания». Как видите, оба Продолжительность анимации и анимация-задержка иметь присвоенную им переменную CSS. Что касается мерцания Ключевой кадр , это довольно прямо: чередование бесконечно между шкалой 1 и 1,5 размера звезды и добавьте Box-Shadow Для мягкого света эффекта.

JS

Теперь давайте пройдемся по части JS кода. Как упомянуто выше, нам нужно иметь дело с некоторыми случайными «звездными» свойствами. По этой причине первое, что нам нужно, – это функция, которая генерирует случайное число между мин и Макс Анкет Для этого мы можем использовать Mighty JS Math объект:

const genRandomNumber = (min, max) => {
    return Math.random() * (max - min) + min;
}

После настройки нашего Genrandomnumber Функция мы можем перейти к определению границ нашего микрокосмоса/холста/ночного неба. Помните, нам нужно случайным образом распространять наши звезды по пространству. Поэтому сначала нам нужно выбрать нашего родителя и дать нашим координатам звезд относительно выбранного родителя. В этом случае я выбрал тело элемент:

const $el = document.body;

Теперь все, что нам нужно сделать, это создать элемент, добавить .star Класс к нему и передайте необходимые случайные свойства CSS, которые мы определили в нашем CSS. После создания нашего звездного элемента мы просто добавим его к родительскому элементу – тело в таком случае. Нам нужно повторить этот процесс x Количество раз – так просто для петля подойдет!

for (let index = 0; index < 1000; index++) {
    const star = document.createElement("div");
    star.classList.add("star");

    // Star coordinates
    let x = genRandomNumber(1, $el.offsetWidth);
    let y = genRandomNumber(1, $el.offsetHeight);

    star.style.left = Math.floor(x) + "px";
    star.style.top = Math.floor(y) + "px";

    star.style.setProperty(
        "--star-size",
        genRandomNumber(1, 3) + "px"
    );

    star.style.setProperty(
        "--twinkle-duration",
        Math.ceil(genRandomNumber(1, 5)) + "s"
    );

    star.style.setProperty(
        "--twinkle-delay",
        Math.ceil(genRandomNumber(1, 5)) + "s"
    );

    $el.append(star);
}

Давайте немного рефактируем этот код, вот еще одно предложение:

// Night Sky element

const $el = document.body;

// Generate a random number between min and max values

const genRandomNumber = (min, max) => {
    return Math.random() * (max - min) + min;
}

// Generate a star 


const genStar = () => {
    const star = document.createElement("div");
    star.classList.add("star");

    // Gen star coordinates relative to $el size
    let x = genRandomNumber(1, $el.offsetWidth);
    let y = genRandomNumber(1, $el.offsetHeight);

    const { style } = star;

    style.left = Math.floor(x) + "px";
    style.top = Math.floor(y) + "px";

    style.setProperty(
        "--star-size",
        genRandomNumber(1, 3) + "px"
    );

    style.setProperty(
        "--twinkle-duration",
        Math.ceil(genRandomNumber(1, 5)) + "s"
    );

    style.setProperty(
        "--twinkle-delay",
        Math.ceil(genRandomNumber(1, 5)) + "s"
    );

    return star;
}

for (let index = 0; index < 800; index++) {
    $el.append(genStar());
}

✍ Для получения дополнительной информации: https://yossiabramov.com/

Оригинал: “https://dev.to/yossiabramov/vanilla-js-starry-night-4e7k”