Realistic Water Effect without JavaScript – HTML/CSS Only

Realistic Water Effect without JavaScript –  HTML/CSS Only


if you think this is a video background
you’re wrong it’s only HTML and CSS and this tutorial I’m going to show you how
to create a realistic water effect using SVG turbulence filter and CSS let’s
check it out so first let’s create a div and then set this image as background in
CSS next I’m going to create a mask layer I
will use Photoshop to remove all non water part of the image you can use
quick selection tools for this job use shift button to add a selection
sometimes if you pick up more area than you need so you can use the alternate
button to remove it once you got all the non water part
press Delete then you can use the eraser tools for
detailing and then save the file as transparent
PNG now I’m going to create a new div inside
the first and then set the mask image that we
created as background you won’t see any change yet but the
next step is to key we will use SVG turbulence filter basically it’s a
filter that creates a turbulence effect on any element. The splash you see here
it was a circle before the filter was applied you can create a turbulence
filter using SVG tag then set up the turbulence frequency and
some characteristic then applied to any element using CSS filter property
okay let’s start first create SVG tag and a future tag inside we will set the origin position
to 0 and size to 100% then create feTurbulence tag here you
can define the characteristic of the turbulence using attribute like seed and
frequency it’s easier to understand each of them in action there is a nice
article on codrop with demo that you can try out you can find link in the
video description box next create if a displacement map tag
here you can set the future scale amount and input we are set it to sourceGraphic which means we’ll use the source element that the future was applied on
as input then create animate tag and linked it with our filter id we will animate the baseFrequency to create a ripple effect we will set the duration to 60 seconds the keyTimes and values are basically the same as keyframes in CSS. What I’ve just
typed means I have divided the animation into 3 keyframes. First the baseFrequency is at 0.02 and 0.06 Then at the half of the
animation is 0.04 and 0.08 Then at the end is back to 0.02 and 0.06 again I will also set the repeat count to
indefinite to create a loop and finally applied filter in CSS using
the id of the filter tag and that’s all for this tutorial you can
find a code in the video description box if you love this and want to see more
dev tips and tutorials subscribe our channel to stay tuned thanks for
watching see you next time bye

Comments

  1. Post
    Author
  2. Post
    Author
  3. Post
    Author
  4. Post
    Author
  5. Post
    Author
  6. Post
    Author
  7. Post
    Author
  8. Post
    Author
  9. Post
    Author
  10. Post
    Author
  11. Post
    Author
  12. Post
    Author
    Alex Holker

    Very interesting. I've used SVG filters and masks before (using feColorMatrix to recolour a character's football uniform), but haven't looked into other filters like this one.

  13. Post
    Author
  14. Post
    Author
    Alexey Guch

    Очень круто! Но нифига не понятно. Повторить легко, а кастомизировать нереально. Надо в эти фильтры погружаться. А так спасибо за пример!)

    Cool effect!

Leave a Reply

Your email address will not be published. Required fields are marked *