Tutorial Zooming Background Image

Thảo luận trong 'HTML vs Browser' bắt đầu bởi babyinternet, 11/8/16.

By babyinternet on 11/8/16 lúc 09:12
  1. babyinternet

    babyinternet Administrator

    Tham gia ngày:
    4/7/08
    Bài viết:
    4,655
    Đã được thích:
    1,583
    Điểm thành tích:
    113
    Nơi ở:
    [}{]e[][]
    Bạn đã từng gặp những website có những hiệu ứng lạ mắt như khi đưa chuột vào hình ảnh nào đó, hình ảnh tự zoom lớn lên một chút cho bạn cái nhìn rất lạ mắt ? Thật ra làm điều đó không hề khó. Tutorial này sẽ hướng dẫn bạn làm điều đó. Trước hết hãy xem hiệu ứng bên dưới:

    [​IMG]

    Giờ đến khâu thực hiện nha !

    Để mang tính thực tế cao, chúng ta tiến hành thực hiện hiệu ứng cho ảnh ở dạng background, phía trên chúng ta chèn một liên kết để người dùng có thể click chuột được.
    Đầu tiên là phần HTML:

    HTML:
    <div class="parent">
      <div class="child"></div>
    </div>
    Để khung cố định chiều rộng, chiều cao, chúng ta cố định khung .parent có giá trị rộng và cao là 400px : 300px. Phần .child bên trong có kích thước 100% - nghĩa là sẽ hiển thị hết khung dữ liệu chứa nó (.parent). Ngoài ra, chúng ta tiến hành set thuộc tính background của thằng .child luôn. Đoạn mã CSS cần thiết:

    HTML:
    .parent {
      width: 400px;
      height: 300px;
    }
    
    .child {
      width: 100%;
      height: 100%;
      background-color: black; /* fallback color */
      background-image: url("images/city.jpg");
      background-position: center;
      background-size: cover;
    }
    Thằng .child chúng ta viết thêm phần :hover cho phép thực hiện một hiệu ứng khi đưa chuột lên. Cụ thể:
    HTML:
    .parent:hover .child,
    .parent:focus .child {
      transform: scale(1.2);
    }
    Để hoàn tất hiệu ứng, bạn cần ấn định thời gian chuyển cảnh cho .child. Hoặc bạn có thể chẳng cần đến nó nhưng một hiệu ứng chuyển cảnh chậm (0.5s) sẽ tuyệt vời hơn.
    HTML:
    transition: all .5s;
    
    Nếu muốn phủ thêm một lớp màu phía trên hình, chúng ta có thể sử dụng ::before như sau:
    HTML:
    .child::before {
      content: "";
      display: none;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(52, 73, 94, 0.75);
    }
    
    .parent:hover .child:before,
    .parent:focus .child:before {
      display: block;
    }
    Giờ thì khi bạn đưa chuột lên .parent, phần .child bên dưới sẽ được phủ một lớp màu lên trên tạo hiệu ứng mờ mờ ảo ảo.

    Tiếp theo, chúng ta cần một vài định dạng cho nội dung nằm phía trên background. Phần text này trong thực tế thường dùng chèn liên kết.

    Lúc này đoạn mã HTML của chúng ta sẽ như thế này:
    HTML:
    <div class="parent">
       <div class="child">
          <span>Hello</span>
       </div>
    </div>
    Thêm chút định dạng CSS cho nó xinh đẹp hơn:

    HTML:
    span {
      color: white; /* Good thing we set a fallback color! */
      font-family: sans-serif;
      padding: 25%;
      position: absolute;
    }
    Muốn nó hiển thị chỉ khi nào chúng ta đưa chuột lên .parent thì thêm đoạn này vào:

    HTML:
    .parent:hover span,
    .parent:focus span {
      display: block;
    }
    Vậy là xong :)
     

Bình luận

Thảo luận trong 'HTML vs Browser' bắt đầu bởi babyinternet, 11/8/16.

Chia sẻ trang này