Как сверстать переход между блоками в виде волны?

Question

[Kozlov]

Нужно сверстать переход между блоками в виде волны. Читал про svg-маски, но их к блоку не применить. Подскажите, как это сделать лучше?

Пример

Answer 1

[Сергей Горячев]

svg + box-shadow
https://tympanus.net/codrops/2013/10/03/a-collecti...
https://tympanus.net/Development/SectionSeparators/

вот эту волну svg-шкой, а здание ниже и текст div2 через margin-top приподнять


ps: но ввиду особенной геморройности я бы сделал картинками :)))

Comments

[Beliyadm]

Картинками всегда будет проще, это ведь статика оформления, заморачиваться с свг нет смысла

[Сергей Горячев]

Пётр, угу, плюс с адаптивностью не трахаться.

[Beliyadm]

Сергей Горячев, а что там с адаптивностью то сложного? Делаем фоновую картинку как background-size: cover, поднимаем нижний блок отрицательным margin-top до нужного уровня и для трех базовых размеров экрана указываем нужное позиционирование, ну может придется пару нестандартных медиа запросов дописать для средних положений

[Сергей Горячев]

Пётр, читайте внимательно) я имел ввиду, что "картинками лучше, потому что... с адаптивностью (svg) не трахаться."

[Beliyadm]

Виноват, не понял иронии ))

Answer 2

[profesor08]

Легко же. Берешь PIXI.js, добавляешь две группы, в каждой нужна картинка, создаешь маску для картинки, где одна сторона будет волной (это синус от точки на горизонтали). Далее добавляешь к нему некое изменяющееся значение, пихаешь в ticker или в requestAnimationFrame, зацикливаешь и получаешь крутой аниммированный бэкграунд. И тот див тоже можешь двигать, ведь нужную точку ты будешь знать (выбери подходящую из тех что сгенерировал синусом), привяжи положение дива к этой точке, и получится вообще крутяк!

Comments

[dom1n1k]

Великолепно. Ради несложного бэкграунда тащить >400Kb JS. Превосходно.

[profesor08]

dom1n1k, ну ты можешь и ручками это все на канвасе провернуть, если скилухи хватит. И не 400кб, а 93.

[dom1n1k]

В гзипе 90, а вот без него - овер 400.

[profesor08]

dom1n1k, ну и что? Важно то, сколько передается данных и как часто это происходит. Если хост настроен, то передастся 90. Как только передастся, то попадет в кеш, кеш локален. Напоминаешь ненавистников jquery, у которых единственный аргумент 90кб и ни слова о технической части.

[dom1n1k]

Важно то, сколько передается данных и как часто это происходит.

А вот и нет, количество сетевого трафика это ещё не всё.
JS это самый дорогой ресурс, потому что его намного сложнее парсить, компилировать и исполнять.
Настоятельно рекомендую изучать вплоть до просветления:
https://medium.com/dev-channel/the-cost-of-javascr...
https://medium.com/@addyosmani/the-cost-of-javascr...

Картинка

[profesor08]

dom1n1k, ты можешь сколько угодно приводить графики производительности и их влияние на открытие страницы (миллисекунды), следовать пастулатам ненавистников jquery, но это не имеет смысла, когда твой код перестает работать, потому что ты забыл учесть какой-то тривиальный нюанс (чего-то нет, что-то не так, не поддерживается браузером и тд в этом духе). Это неизбежно, и вот тогда, когда хапнешь горя, начнешь писать свой собственный jquery, но быстро поймешь, что одному это не по зубам, и начнешь использовать библиотеки или фреймворки. Вздахнешь полной грудью, и начнешь писать код который делаем именно то, что надо, а не +10 доп задач.

[dom1n1k]

Заметь, я вообще не упоминал jquery :)
Ты сейчас споришь не со мной, а с какими-то своими домыслами.

[profesor08]

dom1n1k, какая разница, будь то pixi, jquery, или любая другая либа. Речь не о конкретной либе, а о их применении в целом.