Сделайте наложение шума, используемое на отмеченных наградами сайтах, за 3 шага
Возможно, вы столкнулись с этой тенденцией на Awwwards, особенно на некоторых сайтах-портфолио.
Вы можете ясно увидеть это на сайте Дэвида Ободо.
Отправной точкой является поиск изображения текстуры наложения шума, которое мы можем использовать. Лучше всего подойдет что-то тонкое с прозрачным фоном.
Это тот, который я собираюсь использовать. Просто щелкните правой кнопкой мыши и сохраните изображение, чтобы использовать его со мной 👇
1. HTML
Давайте создадим div и присвоим ему класс. Лучше всего располагать этот div внутри тела, но отдельно от всего остального.
HTML:
<div class="noise"></div>JSX (React):
<div className="noise"></div>2. Установка фонового изображения и его заполнение экрана.
Может показаться странным, что мы делаем изображение намного больше экрана, но это необходимо, поскольку при добавлении анимации оно будет сильно перемещаться.
.noise {
background-image: url("../assets/noise.png");
position: fixed; // To show noise at all times
top: -50%;
left: -50%;
width: 200%;
height: 200vh;
opacity: 0.5; // To make the effect more subtle. You can adjust this to your liking.
}3. Добавляем шумовую анимацию
Идея здесь состоит в том, чтобы очень быстро перемещать изображение. Сначала нам нужно добавить свойство анимации к нашему существующему селектору .noise.
.noise {
// Your existing code
animation: noise 0.3s infinite;
}Теперь о ключевых кадрах:
@keyframes noise {
0% {
transform: translate(0, 0);
}
10% {
transform: translate(-5%, -5%);
}
20% {
transform: translate(-10%, 5%);
}
30% {
transform: translate(5%, -10%);
}
40% {
transform: translate(-5%, 15%);
}
50% {
transform: translate(-10%, 5%);
}
60% {
transform: translate(15%, 0);
}
70% {
transform: translate(0, 10%);
}
80% {
transform: translate(-15%, 0);
}
90% {
transform: translate(10%, 5%);
}
100% {
transform: translate(5%, 0);
}
}Вот и все!
Если вы теперь установите темный цвет фона вашего тела, у вас должно получиться что-то похожее на этот 👇
