Мне нужно создать шаблон дизайна, в котором некоторые модули контента имеют штриховку в качестве элемента оформления:
Модули и, следовательно, штриховки одинаково отзывчивы, поэтому модули и штриховки бывают всех мыслимых размеров и соотношений сторон. Штриховки тоже могут иметь разное положение:
Очевидно, что эти штриховки реализованы с помощью простой фоновой плитки SVG:
Вот проблема: Отдел дизайна придумал анимацию для штриховки, где линии начинаются с разной длины и растут, пока каждая линия не достигнет своей окончательной длины:
Возможно, я упускаю здесь что-то очевидное, но я не могу понять, как сделать это отзывчивым. Конечно, я мог бы использовать lottieFile или даже видео, но они будут корректно масштабировать ширину строки и пробелы — и об этом не может быть и речи.
Отдел дизайна уже продал анимацию заказчику, так что мне действительно нужно найти способ... есть предложения?
Обновлено: предоставил пример кода:
БОЛЬШЕ Обновлено: вам нужно переключиться на «Полная страница» при запуске фрагмента кода, чтобы увидеть правильное отображение элементов... странно...
.grid {
margin: 0 auto;
width: 75vw;
max-width: 800px;
height: 75vh;
display: grid;
grid-template-columns: 100px 1fr 100px;
grid-template-rows: 100px 1fr 100px;
}
.contentElement {
grid-column: 1 / 3;
grid-row: 1 / 3;
z-index: 2;
padding: 40px;
background-color: lightgray;
}
.hatching {
grid-column: 2 / 4;
grid-row: 2 / 4;
z-index: 1;
/* background-image: url(img/background/tile_hatching_l.svg); */
/* background-repeat: repeat; */
background-color: red;
}
<!-- grid -->
<div class = "grid">
<div class = "contentElement">
This is the content element
</div>
<div class = "hatching"></div>
</div>
<!-- end grid -->
Ну, вы могли бы думать об этом как о своего рода тени, состоящей из линий с определенной шириной и расстоянием между линиями, чего можно легко добиться, используя фоновую плитку (как я). Проблема в том, что эта «тень» должна иметь анимацию, которая влияет на некоторые строки иначе, чем на другие, без изменения ширины линии или расстояния между строками.
Возможно, я должен упомянуть, что элемент содержимого и штриховка — это отдельные элементы div в общей сетке. На сетку влияет размер элемента содержимого.
Мне понадобится ваш код, чтобы попытаться воссоздать анимацию на моем локальном хосте.
Хорошо, я создам упрощенный пример кода — дайте мне минутку, пожалуйста :)
добавил пример кода :)
Можно сделать только с помощью CSS
@Floyd ваш пример кода даже близко не соответствует предлагаемым изображениям. По крайней мере, правильный выбор элемента «подложка» — это хорошее начало? Итак, если я правильно понял вопрос, кто-то предложил анимировать каждую полоску по отдельности?
@RokoC.Buljan да, это так :) Штриховка - это div, который находится под элементом содержимого и имеет фоновую плитку, которая создает линии - очень просто. Только то, что я закомментировал строки CSS для фоновой плитки и вместо этого добавил цвет фона.
@vsync это приятно слышать. Скажешь как? :)
@vsync да, я тоже жду этого! ;)
@RokoC.Buljan Да, кто-то предложил именно это...
Итак, в основном SVG, более простая и случайная реализация этого? jsfiddle.net/ym31k7fe - Я не думаю, что это возможно только с помощью CSS. Там есть случайность и другие вещи, я не уверен, как кто-нибудь реализует это в CSS.
Это можно сделать с помощью CSS, но это заняло бы у меня несколько часов, а я в разгар рабочего дня... просто отметил, что это возможно :) надеюсь, что человек с некоторыми навыками + свободное время сможет прийти и спасти день
Кажется, @RokoC.Buljan уже предоставил хорошее решение. Я не думаю, что решение только css возможно, потому что какое-то (неуказанное) событие должно запускать анимацию.
Штрихи в этом решении являются псевдослучайными и повторяются каждые 20 строк. Узор повторяется каждые 200 пикселей по горизонтали, но растягивается по вертикали до высоты обертывающего элемента <svg>
. Каждая линия изначально вертикальна, и только после того, как шаблон подогнан, она перекошена, поэтому линии кажутся диагональными.
document.querySelector('button').addEventListener('click', ()=> {
document.querySelector('#hatches path').classList.add('full');
})
#hatches path {
fill:none;
stroke:red;
stroke-width:1;
transition: d 1s linear;
}
#hatches path.full {
d: path('M 5,0 5,100 M 15,0 15,100 M 25,0 25,100 M 35,0 35,100 M 45,0 45,100 M 55,0 55,100 M 65,0 65,100 M 75,0 75,100 M 85,0 85,100 M 95,0 95,100 M 105,0 105,100 M 115,0 115,100 M 125,0 125,100 M 135,0 135,100 M 145,0 145,100 M 155,0 155,100 M 165,0 165,100 M 175,0 175,100 M 185,0 185,100 M 195,0 195,100')
}
rect { fill: url(#hatches) }
<svg width = "400" height = "300">
<pattern id = "hatches" width = "200" height = "100%" patternUnits = "userSpaceOnUse" viewBox = "0 0 200 100" preserveAspectRatio = "none" patternTransform = "skewX(-45)">
<path d='M5,37 5,91 M 15,40 15,80 M 25,11 25,59 M 35,26 35,79 M 45,29 45,83 M 55,50 55,98 M 65,20 65,59 M 75,7 75,99 M 85,17 85,56 M 95,33 95,55 M 105,20 105,67 M 115,45 115,55 M 125,18 125,93 M 135,33 135,89 M 145,20 145,98 M 155,14 155,62 M 165,45 165,64 M 175,3 175,53 M 185,20 185,73 M 195,30 195,59' />
</pattern>
<rect width = "100%" height = "100%" />
</svg>
<button>Fill</button>
Я не уверен, что понимаю, я полагаю, что штриховка, основанная на изображениях, которые вы включили, должна быть чем-то вроде тени элемента, которая будет постепенно отображаться по мере загрузки страницы?