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

إعلان أدسنس

آخر المواضيع

breaking/مقالات/9
أخبار تقنية

الجمعة، 12 مايو، 2017

6:01 ص

تكبير النص تصغير النص أعادة للحجم الطبيعي



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



الخطوة الأولى يا صديقي أن تضع هذا الكود فوق هذا الوسم  </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 />

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



إرسال تعليق

مقالات