Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
 Cách Tạo Hiệu Ứng Zoom Effect Cho Trang Web(2020)

Cách Tạo Hiệu Ứng Zoom Effect Cho Trang Web(2020)


Ngày 21 Tháng 8 Năm 2020

Cách Tạo Hiệu Ứng Zoom Effect Cho Trang Web(2020)

Trong bài viết hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo hiệu ứng zoom cho các thành phần trong website bằng HTML, CSS và Javascript nhé!

Cách Tạo Hiệu Ứng Zoom

Để tạo hiệu ứng zoom cho các thành phần trong trang web thì chúng ta sẽ sử dụng thuộc tính transform: scale(giá trị) trong CSS. Với giá trị là:

  • giá trị < 1: Thu nhỏ đối tượng.
  • giá trị = 1: Giá trị mặc định của đối tượng.
  • giá trị > 1: Phóng to đối tượng.

Bây giờ chúng ta sẽ đi vào cách tạo hiệu ứng hover zoom effect cơ bản cho trang web nhé!

HTML

 <h1>Hiệu ứng Zoom</h1>
<p>Bạn hãy hover vào thẻ div bên dưới</p>
<div class="zoom"></div>

Bây giờ chúng ta sẽ đi vào tạo hiệu ứng phóng to khi người dùng hover vào thẻ div có class zoom bằng CSS nhé!

CSS

.zoom {
  padding: 50px;
  background-color: DodgerBlue;
  transition: transform .2s;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}
/*Hiệu ứng zoom*/
.zoom:hover {
  transform: scale(1.5);
}

Và kết quả cuối cùng bạn xem dưới đây nhé:

See the Pen Tao hieu ung zoom hover by haycuoilennao19 (@haycuoilennao19) on CodePen.

Cách Tạo Hiệu Ứng Zoom-In

Tiếp theo chúng ta sẽ đi vào tìm hiểu cách tạo hiệu ứng zoom-in cho hình ảnh khi người dùng hover thông qua đoạn mã sau nhé:

HTML

 <h4>Hiệu Ứng Zoom In</h4>
<p>Bạn hãy hover vào ảnh bên dưới nhé</p>
<div class="zoomin noidung">
<img src="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1597819923/y2mnobp2xxbujtf2ptsf.jpg" title="Hiệu Ứng Zoom in" />
</div>

CSS

 .noidung {
  height: 200px;
  width: 200px;
  overflow: hidden;
}
.zoomin img {
  height: 200px;
  width: 200px;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  transition: all 2s ease;
}
.zoomin img:hover {
    transform: scale(1.5);
}

Và kết quả cuối cùng bạn xem dưới đây nhé!

See the Pen NWNbdQJ by haycuoilennao19 (@haycuoilennao19) on CodePen.

Thật sự thì nó vẫn phóng to như ví dụ đầu tiên tuy nhiên ở đây mình đã thiết lập thuộc tính overflow: hidden; giúp ẩn đi những phần hình ảnh bị tràn ra khỏi class noidung. Do đó nó sẽ gây cảm giác phóng to cho người dùng mà vẫn không thay đổi độ rộng của hình ảnh.

Cách Tạo Hiệu Ứng Zoom-Out

Tiếp theo chúng ta sẽ đi vào tạo hiệu ứng zoom out bằng HTML và CSS nhé!

HTML

 <!--Niềm Vui Lập Trình-->
<h4>Hiệu Ứng Zoom Out</h4>
<p>Bạn hãy hover vào ảnh bên dưới nhé</p>
<div class="zoomout noidung">
    <img src="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1595479692/yfs2qgeyuccvfzhaci3f.jpg"  title="Hiệu Ứng Zoom Out" />
</div>

CSS

 .noidung {
  height: 200px;
  width: 200px;
  overflow: hidden;
}
.zoomout img {
 height: 300px;
  width: 300px;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  transition: all 2s ease;
}
.zoomout img:hover {
  height: 200px;
  width: 200px;
}

Ở đây mình sẽ tạo hiệu ứng zoom out bằng cách thay đổi độ rộng và độ cao của hình ảnh khi người dùng hover. Và để hiểu rõ hơn bạn xem kết quả sau đây nhé!

See the Pen hieu ung zoom out by haycuoilennao19 (@haycuoilennao19) on CodePen.

Cách Tạo Hiệu Ứng Zoom-Rotate

Trong phần này chúng ta sẽ kết hợp hai thuộc tính scalerotate để tạo hiệu này nhé!

HTML

 <!--Niềm Vui Lập Trình-->
<h4>Hiệu Ứng Zoom Rotate</h4>
<p>Bạn hãy hover vào ảnh bên dưới nhé</p>
<div class="zoom_rotate noidung">
    <img src="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1595479692/yfs2qgeyuccvfzhaci3f.jpg"  title="Hiệu Ứng Zoom Out" />
</div>

CSS

 .noidung {
  height: 200px;
  width: 200px;
  overflow: hidden;
}
.zoom_rotate img {
  height: 300px;
  width: 300px;
  transition: transform .5s ease-in-out;
}
.zoom_rotate img:hover {
  transform: scale(1.8) rotate(-30deg);
}

Và kết quả bạn xem ở bên dưới nhé:

See the Pen hieu ung zoom-rotate by haycuoilennao19 (@haycuoilennao19) on CodePen.

Cách Tạo Hiệu Ứng Zoom-Blur

Chúng ta sẽ đi vào tìm hiểu cách tạo hiệu ứng zoom-blur bằng cách kết hợp hai thuộc tính là scalefilter trong CSS nhé!

HTML

 <!--Niềm Vui Lập Trình-->
<h4>Hiệu Ứng Zoom Rotate</h4>
<p>Bạn hãy hover vào ảnh bên dưới nhé</p>
<div class="zoom_blur noidung">
    <img src="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1595479692/yfs2qgeyuccvfzhaci3f.jpg"  title="Hiệu Ứng Zoom Out" />
</div>

CSS

 .noidung {
  height: 200px;
  width: 200px;
  overflow: hidden;
}
.zoom_blur img {
 height: 300px;
  width: 300px;
 transition: transform 1s, filter 2s ease-in-out;
  filter: blur(3px);
  transform: scale(1.2);
}
.zoom_blur img:hover {
  filter: blur(0);
  transform: scale(1);
}
.zoom_blur img:hover {
  filter: blur(0);
  transform: scale(1);
}

Và kết quả bạn xem ở bên dưới nhé:

See the Pen hieu ung zoom-blur by haycuoilennao19 (@haycuoilennao19) on CodePen.

Cách Tạo Hiệu Ứng Zoom-Color

Phần nay chúng ta sẽ đi vào cách tạo hiệu ứng zoom-color bằng HTML và CSS nhé!

HTML

 <!--Niềm Vui Lập Trình-->
<h4>Hiệu Ứng Zoom Color</h4>
<p>Bạn hãy hover vào ảnh bên dưới nhé</p>
<div class="zoom_color noidung">
    <img src="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1595479692/yfs2qgeyuccvfzhaci3f.jpg"  title="Hiệu Ứng Zoom Out" />
</div>

CSS

 .noidung {
  height: 200px;
  width: 200px;
  overflow: hidden;
}
.zoom_color img {
  height: 300px;
  width: 300px;
  transition: transform .5s, filter 1.5s ease-in-out;
  filter: grayscale(100%);
}
.zoom_color img:hover {
  filter: grayscale(0);
  transform: scale(1.1);
}

Và kết quả bạn xem bên dưới nhé:

See the Pen hieu ung zoom-color by haycuoilennao19 (@haycuoilennao19) on CodePen.

Một Số Ví Dụ Về Hiệu Ứng Zoom Khác

Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu file là Pug thì bạn có thể chuyển sang HTML ở đây nhé : Pug to HTML. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.

Ví Dụ 1

See the Pen Image Hover - Zoom Effect (Background-image) by Boomer (@CodeBoomer) on CodePen.

Ví Dụ 2

See the Pen Image zoom SCSS by Yusuf Bakır (@yusufbkr) on CodePen.

Ví Dụ 3

See the Pen CSS Image Zoom on Hover by Ricardo Prieto (@ricardpriet) on CodePen.

Ví Dụ 4

See the Pen Infinite image zoom effect with pure CSS by Jose Quintana (@joseluisq) on CodePen.

Ví Dụ 5

See the Pen Clean Image Zoom [Mostly CSS] by Philip M (@pletron) on CodePen.

Ví Dụ 6

See the Pen Bootstrap Carousel Zoom Effect by Altaf Hussain Patel (@altafhpatel) on CodePen.

Ví Dụ 7

See the Pen Romantic Zoom Effect by Adrien Bachmann (@AdrienBachmann) on CodePen.

Ví Dụ 8

See the Pen css hover zoom scale by Wifeo (@wifeo) on CodePen.

Ví Dụ 9

See the Pen Grid zoom by Marco Barría (@fixcl) on CodePen.

Ví Dụ 10

See the Pen Image gallery with zoom by wunnle (@wunnle) on CodePen.

Ví Dụ 11

See the Pen Magnifying Effect by Blake Bowen (@osublake) on CodePen.

Ví Dụ 12

See the Pen Thumbnail Animation Effects by Yogev Ahuvia (@kindofone) on CodePen.

Ví Dụ 13

See the Pen Image cropped and hover zoom effect by Sara B. (@sara_bianchi94) on CodePen.

Ví Dụ 14

See the Pen Bootstrap Portfolio Grid Color Overlay w/Hover Zoom by Chad Westfall (@getwestfall) on CodePen.

Ví Dụ 15

See the Pen Image Zoom Effect with animated transition by stefan lachmann (@2lach) on CodePen.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những hiệu ứng zoom hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!