Parallax - Tạo hiệu ứng cho văn bản

Trong phần này, freetuts sẽ hướng dẫn các bạn chèn văn bản vào các ảnh nền và thêm và các hiệu ứng cho chữ. Sau bài học hôm nay, các sẽ đặt được kết quả như demo. Nào chúng ta cùng bắt đầu.

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

1. Phần HTML

Trước hết hãy xem qua toàn bộ đoạn mã nguồn:

<body>
  <div class="parallax">
    <div class="side-menu">
      <ul>
        <li class="forest" onclick="moveToImage('.forest')" >Forest</li>
        <li class="eagle" onclick="moveToImage('.eagle')" >Eagle</li>
        <li class="rhino" onclick="moveToImage('.rhino')" >Rhino</li>
        <li class="owl" onclick="moveToImage('.owl')" >Owl</li>
        <li class="lion" onclick="moveToImage('.lion')" >Lion</li>
        <li class="bear" onclick="moveToImage('.bear')" >Bear</li>
      </ul>
    </div>
    <div class="forest" ></div>
    <div class="eagle">
      <p>
        <span>Eagle is the common name for many large birds of prey of the family Accipitridae.</span>
        <span>Eagles belong to several groups of genera, not all of which are closely related.</span> 
        <span>Most of the 60 species of eagle are from Eurasia and Africa.</span>
      </p>
    </div>
    <div class="rhino">
      <p>
        <span>A rhinoceros commonly abbreviated to rhino is one any of the numerous extinct species.</span>
        <span>Two of the extant species are native to Africa and three to Southern Asia.</span>
        <span>The term "rhinoceros" is often more broadly applied to now extinct relatives of the superfamily Rhinocerotoidea.</span>
      </p>
    </div>
    <div class="owl">
      <p>
        <span>Owls are birds from the order Strigiformes.</span>
        <span>Owls hunt mostly small mammals, insects, and other birds, although a few species specialize in hunting fish.</span>
        <span>They are found in all regions of the Earth except polar ice caps and some remote islands.</span>
      </p>
    </div>
    <div class="lion">
      <p>
        <span>The lion (Panthera leo) is a species in the family Felidae</span>
        <span>A lion pride consists of a few adult males, related females and cubs.</span>
        <span>Male lions have a prominent mane, which is the most recognisable feature of the species.</span>
      </p>
    </div>
    <div class="bear">
      <p>
        <span>Bears are carnivoran mammals of the family Ursidae.</span>
        <span>They are classified as caniforms, or doglike carnivorans.</span>
        <span>Bears are found on the continents of North America, South America, Europe, and Asia.</span>
      </p>
    </div>
    <div class="back" ></div>
  </div>
</body>

Phần này khá đơn giản, chúng ta chỉ cần thêm các thẻ p và thẻ span cùng với nội dung mà mình muốn trình bày.

2. Phần CSS

Trước hết hãy xem qua toàn bộ đoạn mã nguồn:

Bài viết này được đăng tại [free tuts .net]

.parallax > div > p {
  width: 60%;
  text-align: justify;
  color: white;
  mix-blend-mode: difference;
  margin: 50px;
  font-size: 20px;
}

.parallax > div > p > span {
  width: 100%;
  float: left;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  transform: translateY(-50px);
  opacity: 0;
  animation: text 10s 1.5s ease-in-out infinite;
}

.parallax > div > p > span:first-child{
  animation-delay: 2s;
}

.parallax > div > p > span:last-child{
  animation-delay: 1s;
}

@keyframes text {
  0% {
    transform: translateY(-50px);
    opacity: 0;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  }
  20% {
    transform: translateY(0);
    opacity: 1;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
  }
  80% {
    transform: translateY(0);
    opacity: 1;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
  }
  100% {
    transform: translateY(50px);
    opacity: 0;
    -webkit-clip-path: polygon(100% 0, 100% -0%, 0 100%, 0 100%);
    clip-path: polygon(100% 0, 100% -0%, 0 100%, 0 100%);
  }
}

Các bước thực hiện:

Bước 1: định dạng cho thẻ p

.parallax > div > p {
  width: 60%;
  text-align: justify;
  color: white;
  mix-blend-mode: difference;
  margin: 50px;
  font-size: 20px;
}

Màu sắc của văn bản phải được thiết lập để tương phản với ảnh nền do đó ta dùng thuộc tính mix-blend-mode: difference.

Cách thể hiện văn bản cũng nên canh chỉnh hai bên lề trái và phải bằng nhau bằng cách text-align: justify.

Bước 2: tạo định dạng cho thẻ span

.parallax > div > p > span {
  width: 100%;
  float: left;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  transform: translateY(-50px);
  opacity: 0;
  animation: text 10s 1.5s ease-in-out infinite;
}

.parallax > div > p > span:first-child{
  animation-delay: 2s;
}

.parallax > div > p > span:last-child{
  animation-delay: 1s;
}

Ở phần này chỉ lưu ý độ trễ của hiệu ứng trên từng thẻ span là khác, giúp cho người dùng quen thuộc hơn.

Bước 3: tạo hiệu ứng cho văn bản

@keyframes text {
  0% {
    transform: translateY(-50px);
    opacity: 0;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  }
  20% {
    transform: translateY(0);
    opacity: 1;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
  }
  80% {
    transform: translateY(0);
    opacity: 1;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
  }
  100% {
    transform: translateY(50px);
    opacity: 0;
    -webkit-clip-path: polygon(100% 0, 100% -0%, 0 100%, 0 100%);
    clip-path: polygon(100% 0, 100% -0%, 0 100%, 0 100%);
  }
}

Việc tạo hiệu ứng này rất quen thuộc, freetuts đã có một bài học hướng dẫn về cách tạo hiệu ứng với từ khóa keyframes . Các bạn có thể xem chi tiết tại đây: https://freetuts.net/css3-hieu-ung-animation-1665.html

3. Lời kết

Qua bài viết này, freetuts đã hướng dẫn các bạn cách tạo hiệu ứng trong văn bản kết hợp với hiệu ứng parallax. Hy vọng các bạn sẽ sáng tạo thêm các hiệu ứng đẹp hơn nữa cho trang web của mình. Cảm ơn các bạn, hẹn gặp lại trong các bài học tiếp theo.

Danh sách file tải về

Tên file tải về	Pass giải nén
Parallax - Tạo hiệu ứng cho văn bản	freetuts.net hoặc gameportable.net
Nhạc nền	freetuts.net hoặc gameportable.net

Bài trước Bài tiếp

Cùng chuyên mục:

Tạo Trang web E-commerce từ HTML & CSS

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Cách sử dụng thẻ script html ...