Phần mở đầu cho Chiến tranh giữa các vì sao là một biểu tượng. Hiệu ứng cuộn văn bản cả lên và ra khỏi màn hình vừa là một hiệu ứng đặc biệt tuyệt vời cho một bộ phim vào năm 1977, vừa là một phong cách đánh máy tuyệt vời mới toanh vào thời điểm đó.
Chúng ta có thể đạt được hiệu ứng tương tự với HTML và CSS! Bài đăng này thiên về cách tạo hiệu ứng văn bản trượt hơn là cố gắng tạo lại toàn bộ cảnh mở đầu của Chiến tranh giữa các vì sao hoặc khớp với phong cách chính xác được sử dụng trong phim, vì vậy hãy đến nơi mà đây là kết quả cuối cùng:
Xem Giới thiệu về Pen Star Wars của Geoff Graham (@geoffgraham) trên CodePen.
HTML cơ bản
Đầu tiên, hãy thiết lập HTML cho nội dung:
Episode IV
It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.
During the battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.
Pursued by the Empire’s sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy…
Điều này cung cấp cho chúng tôi tất cả các phần chúng tôi cần:
- Một vùng chứa được gọi là
star-warschúng tôi sẽ sử dụng để định vị nội dung. Điều này cũng cần thiết vì chúng tôi sẽ sử dụng thuộc tínhperspectiveCSS, trong đó có phần tử cha là một cách hữu ích để thêm chiều sâu hoặc làm lệch thuộctransformtính của phần tử con . - Một vùng chứa được gọi
crawlsẽ chứa văn bản thực tế và là phần tử mà chúng tôi áp dụng hoạt ảnh CSS. - Nội dung!
Bạn có thể nhận thấy rằng tiêu đề phim được bao bọc trong một vùng chứa phụ có tên title. Điều này là không cần thiết, nhưng có thể cung cấp cho bạn các tùy chọn tạo kiểu bổ sung nếu bạn cần.
CSS cơ bản
Bí quyết là hãy tưởng tượng một không gian ba chiều nơi văn bản thu thập dữ liệu theo chiều dọc Y-axisvà dọc theo Z-axis. Điều này tạo ấn tượng văn bản được trượt lên màn hình và rời khỏi người xem cùng một lúc.
Đầu tiên, hãy thiết lập tài liệu để màn hình không cuộn được. Chúng tôi muốn văn bản xuất hiện từ cuối màn hình mà người xem không thể cuộn và nhìn thấy văn bản trước khi nhập. Chúng tôi có thể sử dụng overflow: hiddenđể làm điều đó:
body ( /* Force the body to fill the entire screen */ width: 100%; height: 100%; /* Hide elements that flow outside the viewable space */ overflow: hidden; /* Black background for the screen */ background: #000; )Bây giờ chúng ta có thể chuyển sang tạo kiểu cho vùng star-warschứa của mình, đây là phần tử mẹ cho bản trình diễn của chúng ta:
.star-wars ( /* Flexbox to center the entire element on the screen */ display: flex; justify-content: center; /* This is a magic number based on the context in which this snippet is used and effects the perspective */ height: 800px; /* This sets allows us to transform the text on a 3D plane, and is somewhat a magic number */ perspective: 400px; /* The rest is totally up to personal styling preferences */ color: #feda4a; font-family: 'Pathway Gothic One', sans-serif; font-size: 500%; font-weight: 600; letter-spacing: 6px; line-height: 150%; text-align: justify; )Tiếp theo, chúng ta có thể áp dụng các kiểu cho crawlphần tử. Một lần nữa, phần tử này rất quan trọng vì nó chứa các thuộc tính sẽ biến đổi văn bản và được làm động.
.crawl ( /* Position the element so we can adjust the top property in the animation */ position: relative; /* Making sure the text is fully off the screen at the start and end of the animation */ top: -100px; /* Defines the skew origin at the very center when we apply transforms on the animation */ transform-origin: 50% 100%; )Cho đến nay, chúng ta có một loạt văn bản trông đẹp mắt, nhưng nó không bị lệch cũng như không hoạt hình. Hãy biến điều đó thành hiện thực.
Hoạt hình!
Đây là điều bạn thực sự quan tâm, phải không? Đầu tiên, chúng ta sẽ xác định @keyframeshoạt ảnh. Hoạt ảnh đang làm nhiều hơn một chút so với hoạt ảnh cho chúng ta, bởi vì chúng ta sẽ thêm các transformthuộc tính của chúng ta ở đây, đặc biệt cho chuyển động dọc theo Z-axis. Chúng tôi sẽ bắt đầu hoạt ảnh tại 0%nơi văn bản gần người xem nhất và nằm bên dưới màn hình, khuất tầm nhìn, sau đó kết thúc hoạt ảnh ở 100%nơi văn bản ở xa người xem và chảy lên trên đầu màn hình.
/* We're calling this animation "crawl" */ @keyframes crawl ( 0% ( /* The element starts below the screen */ top: 0; /* Rotate the text 20 degrees but keep it close to the viewer */ transform: rotateX(20deg) translateZ(0); ) 100% ( /* This is a magic number, but using a big one to make sure the text is fully off the screen at the end */ top: -6000px; /* Slightly increasing the rotation at the end and moving the text far away from the viewer */ transform: rotateX(25deg) translateZ(-2500px); ) )Bây giờ, hãy áp dụng hoạt ảnh đó trên .crawlphần tử:
.crawl ( /* Position the element so we can adjust the top property in the animation */ position: relative; /* Defines the skew origin at the very center when we apply transforms on the animation */ transform-origin: 50% 100%; /* Adds the crawl animation, which plays for one minute */ animation: crawl 60s linear; )Thời gian vui vẻ với tinh chỉnh
Bạn có thể vui hơn một chút với mọi thứ khi đã có hiệu ứng chính. Ví dụ: chúng ta có thể thêm một chút mờ dần ở đầu màn hình để làm nổi bật hiệu ứng của văn bản thu thập thông tin về khoảng cách:
.fade ( position: relative; width: 100%; min-height: 60vh; top: -25px; background-image: linear-gradient(0deg, transparent, black 75%); z-index: 1; )Thêm phần tử đó vào đầu HTML và văn bản sẽ chảy phía sau một gradient chuyển từ trong suốt sang nền giống như :
Ví dụ đầy đủ
Đây là mã đầy đủ từ bài đăng này được tổng hợp lại.
Episode IV
It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.
During the battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.
Pursued by the Empire’s sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy…
body ( width: 100%; height: 100%; background: #000; overflow: hidden; ) .fade ( position: relative; width: 100%; min-height: 60vh; top: -25px; background-image: linear-gradient(0deg, transparent, black 75%); z-index: 1; ) .star-wars ( display: flex; justify-content: center; position: relative; height: 800px; color: #feda4a; font-family: 'Pathway Gothic One', sans-serif; font-size: 500%; font-weight: 600; letter-spacing: 6px; line-height: 150%; perspective: 400px; text-align: justify; ) .crawl ( position: relative; top: 9999px; transform-origin: 50% 100%; animation: crawl 60s linear; ) .crawl > .title ( font-size: 90%; text-align: center; ) .crawl > .title h1 ( margin: 0 0 100px; text-transform: uppercase; ) @keyframes crawl ( 0% ( top: 0; transform: rotateX(20deg) translateZ(0); ) 100% ( top: -6000px; transform: rotateX(25deg) translateZ(-2500px); ) )Những ví dụ khác
Một số người khác đã thực hiện các bản tái hiện trung thực hơn về phần mở đầu của Chiến tranh giữa các vì sao bằng cách sử dụng các kỹ thuật khác với những kỹ thuật được đề cập ở đây trong bài đăng này.
Tim Pietrusky có một phiên bản được dàn dựng đẹp mắt sử dụng topcho chuyển động và opacitytạo hiệu ứng mờ dần:
Xem phần thu thập thông tin mở đầu Pen Star Wars từ năm 1977 của Tim Pietrusky (@TimPietrusky) trên CodePen.
Yukulélé sử dụng marginđể di chuyển dọc theo màn hình:
Xem phần thu thập thông tin mở đầu của Pen Pure CSS Star Wars của Yukulélé (@yukulele) trên CodePen.
Karottes sử dụng transformgiống như bài đăng này, nhưng dựa vào nhiều hơn TranslateYđể di chuyển văn bản dọc theo Y-axis.
Xem Pen Star Wars Crawl của Karottes (@Karottes) trên CodePen.