إضافة تأثير التموج على بلوجر Ripple Effect

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

إنشاء تأثير تموج عند النقر بالنسبة إلى قوالب بلوجر الافتراضية في الإصدار الجديد، هناك تأثير تموج النقرات الرائع جدًا هو Ripple effect، والمعروف أيضًا بـmaterial click.
قد يعرفه الكثير منكم خصوصا من يستخدم قوالب بلوجر الإفتراضية، الفرق هنا عند استعمال Ripple المدمج من بلوجر هو كبر مكتبة JS وهناك أشياء زائدة عن الحاجة عند عدم استخدامها، مما يجعل المدونة أثقل في تحميل الصفحة.

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

شرح طريقة التركيب
1. سجل الدخول إلى مدونتك
2. المظهر >> تعديل HTML
3. ابحث عن ]]></b:skin> ثم ضع الكود التالي فوقه

.flat-icon-button {
 background: transparent;
 border: 0;
 outline: none;
 padding: 8px;
 cursor: pointer;
 box-sizing: content-box;
 display: inline-block;
 line-height: 0
}
.flat-icon-button,
.flat-icon-button .splash-wrapper {
 border-radius: 50%
}
.flat-icon-button .splash.animate {
 -webkit-animation-duration: 0.3s;
 animation-duration: 0.3s
}
.flat-button {
 cursor: pointer;
 border-radius: 2px;
 padding: 8px
}
.ripple {
 position: relative
}
.ripple>* {
 z-index: 1
}
.splash-wrapper {
 bottom: 0;
 left: 0;
 overflow: hidden;
 pointer-events: none;
 position: absolute;
 right: 0;
 top: 0;
 z-index: 0
}
.splash {
 background: rgba(0, 0, 0, .3);
 border-radius: 100%;
 display: block;
 opacity: .9;
 position: absolute;
 -webkit-transform: scale(0);
 -ms-transform: scale(0);
 transform: scale(0)
}
.splash.animate {
 -webkit-animation: ripple-effect .5s linear;
 animation: ripple-effect .5s linear
}
@-webkit-keyframes ripple-effect {
 100% {
  opacity: 0;
  -webkit-transform: scale(2.5);
  transform: scale(2.5)
 }
}
@keyframes ripple-effect {
 100% {
  opacity: 0;
  -webkit-transform: scale(2.5);
  transform: scale(2.5)
 }
}

4.اضف هذا الكود فوق </body>

<script src='//cdn.jsdelivr.net/gh/dangtiensi/siben@3e73bd4e2ea1575aa5145b43f3993dd22fac01f7/ripple.js'></script>
<style>

الإستعمال

تأثير مربع: أضف التموج إلى أي عنصر ضمن الوسم "class="ripple

تأثير دائري: أضف التموج إلى أي عنصر ضمن الوسم "class="ripple flat-icon-button
مثال : <div class="ripple Test"> </div>

ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

عن الكاتب : Hussam

إرشادات

تحميل الملفات

نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
• موقع : Mediafire
• موقع :file-upload
• باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
• تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
• كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
• إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.

أين تجدنا؟

بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web


كلمة الختام

في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com

أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم