Làm cách nào tôi có thể thu nhỏ hiệu ứng chuyển tiếp hình ảnh khác

Tôi đang tìm cách chuyển đổi hình ảnh với thu nhỏ sang hình ảnh thứ 2, hình ảnh thứ 3, v.v. Tôi đã thử tự làm nó với một số khung hình chính thông qua hình nền và tỷ lệ, và nó hoạt động tốt, ngoại trừ có 2 vấn đề. 1. Văn bản và các nút của tôi cũng được thu nhỏ, 2. thời lượng của hình ảnh quá ngắn. Tôi sẽ bao gồm nó nhưng tôi đã xóa nó vì nó không phải là những gì tôi đang tìm kiếm. Không chắc chắn nếu có một cách này có thể thực hiện được với CSS thuần túy, ít nhất là không dễ dàng. Vì vậy, tôi đang nghiêng về phía tôi sẽ phải sử dụng JS? Đây là mã hiện tại của tôi.

.jumbo {
  display: flex;
  flex-direction: column;
  justify-content: Center;
  margin: 0;
  width: 100vw;
  height: 100vh;
  min-height:100vh;
  background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.3)),
    url("images/j-img1.png");
  background-repeat:no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.jumbo-text {
  text-align: center;
  color: white;
  font-weight: 600;
}

/* Jumbo button */
.vmore-button {
  text-align: center;
  border: 2px solid white;
  text-transform: uppercase;
  padding: 16px;
  align-self: Center;
  margin: 20px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 24px;
  transition: 0.5s ease;
  color: white;
  max-height: 70px;
  cursor:pointer;
}

    <div class="jumbo">
      <h2 class="jumbo-text">
        Welcome to LLG
      </h2>
      <h3 class="jumbo-text animated slideInLeft delay-1s" style="color:#e8e8e8; font-weight:500;">
        Memorable Gaming Experience, High Quality Servers.
      </h3>
      <a class="vmore-button hvr-icon-pulse-shrink" href="#viewmore">View more<br><i class="fas fa-arrow-circle-down hvr-icon"></i></a>
    </div>

Mở rộng đoạn trích

html css

— Tim
nguồn

Tôi nghĩ sẽ tốt hơn nếu bạn cung cấp mã bạn đã thử, tôi không thể thấy những gì bạn nói về ... hoặc có thể tiếng Anh của tôi không tốt

— Ayman Morsy

Tôi tò mò về +8 cho câu hỏi không rõ ràng này , nơi không có mã liên quan đến bất kỳ hoạt hình nào

— Temani Afif

Câu trả lời:

Bạn sẽ cần một div container và hai bộ chia con. Đứa trẻ đầu tiên nên xử lý phóng to / chuyển đổi hình ảnh, đứa trẻ thứ hai nên chứa văn bản của bạn. Cả hai hình ảnh và bộ chia văn bản phải được định vị tuyệt đối để chúng nằm chồng lên nhau. Bạn có thể thay đổi khoảng / hình ảnh nào đang hoạt động / hiển thị bằng cách áp dụng một lớp cụ thể cho vùng chứa chính.

<div class="container">
  <div class="images">
    <img>
    <img>
    <img>
  </div>
  <div class="text">
    <span>TextA</span>
    <span>TextB</span>
    <span>TextC</span>
  </div>
</div>

— Tom Shaw
nguồn

Cảm ơn, tôi nghĩ rằng đây sẽ là điểm khởi đầu tốt cho những gì tôi đang cố gắng đạt được.

— Tim

Chỉ một vài câu hỏi nữa. Tôi nên áp dụng tuyệt đối trên cả hình ảnh và văn bản? Tôi đã loay hoay với nó và làm điều đó, và văn bản xuất hiện trên các hình ảnh. Nhưng các hình ảnh vẫn còn trong dòng tài liệu bình thường. Mãi cho đến khi tôi đặt tuyệt đối vào chính những hình ảnh thực tế và khi tôi làm điều đó nó sẽ đọc chúng từ dưới lên trên. Và tôi sẽ phải cho chúng tôi JS để áp dụng các lớp có thể nhìn thấy phải không?

— Tim

Đó là một câu hỏi xuất sắc. Các hình ảnh có thể được tạo kiểu tuyệt đối và bạn có thể thực hiện hiệu ứng hòa tan độ mờ hoặc chúng có thể được hiển thị khối nội tuyến trong đó hình ảnh trượt từ hai bên, hoặc khối hiển thị và hoạt hình bằng cách sử dụng translY xoay từ dưới lên trên. Hãy xem youtu.be/tkXUzVNl6Rw?t=68

— Tom Shaw

Âm thanh tốt. Nhưng bạn có biết tại sao nó hiển thị hình ảnh từ cuối đến đầu không?

— Tim

Tôi không biết đây có phải là ý của bạn hay không từ yêu cầu của bạn

.jumbo {
  display: flex;
  flex-direction: column;
  justify-content: Center;
  margin: 0;
  width: 100vw;
  height: 100vh;
  min-height:100vh;
  background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.3)),
    url("https://img.freepik.com/free-vector/abstract-colorful-flow-shapes-background_23-2148258092.jpg");
  background-repeat:no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.jumbo-text {
  text-align: center;
  color: white;
  font-weight: 600;
}

/* Jumbo button */
.vmore-button {
  text-align: center;
  border: 2px solid white;
  text-transform: uppercase;
  padding: 16px;
  align-self: Center;
  margin: 20px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 24px;
  transition: 0.5s ease;
  color: white;
  max-height: 70px;
  cursor:pointer;
}
@media only screen and (max-width: 600px) {
  .jumbo {
    background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.3)),
    url("https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg");
  }
}

<div class="jumbo">
  <h2 class="jumbo-text">
    Welcome to LLG
  </h2>
  <h3 class="jumbo-text animated slideInLeft delay-1s" style="color:#e8e8e8; font-weight:500;">
    Memorable Gaming Experience, High Quality Servers.
  </h3>
  <a class="vmore-button hvr-icon-pulse-shrink" href="#viewmore">View more<br><i class="fas fa-arrow-circle-down hvr-icon"></i></a>
</div>

Mở rộng đoạn trích

một hình ảnh được đặt khi chiều rộng là 600 và nhỏ hơn. Bạn có thể kiểm tra nó

— Hesham Mohamed
nguồn