Вопрос или проблема
Я работаю над личным проектом, где хочу сделать анимированную сетку, как на этом сайте (https://109ichiki.com/). Буду благодарен за любую помощь. Это мой первый пост здесь, так что прошу прощения, если не следую каким-либо правилам.
Я подумываю о создании нескольких линий внутри двух элементов div: одного для горизонтальных линий и одного для вертикальных. Но я не могу понять, как сделать это адаптивным, как на указанном мною сайте. Анимировать линии будет легко. Единственная проблема, с которой я сталкиваюсь, – это то, как сделать это адаптивным; метод, который я рассматриваю, более жестко закодирован и отнюдь не адаптивен.
Ответ или решение
Чтобы создать анимированный эффект сетки, который будет отзывчивым, как на сайте, который вы упомянули, вам понадобится использовать CSS и JavaScript. Вот пошаговое руководство по созданию такого эффекта:
1. Структура HTML
Начните с создания базовой структуры HTML. Используйте два контейнера для горизонтальных и вертикальных линий:
<div class="grid-container">
<div class="horizontal-lines"></div>
<div class="vertical-lines"></div>
</div>2. Стили CSS
Далее, добавьте стили CSS для настройки внешнего вида сетки и анимации. Используйте Flexbox для отзывчивости:
body, html {
margin: 0;
height: 100%;
overflow: hidden; /* Скрыть полосу прокрутки */
}
.grid-container {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.horizontal-lines, .vertical-lines {
position: absolute;
background: transparent;
pointer-events: none; /* отключить взаимодействие с линиями */
}
.horizontal-lines {
width: 100%;
top: 0;
}
.vertical-lines {
height: 100%;
left: 0;
}
/* Анимация линий */
@keyframes draw {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
/* Основной стиль линей */
.line {
position: absolute;
background: rgba(255, 255, 255, 0.2);
}
.line.horizontal {
height: 1px; /* Толщина горизонтальной линии */
animation: draw 2s infinite alternate; /* Анимация */
}
.line.vertical {
width: 1px; /* Толщина вертикальной линии */
animation: draw 2s infinite alternate; /* Анимация */
}3. JavaScript для генерации линий
Теперь необходимо добавить JavaScript для динамического создания линий в зависимости от размера окна:
const container = document.querySelector('.grid-container');
const horizontalLines = document.querySelector('.horizontal-lines');
const verticalLines = document.querySelector('.vertical-lines');
function createGridLines() {
const rows = Math.floor(window.innerHeight / 50); // количество горизонтальных линий
const cols = Math.floor(window.innerWidth / 50); // количество вертикальных линий
horizontalLines.innerHTML = '';
verticalLines.innerHTML = '';
for (let i = 0; i <= rows; i++) {
const line = document.createElement('div');
line.classList.add('line', 'horizontal');
line.style.top = `${i * 50}px`; // расстояние между линиями - 50px
horizontalLines.appendChild(line);
}
for (let j = 0; j <= cols; j++) {
const line = document.createElement('div');
line.classList.add('line', 'vertical');
line.style.left = `${j * 50}px`; // расстояние между линиями - 50px
verticalLines.appendChild(line);
}
}
// Вызов функции при загрузке и изменении размера окна
createGridLines();
window.addEventListener('resize', createGridLines);4. Объяснение кода
- HTML: Создаем два контейнера для горизонтальных и вертикальных линий.
- CSS: Настраиваем стили для контейнеров и линий. Подключаем анимацию, которая делает линии заметными.
- JavaScript: Создаем функции для генерации линий в зависимости от текущего размера окна. При изменении размеров экрана линии будут подтягиваться заново, сохраняя отзывчивость.
Заключение
Таким образом, вы создадите анимированную сетку, которая будет адаптироваться к размеру экрана. Вы можете настроить расстояние между линиями и их стиль по своему усмотрению, изменяя значения в CSS и JavaScript. Надеюсь, это поможет вам в вашем проекте! Если у вас возникнут дополнительные вопросы, не стесняйтесь спрашивать.