آموزش ripple effect

مرتضی 8 سال پیش 8 سال پیش

+2 0

سلام دوستان توی این آموزش می خوام افکت ripple رو با استفاده از css و js پیاده سازی کنم :)

اساس این افکت یه span که روی المنت ما میوفته و افکت رو پیاده سازی میکنه

کدهای html

 <!DOCTYPE html>
<html>

<head>
    <title>Title of the document</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body>
   <div class="test">متن امتحانی</div>
    <script src="js/jquery-min.js"></script>
    <script src="js/main.js"></script>
</body>

</html>

کدهای css

 .test {
    width: 220px;
    height: 120px;
    background: #303F9F;
    color: #fff;
    text-align: center;
    line-height: 120px;
    font-size: 40px;
    position: relative;
    overflow: hidden!important;
    margin: 20px;
}


/*  Ripple */

.ripple {
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(26, 35, 126,0.6);
    transform: scale(0);
    position: absolute;
    opacity: 1;
}

.rippleEffect {
    animation: rippleDrop .7s linear;
}

@keyframes rippleDrop {
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

کدهای جاوا اسکریپت

 $(".test").click(function (e) {
  
  // hazf class ghabli
  $(".ripple").remove();

  // Setup
  var posX = $(this).offset().left,
      posY = $(this).offset().top,
      buttonWidth = $(this).width(),
      buttonHeight =  $(this).height();
  
  // ezafe kardan class b elementemon
  $(this).prepend("<span class='ripple'></span>");

  
  if(buttonWidth >= buttonHeight) {
    buttonHeight = buttonWidth;
  } else {
    buttonWidth = buttonHeight; 
  }
  
 //peyda kardan vasat element
  var x = e.pageX - posX - buttonWidth / 2;
  var y = e.pageY - posY - buttonHeight / 2;
  
 
  // hala css ha ro be class tazrigh mikonim va animation ro start mikonim
  $(".ripple").css({
    width: buttonWidth,
    height: buttonHeight,
    top: y + 'px',
    left: x + 'px'
  }).addClass("rippleEffect");
});

پ.ن:اول از همه باید لایبرری jquery رو اضاف کنیم