В этом посте мы собираемся создать потрясающий сквозной эффект с помощью CSS и большого количества JavaScript.
Итак, перейдите к своему терминалу и создайте папку LineThroughEffect. Создайте в нем три файла - index.html, main.js и styles.css. Мы также открываем файлы в VS Code.
Теперь мы добавим базовый HTML-код в index.html, а также свяжем файлы css и js. У нас очень мало html в этом проекте, с div с идентификатором line и h1 с идентификатором text.
Теперь перейдите в styles.css и добавьте основные стили для body и h1. Мы также центрируем h1 и увеличиваем его размер.
Затем мы добавим код для строки. Он имеет анимацию и перемещается слева направо. Также обратите внимание, что он находится над h1, поскольку z-index равен 2.
Теперь пора перейти к main.js. Здесь мы сначала разделяем наш текст с помощью функции split (). После этого мы создаем новый h1, обновляем его innerHTML и добавляем его в dom. Мы перебираем textArr в цикле и передаем его в span.
Теперь мы присоединимся к массиву, и наш новый h1 будет поверх старого h1. Далее мы добавляем к нему класс оверлей.
Теперь вернитесь к styles.css и создайте класс наложения и присвойте ему z-index, равный 2 . Теперь кажется, что линия находится за текстом. Но на самом деле между обоими h1 есть песочница.
Теперь, вернувшись в main.js, мы добавляем стиль к диапазону. Здесь мы вызываем функцию randomVisibility ().
Внутри функции randomVisibility () мы используем Math.random () для генерации случайных чисел от 0 до 1. Таким образом, в половине случаев видимость будет скрыта. В этих случаях наш созданный h1 с наложением будет скрыт, но другой h1 будет там. Таким образом, он будет выглядеть так, как если бы над ним была белая линия.
Это можно лучше увидеть на гифке ниже.
На этом наш небольшой проект завершен. Вы можете найти его код в этом репозитории на github.
