Make Water Ripple Effect use CSS and jQuery - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Make Water Ripple Effect use CSS and jQuery, we have prepared well for this article you read and download the information therein. hopefully fill posts Article Coded, Article CSS, Article CSS3, Article HTML, Article jQuery, Article Snippet, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Make Water Ripple Effect use CSS and jQuery
link : Make Water Ripple Effect use CSS and jQuery

Make Water Ripple Effect use CSS and jQuery

Semenjak era gadget booming, beberapa (OS) telah dapat dioperasikan melalui iPad, iPhone, smartphone, tablet dll! Dengan begitu semakin kencang laju para developer dari berbagai sektor mengembangkan aplikasi, code, script dsb untuk perangkat² tersebut. Tak ayal dari dunia CSS & HTML pun ikut lahir trik dan tips keren² punya yang tidak boleh terlewatkan :D
Ada satu trik efek yg sedang ngetrend di kalangan gadgeter's yaitu water effect, ada juga yg bilang click effect, water ripples atau apapun namanya. Efek memunculkan riak air (water ripple effect) ketika terjadi sentuhan² pada objek!

Sobat dapat membaca beberapa resources pilihan AA seperti berikut:

• Android L Ripple Effect.
>> codepen.io/idiotWu/pen/nefhC
• Material design morphing icons 2.
>> codepen.io/albebonv/pen/gIlrw
• Recreating the Touch Ripple Effect as Seen on Google Design.
>> webdesign.tutsplus.com/tutorials/recreating-the-animated-circle-effect-as-seen-on-google-design--cms-21655
• Water ripple FX with Canvas and Javascript.
>> code.almeros.com/water-ripple-canvas-and-javascript

Berawal dari sanalah tercipta water ripple effect dengan komposisi small code + jQuery :P

DEMO & CODE

.ripple {
width:450px;
overflow:hidden;
display:inline-block;
transform:translateZ(0);
transition:all 0.5s ease;
box-shadow:0 0 5px rgba(0,0,0,0.2);
}
.ripple:hover {
box-shadow:0 0 10px rgba(0,0,0,0.4);
}
.ripple:focus {
outline:0;
border:none;
}
.ripple_effect {
width:100%;
height:100%;
position:absolute;
border-radius:100%;
transform:scale(0);
pointer-events:none;
background:rgba(0,0,0,0.2);
}
.ripple_effect.animate {
animation:ripple_effect 1s ease-out;
}
@keyframes ripple_effect {
100% {
opacity:0;
transform:scale(2.5);
}
}

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
 $(".ripple").click(function(event){
  if($(this).find("b.ripple_effect").length == 0) { $(this).prepend("<b class='ripple_effect'></b>"); }
  ripple_effect = $(this).find("b.ripple_effect").removeClass("animate");
  x = event.pageX - ripple_effect.width()/2 - $(this).offset().left;
  y = event.pageY - ripple_effect.height()/2 - $(this).offset().top;
  ripple_effect.css({top: y+'px', left: x+'px'}).addClass("animate");
 })
});
//]]>
</script>

Planning HTML<div class="ripple">
<img src="LINK-IMAGE" />
</div>

codepen.io/beben-koben/full/ceuft

Happy ripple \m/

Thus articles Make Water Ripple Effect use CSS and jQuery

that is all articles Make Water Ripple Effect use CSS and jQuery This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Make Water Ripple Effect use CSS and jQuery with the link address https://autopostingblogspot.blogspot.com/2014/08/make-water-ripple-effect-use-css-and.html