Tạo hiệu ứng di chuyển nền chữ theo trỏ chuột đẹp mắt

Thông thường trước đây, chúng ta chỉ hay dùng chữ thuần không hiệu ứng gì hoặc đôi khi chỉ trang trí chữ đó theo những thuộc tính đơn giản trong CSS như color (màu), font-style (kiểu chữ), font-size (cỡ chữ)... thôi đúng không?

Vậy thì hôm nay mình sẽ chia sẻ cho các bạn một cách mới để làm cho chữ đẹp hơn với hiệu ứng di chuyển nền (background) trong chữ mỗi khi rê chuột nhé. Lưu ý rằng hiệu ứng này không hoạt động trên trình duyệt Firefox, còn lại hoạt động được trên Opera, Chrome, Safari... Thủ thuật được tham khảo của tác giả Robert Borghesi.

Moving text background with mouse by jquery

Tạo hiệu ứng di chuyển nền chữ theo trỏ chuột đẹp mắt

Mục lục

Xem demo
Các bước thực hiện
Cách sử dụng
Lời kết

Xem demo

Các bước thực hiện

Bước 1: Truy cập blogger.com - Chủ đề - Chỉnh sửa HTML.

Bước 2: Chèn CSS dưới đây trước

]]></b:skin>

.ani_title {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif!important;
  font-weight: 800;
  color: transparent;
  font-size: 80px;
  text-transform: uppercase;
  background: url('https://i.imgur.com/91T3HEa.jpg') repeat;
  background-position: 40% 50%;
  -webkit-background-clip: text;
  position: relative;
  text-align: center;
  line-height: 80px;
}

Thay https://i.imgur.com/91T3HEa.jpg thành URL ảnh khác nếu bạn muốn (nên sử dụng ảnh nhỏ nhỏ thôi vì để repeat nên không cần để to quá)

Bước 3: Chèn đoạn Jquery này trước

</body>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'/> // Bỏ dòng này đi nếu blog đã có thư viện rồi
<script type="text/javascript">
$(document).ready(function(){
  var mouseX, mouseY;
  var ww = $( window ).width();
  var wh = $( window ).height();
  var traX, traY;
  $(document).mousemove(function(e){
     mouseX = e.pageX;
     mouseY = e.pageY;
    console.log(mouseX + " e mouseY" + mouseY);
    console.log(ww + " e wh" + wh);
    traX = ((4 * mouseX) / 570) + 40;
    traY = ((4 * mouseY) / 570) + 50;
    console.log(traX);
    $(".ani_title").css({"background-position": traX + "%" + traY + "%"});
  });
});
</script>

Bước 4: Lưu template lại.

Cách sử dụng

Sau khi đã thêm toàn bộ code trên vào đúng vị trí như mình bảo, bây giờ để áp dụng hiệu ứng này cho chữ bạn muốn thì chỉ cần thêm class

.ani_title

này vào là được. Ở đây, mình sẽ ví dụ cho các bạn 2 trường hợp để thêm.

Trường hợp 1: Phần tử cần thêm hiệu ứng chưa có class như sau:

<h1>Phú Cường Blogger</h1>

hoặc

<h1 id='example'>Phú Cường Blogger</h1>

Khi đó, ta sẽ chỉ cần thêm

class='ani_title'

vào là được, code sẽ có dạng:

<h1 class='ani_title'>Phú Cường Blogger</h1>

hoặc

<h1 id='example' class='ani_title'>Phú Cường Blogger</h1>

Trường hợp 2: Phần tử cần thêm hiệu ứng đã có class trước đó có dạng:

<h1 class='test'>Phú Cường Blogger</h1>

Nếu như này, bạn sẽ xử lý như nào thì nếu đã có kiến thức trước đó, ta sẽ có thể thêm nhiều class vào 1 phần tử dạng

class='class_1 class_2 class_3'

. Vì thế, ta áp dụng điều này vào bài này sẽ thêm class

.ani_title

vào nhé, code sẽ có dạng như sau:

<h1 class='test ani_title'>Phú Cường Blogger</h1>

Bạn có thể đổi

ani_title

lên trước

test

cũng được vì

ani_title

mình đang thêm như 1 class riêng biệt không phụ thuộc các class khác.

Lời kết

Vừa rồi mình đã hướng dẫn xong cho các bạn cách tạo hiệu ứng di chuyển nền chữ theo trỏ chuột rồi đấy. Code của nó cũng không quá dài và có thể sử dụng vào nhiều mục đích khác nhau. Ví dụ như làm nổi bật tiêu đề blog hoặc làm đẹp các tiêu đề ở trang tĩnh... Còn nhiều lựa chọn thú vị khác nữa tùy vào sự sáng tạo của các bạn. Chúc các bạn thành công và đừng quên chia sẻ bài viết nếu bạn thích nó nhé.

Tags: #moving, #text background, #blogspot