Окончательно! Решил сесть и принять участие в 2022 #100daysofcode, это будет долгое путешествие, начиная с этого момента, я изучаю Javascript вместе с React. Я буду чаще размещать туториалы, в основном ежедневные проекты.
Эта статья будет просто введением обо мне и, возможно, небольшим рассказом о моем первом дне проекта.
Кто я?
Меня зовут Моайед Элла, я программист-самоучка и геймдизайнер. Некоторое время я работал веб-разработчиком (кхм, используя только CSS и HTML), никогда особо не касался JavaScript, но в этом году я решил, что должен больше сосредоточиться на изучении JavaScript вместе с его интерфейсом. библиотеки React, поэтому я решил принять участие в 100-дневном программировании, чтобы улучшить свои навыки. Это я, скучно, да?
Мой первый день из 100
Сегодня я решил начать свой путь с создания простого проекта. Неделю или две назад я увидел веб-сайт, на котором используются модные фоновые градиенты, он выглядит ярко, не верите мне? Вот, посмотри
Решил сделать свою версию. Помните, моя главная цель — сам градиент, может быть, когда-нибудь я сделаю так, чтобы он выглядел красиво.
Начинающийся
Прежде чем начать, я немного изучил awwwards, чтобы увидеть, как они работают и как они оформлены, а затем начал работать над этим.
Сначала я создал его простую версию, ничего особенного, простое разделение HTML с классом и придал ему круглую форму и градиент с фильтром размытия, теперь он начал выглядеть несколько собранным, но чего-то не хватало, безжизненного.
Я начал смотреть, как сделать интерактивный градиент в JavaScript, и я потерялся в количестве кода и библиотек, которые люди используют для создания чего-то такого простого, затем я решил не искать его и попытаться понять это самостоятельно, поэтому я начал реальная работа.
Последний проект
Вот как это выглядит до сих пор
https://codepen.io/moayedellah/pen/NWaYJgo
Начали с простого div, используя его как размытие наложения, установите фильтр фона на размытие, чтобы градиент не выглядел слишком резким.
‹div class="градиент-основной"›‹/div›
.gradient-main {
background-filter: blur(100px);
position: absolute;
width: 100%;
height: 100%;
z- индекс: 5;
}
Затем добавил простую фигуру SVG и начал анимировать ее с помощью бесконечной CSS-анимации, некоторые настройки масштаба и поворота придали ей желаемую атмосферу. Может, мне стоило также анимировать цвет?
Этот SVG взят из CSS Tricks и w3
‹div id="градиент"›
‹svg xmlns:xlink=""http://www.w3.org/1999/xlink"' version="1.1" xmlns="http://www. w3.org/2000/svg»’ viewBox=”0 0 310 350’›
‹linearGradient id=”MyGradient”›
‹stop offset=”5%” stop-color=”#F60’ /›
‹stop offset=”95%” stop-color=”#FF6’ /›
‹/linearGradient›
‹путь d=”M156.4,339.5c31.8–2.5,59.4–26.8,80.2–48.5c28.3–29.5,40.5–47,56.1–85.1c14–34.3,20.7–75.6,2.3–111 c-18.1–34.8 –55,7–58–90,4–72,3к-11,7–4,8–24,1–8,8–36,8–11,5л-0,9–0,9л-0,6,0,6к-27,7–5,8–56,6–6–82,4,3к-38,8,13,6–64 ,48,8–66,8,90,3c-3,43,9,17,8,88,3,33,7,128,8c5,3,13,5,10,4,27,1,14,9,40,9C77,5,309,9,111,343,156,4,339,5z” /›
‹/svg ›
‹/дел›
#gradient {
position: absolute;
fill: url(#MyGradient);
width: 31.25rem;
z-index: -1;
animation: move 10 секунд плавного перехода к бесконечности;
источник преобразования: 50% 50%;
фильтр: размытие (100 пикселей);
}
@keyframes перемещение {
0% {
преобразование: масштаб(1);
}
38% {
преобразование: масштаб(0,8, 1) поворот( 160deg);
}
40% {
преобразование: масштабирование (0,8, 1) поворот (160 градусов);
}
78% {
преобразование: масштаб(1.3) поворот(-20 градусов);
}
80% {
преобразование: масштаб(1.3) поворот(-20 градусов);
}
100% {
преобразование: масштаб(1);
}
}
Затем мне пришло в голову, что предлагает JavaScript, что может позволить мне создать интересное взаимодействие с градиентом, не слишком возясь с этим, тогда я нашел это, положение курсора! Я могу использовать позицию курсора, чтобы изменить левую и верхнюю позиции градиента!
document.addEventListener("mousemove", (событие) => {
пусть градиент = документ.getElementById("градиент");
градиент.стиль.левый = event.clientX + «px»; /> });
Но это все равно выглядит немного утомительно, просто… везде следует за моим курсором? Не увлекательно.
Предупреждение, если вы ненавидите учебу, не читайте это!
Математика пришла на помощь, наконец, эти математические квадраты и интегрирования пришли в реальную жизнь.
Ок, может быть, это уже слишком, давайте продолжим
Я разделил позицию курсора на отрицательное значение, какая гениальность. Теперь у меня есть градиент, который перемещается в соответствии с вашим курсором и выглядит круто, действительно, выглядит круто.
document.addEventListener("mousemove", (событие) => {
пусть градиент = документ.getElementById («градиент»); "px";
});
Что бы я изменил до начала этого проекта
Этот проект был великолепен во всех смыслах, хотя он выглядит и кажется простым, без сомнения, это так, но он заставил меня открыть для себя все возможные вещи, которые я могу с ним сделать.
Я не тратил время на подробное исследование градиентов и того, как они работают, все, что я сделал, это просто посетил веб-сайт, который использует аналогичные методы, и проверил его или поискал некоторые идеи о кворах и переполнении стека, что, как я думаю, будет Также было лучше использование самого градиента, пока что это только один плавающий SVG, я мог бы сделать пару разных фигур, плавающих на заднем плане, и, возможно, придать им импульс движения, используя более загруженные кривые. Моя главная цель — не использовать ничего, кроме чистого CSS или JavaScript, хотя сложнее, но гораздо забавнее открывать свои стили достижения целей, хотя это может быть не лучший способ, по крайней мере, это мой путь.
Заключение
В ходе этого проекта я узнал некоторые важные вещи, которые могут быть полезны и вам.
Во-первых, нет одностороннего метода, вы всегда можете придумать свой стиль достижения цели, а JavaScript великолепен.
Я научился получать позицию курсора относительно всего экрана, элемента div или даже точки на экране, что может очень скоро пригодиться.
Если вам интересно узнать больше обо мне и моем путешествии, вы можете следовать за мной, это мотивирует меня, а также, возможно, вы можете узнать кое-что от меня.
