Front-End : Tạo HIỆU ỨNG cho tiêu đề

FRONT-END: TẠO HIỆU ỨNG CHO TIÊU ĐỀ

DEMO   TẢI VỀ 

Tạo cấu trúc

Các cấu trúc HTML là như nhau cho tất cả các hình ảnh động. Ở đây ta sử dụng một <section>bên ngoài. Tiêu đề là một phần tử<h1>phần tử khối thẻ. Mỗi từ được nằm trong một <b>thẻ, tất cả các từ bên trong cùng một <span>phần tử.

Thêm lớp .rotate-1(được thêm vào <h1>).

Một số hiệu ứng có thể yêu cầu một lớp bổ sung. Ví dụ: khi mỗi bức thư được hoạt ảnh riêng, lớp .lettersphải được thêm vào <h1>thẻ. Trong tệp index.html, bạn có thể kiểm tra tên của các lớp được áp dụng cho mỗi tiêu đề.

<section class="cd-intro">
   <h1 class="cd-headline rotate-1">
      <span>My favourite food is</span>
      <span class="cd-words-wrapper">
         <b class="is-visible">pizza</b>
         <b>sushi</b>
         <b>steak</b>
      </span>
   </h1>
</section> <!-- cd-intro -->

			
			

Thêm style

Chúng ta cùng nhau xem cách tạo hiệu ứng Rotate 1. Quá trình này tương tự với mọi hoạt hình, bạn có thể lướt qua các tệp nguồn

Đầu tiên chúng ta hãy áp dụng lớp .rotate-1vào <h1>!

Ý tưởng là để tạo ra một vòng xoay 3D: từ nhìn thấy sẽ biến mất bằng cách quay qua trục X, từ mới sẽ xuất hiện từ phía dưới và lấy vị trí tự do, luôn luôn xoay trên trục X.

Để làm việc trong không gian 3D, chúng ta cần phải đặt giá trị phối cảnh, nếu không các phần tử hình ảnh sẽ trông phẳng. Hãy nhớ rằng: thuộc tính Perspective không nên được áp dụng cho phần tử sẽ được hoạt hình (thông qua CSS Chuyển đổi , Chuyển đổi hoặc Hoạt hình ), nhưng với phần tử gốc. Trong trường hợp này, tôi áp dụng thuộc tính phối cảnh để .cd-words-wrapper:

.cd-headline.rotate-1 .cd-words-wrapper {
  display: inline-block;
  perspective: 300px;
}

Với vị trí Perspective tại chỗ, ta nhắm mục tiêu các phần tử <b> (mỗi từ) và ta đặt opacity: 0;và position: absolute;. Bằng cách này chúng ta giấu tất cả các từ và chúng ta loại bỏ chúng khỏi document và  không chiếm một không gian nữa. Cuối cùng chúng ta sử dụng .is-visiblelớp được áp dụng cho <b>phần tử đầu tiên (từ đầu tiên) và chúng ta thêm vào opacity: 1;và position: relative;. Đây là cách chúng ta tạo ra từ đầu tiên.

Lưu ý rằng chúng ta đang áp dụng một sự chuyển đổi ( rotateX(180deg)) cho mỗi từ để chuyển nó. transform-origingiá trị được đặt ở đáy (giá trị đầu tiên là X, giá trị thứ hai là Y). Đây là một chi tiết quan trọng: như bạn có thể nhìn thấy từ .gif ở trên hoặc bản giới thiệu, nguồn gốc của vòng xoay không phải là trung tâm và chúng ta cần chỉ định nó trong CSS. Sau đó, tất nhiên quay được thiết lập trở lại 0 nếu .is-visiblelớp học được áp dụng.

.cd-headline.rotate-1 b {
  opacity: 0;
  transform-origin: 50% 100%;
  transform: rotateX(180deg);
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
}

.cd-headline.rotate-1 b.is-visible {
  position: relative;
  opacity: 1;
  transform: rotateX(0deg);
}

Chúng ta cần kích hoạt các hình ảnh động: với sự giúp đỡ của jQuery, chúng ta loại bỏ các lớp .is-visibletừ phần tử đầu tiên và thêm nó vào thứ hai, sau đó chúng tôi loại bỏ nó từ thứ hai và thêm nó vào thứ ba vv – để tạo ra một vòng lặp. Mỗi lần chúng tôi loại bỏ các .is-visiblelớp, chúng tôi chuyển đổi nó với .is-hiddenmột. Tại sao chúng ta cần 2 lớp: trong mỗi lớp chúng ta định nghĩa một hình ảnh động CSS khác nhau. Điều .is-visiblenày là để hiển thị một từ, .is-hiddenđể giấu nó, tất nhiên. Xem cách CSS thay đổi với việc bổ sung các hình động:

.cd-headline.rotate-1 b {
  opacity: 0;
  transform-origin: 50% 100%;
  transform: rotateX(180deg);
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
}

.cd-headline.rotate-1 b.is-visible {
  position: relative;
  opacity: 1;
  transform: rotateX(0deg);
  animation: cd-rotate-1-in 1.2s;
}

.cd-headline.rotate-1 b.is-hidden {
  transform: rotateX(180deg);
  animation: cd-rotate-1-out 1.2s;
}

Tất cả những gì còn lại để làm là xác định các keyframes cho cả hai hình động. Lý do tại sao chúng tôi chọn Hoạt ảnh trên Chuyển tiếp là sức mạnh thêm trong việc xác định các sự kiện trung gian. Đây là cách chúng ta tạo ra hiệu ứng “dự đoán”. Làm việc với keyframes rõ ràng đang làm việc với các khái niệm chuyển động. Bạn có thể tăng cường tương tác của mình bằng cách phân phối chúng dọc theo dòng thời gian.

@keyframes cd-rotate-1-in {
  0% {
    transform: rotateX(180deg);
    opacity: 0;
  }
  35% {
    transform: rotateX(120deg);
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  100% {
    transform: rotateX(360deg);
    opacity: 1;
  }
}

@keyframes cd-rotate-1-out {
  0% {
    transform: rotateX(0deg);
    opacity: 1;
  }
  35% {
    transform: rotateX(-40deg);
    opacity: 1;
  }
  65% {
    opacity: 0;
  }
  100% {
    transform: rotateX(180deg);
    opacity: 0;
  }
}

Xử lý sự kiện

Để kích hoạt hình ảnh tiêu đề, chúng ta đã xác định hàm animateHeadline().

var animationDelay = 2500;

animateHeadline($('.cd-headline'));

function animateHeadline($headlines) {
   $headlines.each(function(){
      var headline = $(this);
      //trigger animation
      setTimeout(function(){ hideWord( headline.find('.is-visible') ) }, animationDelay);
      //other checks here ...
   });
}

Điều này được sử dụng để kích hoạt các hàm hideWord() với một sự chậm trễ của 2.5s. Hàm này loại bỏ các .is-visiblelớp từ từ đầu tiên và thêm nó vào thứ hai trong khi loại bỏ các .is-hiddenlớp học từ thứ hai và thêm nó vào lần đầu tiên. Các hideWord()sau đó được kích hoạt một lần nữa (với cùng một sự chậm trễ) để tạo ra các vòng lặp.

function hideWord($word) {
   var nextWord = takeNext($word);
   switchWord($word, nextWord);
   setTimeout(function(){ hideWord(nextWord) }, animationDelay);
}

function takeNext($word) {
   return (!$word.is(':last-child')) ? $word.next() : $word.parent().children().eq(0);
}

function switchWord($oldWord, $newWord) {
   $oldWord.removeClass('is-visible').addClass('is-hidden');
   $newWord.removeClass('is-hidden').addClass('is-visible');
}

Một lưu ý : có một số hiệu ứng yêu cầu hiển thị các ký tự đơn lẻ riêng biệt (ví dụ: hiệu ứng Kiểu). Đối với các hình động này, chúng tôi đã thêm .letterslớp vào <h1> và bọc mỗi ký tự bên trong một <i>phần tử sử dụng singleLetters()hàm.

singleLetters($('.cd-headline.letters').find('b'));

function singleLetters($words) {
   $words.each(function(){
      var word = $(this),
          letters = word.text().split(''),
          selected = word.hasClass('is-visible');
      for (i in letters) {
         letters[i] = (selected) ? '<i class="in">' + letters[i] + '</i>': '<i>' + letters[i] + '</i>';
      }
      var newLetters = letters.join('');
      word.html(newLetters);
   });
}