Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
20 Zoom Effect CSS Javascript Cho Website

20 Zoom Effect CSS Javascript Cho Website


Ngày 21 Tháng 8 Năm 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 CSS

Để 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.

Nguồn

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

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

 <h3>Hiệu Ứng Zoom In</h3>
<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.

Nguồn

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 CSS

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-->
<h3>Hiệu Ứng Zoom Out</h3>
<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.

Nguồn

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

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-->
<h3>Hiệu Ứng Zoom Rotate</h3>
<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.

Nguồn

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

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-->
<h3>Hiệu Ứng Zoom Rotate</h3>
<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.

Nguồn

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

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-->
<h3>Hiệu Ứng Zoom Color</h3>
<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.

Nguồn

Một Số Ví Dụ Về Hiệu Ứng Zoom HTML CSS 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.

Thiết Kế Image Hover Zoom Effect

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

Nguồn

Thiết Kế CSS Image Zoom

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

Nguồn

Cách Tạo Infinite Image Zoom Effect CSS

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

Nguồn

Cách Tạo Image Zoom Jquery

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

Nguồn

Cách Tạo Bootstrap Carousel Zoom Effect

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

Nguồn

Cách Tạo CSS Transform Zoom

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

Nguồn

Thiết Kế CSS Hover Zoom Scale

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

Nguồn

Thiết Kế Jquery Zoom On Hover

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

Nguồn

Thiết Kế Jquery Zoom On Click

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

Nguồn

Cách Tạo Smooth Zoom Effect CSS

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

Nguồn

Thiêt Kế Image Hover Zoom Effect HTML5 CSS3

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

Nguồn

Cách Tạo CSS Zoom Background Image On Hover

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

Nguồn

Cách Tạo Bootstrap Zoom Image On Hover

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

Nguồn

Cách Tạo Zoom Image Animation CSS

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

Nguồn

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