ما هو تأثير تموج النقر؟
عند إضافة تأثير تموج النقر إلى موقع مدونتك على الويب، فهذا يعني أنه في كل مرة ينقر فيها المستخدم على رابط أو زر أو صورة، ستظهر حركة تموج. يمكن استخدام هذا لإضافة القليل من التفاعل والاهتمام البصري إلى موقعك.
لماذا أضف تأثير تموج النقر؟
يعد تأثير Ripple واحدًا من أفضل الرسوم المتحركة التي يمكنك إضافتها إلى موقع مدونتك على الويب. يجعل موقع الويب الخاص بك يبدو أكثر احترافية وحداثة. إذا كنت لا تعرف كيفية إضافة تأثير مضاعف، فلا تقلق! في هذه المقالة، سنوضح لك كيفية إضافة تأثير النقر المموج إلى موقع مدونتك.
كيفية إضافة تأثير النقر المموج على موقع بلوجر؟
مهم!
قبل أن نبدأ بإضافة الرموز في XML، سأوصيك بأخذ نسخة احتياطية لموضوعك الحالي.بالصدفة، في حالة حدوث أي مشكلة، يمكنك استعادتها لاحقًا.
الخطوة 01: أولاً قم بتسجيل الدخول إلى لوحة تحكم بلوجر الخاصة بك.
الخطوة 02: في لوحة تحكم بلوجر انقر فوق المظهر.
الخطوة 03: انقر فوق الزر بجانب "Customize".
الخطوة 04: انقر فوق تحرير HTML وستتم إعادة توجيهك إلى صفحة التحرير.
الخطوة 05: الآن ابحث عن الكود </head> والصق رموز JavaScript التالية فوقه مباشرة.
<script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js' type='text/javascript'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
منشورات قد تفيدك
الخطوة 06: الآن إضافة كود CSS.
الخطوة 07: الآن ابحث عن علامة </b:skin> لإضافة كود CSS أدناه.
الخطوة 08: انسخ الكود الموضح أدناه والصقه أعلى علامة </b:skin> مباشرةً.
.clicker {
width: 60px;
height: 60px;
margin-left: -30px;
margin-top: -30px;
background: #204ecf;
border-radius: 100%;
position: absolute;
transform: scale(0);
opacity: .3;
-ms-filter: none;
filter: none;
z-index: 9999;
pointer-events: none
}
.darkMode .clicker {
background: #fff
}
.clicker.is-active {
opacity: 0;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
filter: alpha(opacity=0);
transition: opacity 900ms ease, transform 900ms ease;
transform: scale(1)
}
الخطوة 09: الآن إضافة كود JavaScript.
الخطوة 10: الآن ابحث عن علامة </body> في القالب الخاص بك. يجب أن يكون موجودا في الجزء السفلي من القالب الخاص بك.
الخطوة 11: انسخ الكود أدناه والصقه أعلى علامة الإغلاق </body> مباشرةً.
<script> /*<![CDATA[*/ (function() {
var i = function(n, t) {
return window.setTimeout(t, n)
},
o = {
WebkitTransition: "webkitTransitionEnd",
MozTransition: "transitionend",
OTransition: "oTransitionEnd otransitionend",
msTransition: "MSTransitionEnd",
transition: "transitionend"
},
e = function(n, t) {
var i, o = "touchstart" === n.type.toLowerCase();
switch (t) {
case "top":
i = "pageY";
break;
case "left":
i = "pageX"
}
return (o ? n.originalEvent.touches[0] : n)[i]
};
$(document).on("mousedown touchstart", function(n) {
var t = $('<div class="clicker"></div>');
return t.css({
left: e(n, "left"),
top: e(n, "top")
}), $("body").append(t), i(0, function() {
return t.on(o[Modernizr.prefixed("transition")], function() {
return t.remove()
}), t.addClass("is-active")
})
})
}).call(this); /*]]>*/</script>
ملاحظة!
بعد الانتهاء من ذلك، لا تنس حفظ .
