Thủ thuật wordpress

Hướng Dẫn Tạo Gallery 3D Bằng HTML, CSS và JavaScript

Đăng vào Tháng 9 27, 2024Tháng 9 27, 2024 bởi admin

admin

27/09/2024

3 Phút đọc

152 Lượt xem

Đánh giá

4.6/5 - (100 bình chọn)

Nếu bạn đang muốn tạo một gallery hình ảnh 3D độc đáo cho website của mình, bài viết này sẽ hướng dẫn bạn từng bước với mã nguồn HTML, CSS, và JavaScript chi tiết. Hãy cùng tìm hiểu cách thực hiện với đoạn code dưới đây.

Huong Dan Tao Gallery 3D — Hướng Dẫn Tạo Gallery 3D

1. Giới Thiệu Về Gallery 3D

Gallery này được tạo với hiệu ứng 3D khi click vào từng hình ảnh. Sử dụng HTML, CSS và JavaScript đơn giản, bạn có thể tạo một hiệu ứng chuyển động ấn tượng, phù hợp cho việc hiển thị bộ sưu tập hình ảnh trên website.

2. Mã HTML Cơ Bản

Mã HTML dưới đây sẽ tạo ra các thẻ chứa hình ảnh và áp dụng các lớp CSS để định dạng gallery:

<div class="muathemewpgiare-dev scene-new">
  <div class="muathemewpgiare-dev gallery-new" style="--total: 7">
    <div class="muathemewpgiare-dev image-new" style="--i: 1">
      <img src="https://picsum.photos/300/300" alt="image">
    </div>
    <div class="muathemewpgiare-dev image-new" style="--i: 2">
      <img src="https://picsum.photos/301/301" alt="image">
    </div>
    <div class="muathemewpgiare-dev image-new" style="--i: 3">
      <img src="https://picsum.photos/302/302" alt="image">  
    </div> 
    <div class="muathemewpgiare-dev image-new" style="--i: 4">
      <img src="https://picsum.photos/303/303" alt="image">
    </div>
    <div class="muathemewpgiare-dev image-new" style="--i: 5">
      <img src="https://picsum.photos/304/304" alt="image">
    </div>
    <div class="muathemewpgiare-dev image-new" style="--i: 6">
      <img src="https://picsum.photos/305/305" alt="image">
    </div> 
    <div class="muathemewpgiare-dev image-new" style="--i: 7">
      <img src="https://picsum.photos/306/306" alt="image">  
    </div> 
  </div>
</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

3. CSS Tạo Hiệu Ứng 3D Cho Gallery

CSS được sử dụng để tạo bố cục và hiệu ứng 3D cho từng hình ảnh trong gallery:

.scene-new {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px; /* Căn giữa gallery theo chiều dọc */
}

.gallery-new {
  position: relative;
  perspective: 1500px;
  transform-style: preserve-3d;
  width: 200px;
  aspect-ratio: 1;
  background: silver;
  transform: rotate(45deg);
}

.image-new {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 4px solid white;
  box-sizing: border-box;
  transition: 1s ease;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: calc(var(--total) - var(--i));
}

.image-new img {
  --rotate: rotate(-45deg);
  transform: var(--rotate);
  transition: .3s ease;
}

.image-new:nth-of-type(odd) {
  --hovermove: -100px, 100px;
  --translate: calc((var(--i) - 1) * -70px), calc((var(--i) - 1) * 70px);
  --tZ: calc((var(--i) - 1) * -350px);
  animation: deploy-new 1.5s ease forwards;
}

.image-new:nth-of-type(even) {
  --hovermove: 100px, -100px;
  --translate: calc(var(--i) * 70px), calc(var(--i) * -70px);
  --tZ: calc(var(--i) * -350px);
  animation: deploy-new 1.5s ease forwards;
}

.image-new:hover img,
.image-new.only-hover-new img {
  transform: var(--rotate) scale(1.1);
}

.image-new.only-hover-new {
  animation: clickAnimation-new 1s ease;
  z-index: 9;
}

.hidden-gallery-new .image-new {
  animation: close-new 1.5s ease forwards;
}

@keyframes deploy-new {
  from {
    transform: translate(0px, 0px) translateZ(0px);
  }
  to {
    transform: translate(var(--translate)) translateZ(var(--tZ));
  }
}

@keyframes close-new {
  from {
    transform: translate(var(--translate)) translateZ(var(--tZ));
  }
  to {
    transform: translate(0px, 0px) translateZ(0px);
  }
}

@keyframes clickAnimation-new {
  0% {
    transform: translate(var(--translate)) translateZ(var(--tZ));
  }
  20% {
    transform: translate(var(--hovermove)) translateZ(0px);
  }
  100% {
    transform: translate(calc(var(--i) * 0px), calc(var(--i) * 0px));
  }
}

.scene-new {

display: flex;

justify-content: center;

align-items: center;

height: 300px; /* Căn giữa gallery theo chiều dọc */

}

.gallery-new {

position: relative;

perspective: 1500px;

transform-style: preserve-3d;

width: 200px;

aspect-ratio: 1;

background: silver;

transform: rotate(45deg);

}

.image-new {

position: absolute;

width: 100%;

height: 100%;

border: 4px solid white;

box-sizing: border-box;

transition: 1s ease;

overflow: hidden;

display: flex;

justify-content: center;

align-items: center;

cursor: pointer;

z-index: calc(var(--total) - var(--i));

}

.image-new img {

--rotate: rotate(-45deg);

transform: var(--rotate);

transition: .3s ease;

}

.image-new:nth-of-type(odd) {

--hovermove: -100px, 100px;

--translate: calc((var(--i) - 1) * -70px), calc((var(--i) - 1) * 70px);

--tZ: calc((var(--i) - 1) * -350px);

animation: deploy-new 1.5s ease forwards;

}

.image-new:nth-of-type(even) {

--hovermove: 100px, -100px;

--translate: calc(var(--i) * 70px), calc(var(--i) * -70px);

--tZ: calc(var(--i) * -350px);

animation: deploy-new 1.5s ease forwards;

}

.image-new:hover img,

.image-new.only-hover-new img {

transform: var(--rotate) scale(1.1);

}

.image-new.only-hover-new {

animation: clickAnimation-new 1s ease;

z-index: 9;

}

.hidden-gallery-new .image-new {

animation: close-new 1.5s ease forwards;

}

@keyframes deploy-new {

from {

transform: translate(0px, 0px) translateZ(0px);

}

to {

transform: translate(var(--translate)) translateZ(var(--tZ));

}

@keyframes close-new {

from {

transform: translate(var(--translate)) translateZ(var(--tZ));

}

to {

transform: translate(0px, 0px) translateZ(0px);

}

@keyframes clickAnimation-new {

0% {

transform: translate(var(--translate)) translateZ(var(--tZ));

}

20% {

transform: translate(var(--hovermove)) translateZ(0px);

}

100% {

transform: translate(calc(var(--i) * 0px), calc(var(--i) * 0px));

}

4. JavaScript Xử Lý Sự Kiện Click

JavaScript dưới đây được dùng để thay đổi trạng thái của hình ảnh khi người dùng nhấp vào:

document.querySelectorAll('.image-new').forEach(image => {
  image.addEventListener('click', () => {
    // Xóa lớp 'only-hover-new' khỏi tất cả các hình ảnh
    document.querySelectorAll('.image-new').forEach(img => {
      img.classList.remove('only-hover-new');
    });
    // Thêm lớp 'only-hover-new' vào hình ảnh được nhấp
    image.classList.add('only-hover-new');
  });
});

document.querySelectorAll('.image-new').forEach(image => {

image.addEventListener('click', () => {

// Xóa lớp 'only-hover-new' khỏi tất cả các hình ảnh

document.querySelectorAll('.image-new').forEach(img => {

img.classList.remove('only-hover-new');

});

// Thêm lớp 'only-hover-new' vào hình ảnh được nhấp

image.classList.add('only-hover-new');

});

5. Cách Hoạt Động

HTML: Tạo cấu trúc gallery với 7 hình ảnh được bọc trong các phần tử <div>. Mỗi ảnh được gán một lớp image-new để áp dụng hiệu ứng CSS.
CSS: Sử dụng perspective và transform để tạo hiệu ứng 3D. Các @keyframes định nghĩa các hiệu ứng chuyển động khi hình ảnh được click hoặc hover.
JavaScript: Gắn sự kiện click vào mỗi hình ảnh. Khi người dùng nhấp vào, lớp only-hover-new sẽ được thêm vào ảnh đó, kích hoạt hiệu ứng đã được định nghĩa trong CSS.

Demo code:

See the Pen
Gallery – click by Daniel Muñoz (@daniel-mu-oz)
on CodePen.

Xem thêm:

Thông báo chính thức: Muathemewpgiare chân thành mong muốn được đồng hành và hỗ trợ tốt nhất cho các khách hàng trong quá trình sử dụng giao diện WordPress. Vì vậy, khi mua những theme wordpress tại chúng tôi, chúng tôi cam kết hỗ trợ quý khách hàng hết sức có thể.

Chúng tôi hiểu rằng sự lựa chọn của quý khách là rất quan trọng. Việc mua source code tại chúng tôi không chỉ giúp đảm bảo chất lượng mà còn nhận được sự hỗ trợ tận tâm từ Muathemewpgiare. Chúng tôi rất mong quý khách cân nhắc kỹ, tránh những rủi ro không đáng có khi mua các source code không rõ nguồn gốc. Chúng tôi luôn sẵn sàng hỗ trợ và đồng hành cùng quý khách. Xin chân thành cảm ơn!

🔥 TOP 10+ ĐOẠN CODE FLATSOME CỰC HAY GIÚP WEBSITE MƯỢT, NHẸ, CHUẨN SEO

Bạn đang sử dụng theme Flatsome cho website WordPress? Bạn muốn tối ưu hiệu năng, giao diện và trải nghiệm người dùng mà không cần...
Sharecode chức năng quảng cáo bài viết wordpress

Bạn đang tìm kiếm giải pháp quảng bá bài viết hiệu quả ngay trên chính website WordPress của mình? Hãy khám phá ngay plugin MTWPGR...
Hướng Dẫn Tạo Gallery Video Highlight Chuyên Nghiệp Cho WordPress (Chuẩn YouTube, Chuẩn SEO)

🎁Nội dung miễn phí có giới hạnBài viết này sẽ miễn phí trong 5 ngày nữa. Sau thời gian này, bạn cần phải mua để...
Sharecode tạo uxbuider element đẹp wordpress

Để tạo một section khí thế, mãnh liệt, mạnh mẽ, đẹp và cực kỳ bắt mắt cho UX Builder/Flatsome, bạn cần kết hợp các yếu...
Code hệ thống điểm danh và affilate

Bạn đang muốn thêm tính năng điểm danh hàng ngày để tăng tương tác người dùng trên website WordPress? Bài viết này sẽ hướng dẫn...
Hướng Dẫn Cách Làm Menu Chính và Submenu trong WordPress Admin Với License Key

Trong bài viết này, chúng ta sẽ cùng tìm hiểu cách tạo một menu chính trong WordPress với tên “Mua Theme WP Giá Rẻ”, di...
Tự Động Xoá Tất Cả Admin Khác Được Tạo Ra Trái Phép WordPress

Mục Lục1. Giới Thiệu Về Gallery 3D2. Mã HTML Cơ Bản3. CSS Tạo Hiệu Ứng 3D Cho Gallery4. JavaScript Xử Lý Sự Kiện Click5. Cách...
Cách Chống Brute Force và Cảnh Báo Đăng Nhập Cho WordPress (Phần 2)

Bảo mật trang web WordPress của bạn là một yếu tố quan trọng để đảm bảo dữ liệu và thông tin cá nhân của người...
Chia Sẻ Code Tự Động Thêm Giá Và Thanh Toán Cho Bài Viết WordPress

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tạo một hệ thống thanh toán cho các bài viết trong WordPress, giúp bạn...
Cách chèn nhạc vào website wordpress

Để chèn nhạc vào website WordPress thông qua tệp functions.php, bạn có thể sử dụng một số phương pháp tùy thuộc vào cách bạn muốn...
Code chức năng kiểm tra link nội bộ trong bài viết wordpress

Mục Lục1. Giới Thiệu Về Gallery 3D2. Mã HTML Cơ Bản3. CSS Tạo Hiệu Ứng 3D Cho Gallery4. JavaScript Xử Lý Sự Kiện Click5. Cách...
Code tự in kích thước lên ảnh khi upload ảnh lên website wordpress

Khi upload hình ảnh lên website WordPress, đôi khi bạn muốn tự động in kích thước của ảnh lên chính bức ảnh đó. Điều này...
Code Tự động Cập Nhật Giá Khi Tăng Giảm Số Lượng Trong WooCommerce

Mục Lục1. Giới Thiệu Về Gallery 3D2. Mã HTML Cơ Bản3. CSS Tạo Hiệu Ứng 3D Cho Gallery4. JavaScript Xử Lý Sự Kiện Click5. Cách...
Code chức năng xem thêm và thu gọn cho nội dung sản phẩm WordPress

Mục đích: Đoạn mã dưới đây được thiết kế để tạo ra một nút “Xem thêm” giúp người dùng có thể mở rộng nội dung...
Hướng dẫn tạo code icon bố cục 10 cột giống tiki wordpress

Để tạo một bố cục tương tự như trên, với 10 cột và các icon được bố trí giống Tiki trong WordPress, bạn cần sử...
Hướng dẫn code vòng quay may mắn wordpress cực đẹp

Để tạo một vòng quay may mắn (Lucky Wheel) trên trang web WordPress, bạn có thể sử dụng mã PHP dưới đây. Bài viết này...