DEV Community

๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

Posted on โ€ข Edited on

3

Water ripple effect with pure HTML CSS and jquery ๐Ÿคฝโ€โ™‚๏ธ

Hi, coding people ๐Ÿ™‹โ€โ™‚๏ธ
Hope you all doing well โœŒ๏ธ and in this dev post you will learn how to make water ripple effect with pure HTML CSS and one JavaScript library ๐Ÿ’

Stay home and learn anything๐Ÿ’‹

Top comments (6)

Collapse
 
madza profile image
Madza โ€ข โ€ข Edited

title should be "Water ripple effect with HTML, CSS and jQuery.ripples"
otherwise I was expecting water ripple effect using just vanilla JS..

Collapse
 
stephanie profile image
Stephanie Handsteiner โ€ข

It's not just me then.

It's the same when people are saying โ€œIt's pure HTML and CSSโ€œ, then you look at the pen and see a bunch of JavaScript in there.

Collapse
 
atulcodex profile image
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ โ€ข

You are right brother ๐Ÿ‘Š

Collapse
 
atulcodex profile image
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ โ€ข

Thanks for the suggestion ๐Ÿ‘

Collapse
 
shadowtime2000 profile image
shadowtime2000 โ€ข โ€ข Edited

First of all, this isn't pure JS. This is JS with jQuery which is a hella large library. That kind of makes the title pretty much misleading. Second, this really isn't a tutorial which you put it as a tag. Your kind of just giving a codepen, it would be nice if you at least explained it so it is more of a tutorial. Lastly, this doesn't seem to be anything that warrants a post at all. All that is being done is calling a simple jQuery function in JS with some parameters.

Collapse
 
atulcodex profile image
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ โ€ข

Hey shadowtime2000,
first of all, I'm really sorry for that silly mistake and I have solved my mistake you can check again.
Question: why I don't try to explain all things with code?
answer: The main reason is that, if I will try to write and explain the entire code it will take much time for me after that I will be disappointed to share my learning journey,

And yes be sure I will try my best to explain my projects in future :)

cheers Atul

Sentry image

See why 4M developers consider Sentry, โ€œnot bad.โ€

Fixing code doesnโ€™t have to be the worst part of your day. Learn how Sentry can help.

Learn more

๐Ÿ‘‹ Kindness is contagious

Please leave a โค๏ธ or a friendly comment on this post if you found it helpful!

Okay