Как создать эффект Воды?
1,00
р.
Очень хотелось бы узнать как можно реализовать эффект воды которое используетсья тут
Сразу при заходе на сайт пролистайте наверх чтобы чтобы не ждать а потом увидите картинки с эффектами воды или как там их называют .Я назвал вода потому что это более близко
Пожалуйста без jQuery
.blue { background-image:url("//i.sstatic.net/Zt1S7.jpg") width:400px height:400px background-size:cover }
Ответ
Такой эффект достигается средствами WebGL, как уже комментировал ваш вопрос Максим Ленский, есть реализация такого эффекта на Codrops тут и тут. Так же можно использовать библиотеку PixiJS. Пример: https://www.goodboydigital.com/pixijs/examples/15/indexAll.html Пример как вариант реализации на SVG. Анимация не точная, но сам принцип я продемонстрирую.
Решение с SVG я бы не рекомендовал, т.к. потестировав на больших изображениях, оказалось что Chrome не справляется с анимацией фильтров, в то время как Firefox показывает нормальную производительность. Для решения подобных задач я рекомендую использовать первые 2 варианта.
var img = document.querySelector("#filter feTurbulence") var frames = 0 var rad = Math.PI / 360 function AnimateBaseFrequency() { bfx = .04 bfy = .04 frames += 3 bfx += 0.01 * Math.sin(frames * rad) bfy += 0.01 * Math.cos(frames * rad) bf = bfx.toString() + ' ' + bfy.toString() img.setAttributeNS(null, 'baseFrequency', bf) window.requestAnimationFrame(AnimateBaseFrequency) } window.requestAnimationFrame(AnimateBaseFrequency) .test { -webkit-filter: url("#filter") filter: url("#filter") position: relative transform: scale(1.05) } #imgWrapper { overflow:hidden position: absolute top:0 left:0 z-index: 1000 }
Сразу при заходе на сайт пролистайте наверх чтобы чтобы не ждать а потом увидите картинки с эффектами воды или как там их называют .Я назвал вода потому что это более близко
Пожалуйста без jQuery
.blue { background-image:url("//i.sstatic.net/Zt1S7.jpg") width:400px height:400px background-size:cover }
Ответ
Такой эффект достигается средствами WebGL, как уже комментировал ваш вопрос Максим Ленский, есть реализация такого эффекта на Codrops тут и тут. Так же можно использовать библиотеку PixiJS. Пример: https://www.goodboydigital.com/pixijs/examples/15/indexAll.html Пример как вариант реализации на SVG. Анимация не точная, но сам принцип я продемонстрирую.
Решение с SVG я бы не рекомендовал, т.к. потестировав на больших изображениях, оказалось что Chrome не справляется с анимацией фильтров, в то время как Firefox показывает нормальную производительность. Для решения подобных задач я рекомендую использовать первые 2 варианта.
var img = document.querySelector("#filter feTurbulence") var frames = 0 var rad = Math.PI / 360 function AnimateBaseFrequency() { bfx = .04 bfy = .04 frames += 3 bfx += 0.01 * Math.sin(frames * rad) bfy += 0.01 * Math.cos(frames * rad) bf = bfx.toString() + ' ' + bfy.toString() img.setAttributeNS(null, 'baseFrequency', bf) window.requestAnimationFrame(AnimateBaseFrequency) } window.requestAnimationFrame(AnimateBaseFrequency) .test { -webkit-filter: url("#filter") filter: url("#filter") position: relative transform: scale(1.05) } #imgWrapper { overflow:hidden position: absolute top:0 left:0 z-index: 1000 }
