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

100 comments

  1. you need to change the title from Realistic Water Effect without JavaScript – HTML/CSS Only to Realistic Water Effect without JavaScript – HTML/CSS Only/photoshop

  2. It's so beautiful, I cried tears of joy. I saw the face of God in the peaceful flow of the water. I don't believe this is just HTML and CSS, I believe you are a prophet sent down from the heavens to guide us through these trying times. I'm willing to fight for you, just tell us all what to do. Why are we here?

  3. Обычный человек: я поставлю видео на фон и не буду париться
    Я:

  4. Okay I think this ia the best time to return in learning again html, css and this svg things. It is so wonderful to watch.

  5. Whilst searching <svg>'s meaning, I read ''But there are some SVG properties that cannot be animated through CSS that can through SVG. An SVG path, for example, comes with a set of data (a d="" attribute) that defines that path's shape. This data can be modified and animated through SMIL, but not CSS.''
    So is this HTML/CSS or HTML/CSS/SMIL?

  6. Awesome tutorial . Beware that the svg is heavy on processor load. Leaving it open for a few minutes got my computer nice and toasty.

  7. I'm so lucky to have come across this video. The filter tag you applied to the avg is the exact effect effect I'm looking for. I want to recreate the visual effect that occurs when you animate an image that's drawn slightly differently in each frame.

  8. This is great but I wonder how hard this is on the processor. Reminds me how we used to fake stuff in flash but this is way cooler

  9. Don't like the video, because you are using multiple pictures combined with animation. If the video title had that in it, or the description I would have not clicked on this. I know you want $ and don't give a damn about integrity, but you should.

  10. This feature is only good as a clever trick. Every time we try to incorporate even simple animations into our web apps the added CPU usage is just not worth it.

  11. How I can set as a background in my website and please also provide a mobile friendly interface how to do help l loved your video very very very much

Leave a Reply

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