Как создать эффект Воды?

Очень хотелось бы узнать как можно реализовать эффект воды которое используетсья тут
Сразу при заходе на сайт пролистайте наверх чтобы чтобы не ждать а потом увидите картинки с эффектами воды или как там их называют .Я назвал вода потому что это более близко
Пожалуйста без jQuery
.blue { background-image:url("http://www.benmingo.com/static/media/img/home/02.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; }