هناك الكثير من الناس يريد إضافة تقنية الماتيريال ديزاين(مكتبة الماتيريال ديزاين) لمدونته ولا يعرف، واليوم سنقوم باضافة تأثير التموج وهو من أحد أجمل الأشياء في تقنية الماتيريال ديزاين ويمكنك معاينة تاثير التموج من على موقعي عبرالضغط على اي شيء.



الخطوة الأولى يا صديقي أن تضع هذا الكود فوق هذا الوسم  </head>

<br />
<style>
.ripple {
    position: relative;
    border: none;
    outline: none;
    cursor: pointer;
}

.ripple{
  overflow:hidden;
}
.ripple-effect{
  position: absolute;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background: white;

  animation: ripple-animation 2s;
}

@keyframes ripple-animation {
    from {
      transform: scale(1);
      opacity: 0.4;
    }
    to {
      transform: scale(100);
      opacity: 0;
    }
}
</style><br />

ثم عليك يا صديقي أن تضع الكود الأتى فوق هذا الوسم  </body>

<br />
<script>
(function (window, $) {

  $(function() {


    $('.ripple').on('click', function (event) {

      var $div = $('<div/>'),
          btnOffset = $(this).offset(),
        xPos = event.pageX - btnOffset.left,
        yPos = event.pageY - btnOffset.top;
 
      $div.addClass('ripple-effect');
      var $ripple = $(".ripple-effect");
 
      $ripple.css("height", $(this).height());
      $ripple.css("width", $(this).height());
      $div
        .css({
          top: yPos - ($ripple.height()/2),
          left: xPos - ($ripple.width()/2),
          background: $(this).data("ripple-color")
        })
        .appendTo($(this));
      window.setTimeout(function(){
        $div.remove();
      }, 2000);
    });

  });

})(window, jQuery);
 </script><br />

يجب أن تركز يا صديقي في هذه الخطوة

شاهد هذا المثال لتفهم :

هذا مجرد كود عادي

<br />
<a href="#"><div class="elprof" >
</div>
</a><br />

ولكن إن أضفنا فى class الخاص به كلمة ripple سيتم تشغيل تأثير التموج به كما فى المثال الأتى :

<br />
<a href="#"><div class="ripple elprof">
</div>
</a><br />

إن واجهتك مشكلة في اضافة التأثير لا تتردد في التواصل معي على حسابي في فيس بوك من هنا 



الأقسام:
إضافة تأثير التموج لمدونات بلوجر

إضافة تأثير التموج لمدونات بلوجر

ليست هناك تعليقات:

جميع الحقوق محفوظة موقع الخبير التقني