Realistic Water Effect without JavaScript - HTML/CSS Only
HTML-код
- Опубликовано: 21 окт 2024
- Create a realistic water flowing effect with HTML and CSS using custom svg turbulence filter. No JavaScript needed!
Source Code: redstapler.co/...
SVG Turbulence Filter Article: bit.ly/2MbRKuM
=== Follow us on ===
Facebook: / theredstapler
Website: redstapler.co/
Twitter: / redstapler_twit
#SVG #CSS #WebDesign
This is one of the most amazing things I've seen in web development over the last several years.
It's just a filter ...
@@aperson4051 It's just a filter, but used to create an impressive effect.
@@brawndo8726 just a filter really.
To all who says "it's just a filter", I'd bet my ass you would've "just" make it a video loop instead and "just" set it as the background. It's way more efficient this way and I guess a lot of us didn't even know these type of things can be achieved with only CSS (and good masking).
@@GergiH there isn't a good usage for this man.
No music, straight to the point, 100% will sub for that
I have no idea how did you come up with this idea.
But it was mind blowing!
I'm in web development for years and I haven't seen anything like this before.
Mind blowing
SVG filters is like a separate universe. Maybe someone could recommend a good overview tutorial on the topic?
Gabriel Klenner that‘s what I thought as well
@Gabriel Klenner shesays did a vid on it.
it was a scroling texture
The linked Sara Soueidan article on feTurbulence is very good would recommend
Awesome tutorial . Beware that the svg is heavy on processor load. Leaving it open for a few minutes got my computer nice and toasty.
svg is heavy on processor load?!? you sure?
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.
Pixar CEO “Red Stapler was able to build this in a cave! with boxes of scraps”
"Well I'm sorry. I'm not Red Stapler."
This is me clapping my hands to you dear Sir.
What!?! You created this? This mans a scientist
I was 99.9% sure that it's SVG Turbulence Filter 😺 but 0.1% confused how did you got the cool background to present?!! 🧐😯😱
Nice explanation. 😀👍
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.
AMAZING!!!!!
Simply amazing!!!
Great video, new follower here
Extremely out of mind. You're Genius !
Very soothing background and very soothing voice too!
Very interesting technique, thanks for sharing it in such a short video.
Whilst searching '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?
I am not even frontend but your documentation reading skill made even backend, DevOps guy subscribed to you, So keep up ;)
Css is going to next level
One day we will call it a programming language wait for sometime
Or not, this effect is just simple. If you were to do that realistically (Not like in the video where it is just an image deformation), it needs a shader...
Clear explanation and it’s a video with audio not text thank you 👏👏❣️
I can't see that background in the same way as I did initially xD
That's amazing! Thank you so much.
This is really amazing, of course subscribed and a big 👍
That's incredible!
I love this! Great presentation!
I'm scared to check the canIuse of these filters
Looks like only safari can't handle the feTurbulence-element.
Thank you for this, appreciate it!
I wish there was a bit more explanation of what's going on after you inserted the svg, but I'll read the documentation.
This is amazing. Thank you so much for sharing!
Absolutely superb!
Next level Idea!
This is one of the most amazing things I've seen in web design for the last couple of days
Nice work literally copying the top comment.
Wow! spectacular!
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.
And finally i need this for minecraft rtx technology
wow this is overpowered. i feel completely useless due to the fact i never used svg filters and i've played with hmtl/css for 20 years. definitely some potential here.
Keep the great work up
Thats mindblowing
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.
But these CSS animations can run on the GPU.
@@nofacee94 Making them pointless on anything other than desktop or non-webgl platforms
@@derekacosta1584 Why's that? Mobile devices have more than adequate GPUs in them for this, and coding using CSS has less boilerplate than a WebGL variant.
@@K-Fed This is a desktop only kinda thing in my mind, why the hell would you want your phone to slow down and get hot when you open up a website? You'd go to another one
@@sugarbooty That entirely depends on the application and the implementation. If you're serving up a rich SPA that doesn't have a huge amount of content, then the CPU usage will be very reasonable. That's especially true if you scale the graphic size to the screen size of the mobile device. I tried the demo on my old Samsung Note 4 and it's perfectly fluid and doesn't cause any slowness of the device. On my 10 year old laptop, my CPU barely reaches more than 2% and I don't notice any performance impacts with the tab open and in focus.
You also have to keep in mind that performance isn't crucial for a lot of applications. For something like Amazon or Google search results, having a fast and snappy website may increase retention and conversions. A leisure website where people just mindless browse cool images and videos after their day is complete won't need to be optimized the same way to shave a few milliseconds on page load or save and handful of CPU cycles.
Awesome, thank you. Is it, or can it be made responsive?
Hats off to you my man!
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
This and That just an assumption: Ripple effects like these are normally realized with a Normal/Displacementmap as seen in this video. So the effect is pretty surly achieved with shaders and shaders run on gpu not cpu
Jason Stewart
1 week ago:
Awesome tutorial . Beware that the svg is heavy on processor load. Leaving it open for a few minutes got my computer nice and toasty.
This moment when you made most beautiful game in html and css
wow, i didnt know this was possible
Instant subscription!
To the point simple. Nice.
I'd love to know if implementing this in an actual website is too resource intensive or not.
It is
@@tapwater424 rip.
Awsome. Just awsome.
wau amazing mind blowing
😱😱😭Thanks so much. I'm struggling with this problem
Wow, amazing.
This is something next level which I never achieve 😂😂
Copy paste
In fact it's very easy to achieve
a really great job 👍
Super nice!
Is there any way to control the flow direction of the water?
Simple, bonito y hermoso 😍👌
It's magic.
Thank you, it helped a lot! :)
beautiful
Awesome! thanks dude!
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?
lol
🙏🙏🙏
*prophet
www.dictionary.com/browse/prophet?s=t
@@MaxxSkywalker Which is exactly what I wrote. Your point being? Either way, this was a just an experiment of mine, as I use you sniveling swine to learn more about your predictable and grotesque behaviors. For you see, I am one of the biggest, if not the biggest troll in the game. I take on many forms, and many names, to say the least. You have all dealt with me in some way or another. I decided to write something positive for once, mostly as a concrete test to determine the extent to which I've been shadow-banned from RUclips. It's become quite clear RUclips/Google are a mission to silence anything they deem 'negative', perhaps in an effort to create a false utopia. I'm actually a white-night, a fighter for justice and free speech, tackling the biggest issues facing the planet and the human race as a whole. BOW TO ME, scum.
@@lonnybulldozer8426 Huh? I was just correcting your spelling, dude. Chill out. You had "profit", which is something else entirely. Nice of you to fix it, and then go into a non sequitur, though.
dude thats so awsome
Awesome tutorial
Very nice. Thanks.
This is fantastic but be aware it will max out the GPU on the average system!
You could make a bunch of copies of the entire filter with slightly different parameters using CSS animation keyframes, and alternate between them. This way the browser will only have to render most of the animation once.
Edit: When I'm back at my computer I'll make a codepen and post it here.
@@alekskenins bump
bump
@@alekskenins could you please 🙏
@@alekskenins hi
Amazing 👌💐
Cool! Gotta try!
very nice!
Fantastic
Would it be better if you just use a gif as background?
never use large gif background. it has extreamly large file size due to inefficient encoding. For example, a 2 MB video background could turn into a whopping 10MB+ in gif.
@@RedStapler_channel it has small file sizes with videos that have more static pixels
The basic way to make such a background is to use a video in mp4 format.
I think the point of this Video is to show whats possible with only CSS and HTML. It becomes much more interesting when you have been a developer for +10 years. Its freaking great to see what CSS can do Nowadays. Back then, you had to do stuff like this with flash, a programming language.
This CSS effect is stunning because HTML is only a markup language, css only a stylesheets language and no one ever expected that html and css would be able get Stuff like this done. This Video shows how easy Webdevelopment has become with html5 and css3. From the programmer perpective is webdev more interesting and fun than ever before.
But from a practically view is this effect quiete dumb. I cant imagine a single Website which needs something like this. Its only for fun and shouldnt be done for serious business.
I don't know why its not visible when i am trying to run it on the browser, can anyone tell why this happened
You are great! Thx :D
So nice❤️
very nice job!
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
Great....U complete Me!!
Nice!
Respect👍
This is html 6, man, I wish I had 10 rtx titans to compute this. Nice
Can you say what screen recorder you are using ❓
“If you think this is a video back ground, you’re wrong. It’s Chuck Testa
brb, just changing my name to Jon Snow because I clearly know nothing. 🤯
Holy big brain
Wow, this earned a sub
How to add 3Dpanorina effect in website
I need a help, I used this code on my website, but I have more elements under this and at the bottom of the page I have a blank space, and when I open inspect page, there I can see svg file... I am new in the web design, so I hope someone know what I mean :D
What text editor you are using here??
Reachester Jala visual studio code
Can we just put a gif ?
no, gif at this size and framerate will greatly slow your website loading time.
@@RedStapler_channel Oh ! ok thx ! :) btw nice vidéo !
класс!!!!
"HTML/CSS only"
0:57 i will photoshop..
He also used a camera to take a photo of the sea
He also travelled to the location. 😒
This clearly requires a pc and text editor too. Smh
How about electricity?
yes you better not follow his advice , because it requires a brain too.
wonder how much cpu cycles (percentage) this effect burns ;) great stuff though!
azhat GPU
It is simple and no need to know css and html,
Just install SEUS PTGI E9
when will u create life into that
please reply me. where did you get your own sea image
A wonderful device called "camera".
Virtualmix 😂😂😂
@@Virtualmix I don't have Photoshop on my pc and can't pay for it, any other way to edit the picture , cause you said save it in Photoshop as transparent png
@@ChiemekaNwogu Yes, install GIMP, it's a free opensource software as capable as Photoshop. After opening your image in Gimp, go to "Layer > Transparency > Add alpha channel" to set the transparency. After that, export your image as PNG.
dope
that's, sorry for my french, fucking beautiful f
Awesome! I will use this to improve the gore effect (hidden easteregg) on our company's website 😄
woooow
Wow.
mine isn't working
Why not just use a gif ?
77 people were not able to link the CSS file into their html.