Hướng Dẫn Thêm Hiệu Hoạt Ảnh Hiệu Ứng Gợn Khi Nhấp Chuột Vào Trang Web

Chào mừng các bạn lại đến với Channel của mình, nhầm rồi. Chào các bạn đến với Hồng Lâm Blog, rất vui khi chuẩn bị chia sẻ cho các độc giả một tip nho nhỏ xinh xinh, đó là: Hiệu ứng gợn khi nhấp chuột vào trang web.

Chỉ vài bước đơn giản chưa đến 5 phút thì các bạn sẽ có được nó. Lướt xuống dưới nhé!

Các Bước Thực Hiện

Chú ý!
Trước khi thực hiện, vui lòng sao lưu chủ đề của các bạn để tránh gặp tình trạng lỗi và dễ dàng khôi phục, mình không chịu trách nhiệm.

Các bạn có thể xem Demo ở dưới đây bằng cách thử nhấp (máy tính thì click chuột) vào khoảng trống bất kì, có thể bật chế độ tối để xem điều tuyệt vời xảy ra nhé.

Demo

Bước 1:

Tìm thẻ </head> trong chủ đề của bạn.
Sao chép tất cả mã bên dưới và dán chúng lên trên thẻ </head>.

<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>

Bước 2:

Tiếp tục tìm đến thẻ </b:skin> ở phần chỉnh sửa html.
Sao chép toàn bộ css cho bên dưới và dán nó bên trên thẻ </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)}

Bước 3:

Một lần nữa, hãy tìm đến thẻ đóng </body> .
Sao chép hết mã bên dưới và dán nó lên trên thẻ </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>

Đừng quên lưu lại chủ đề nhé.

Lời Kết

Đây là toàn bộ bài viết hướng dẫn về cách thêm gợn khi nhấp chuột vào trang web. Nếu có thắc mắc hay khiếu nại bản quyền thì cmt bên dưới nhé. Chúc các bạn thành công!

Tham khảo: www.techwithdeo.blogspot.com