Откриването на Междузвездни войни е емблематично. Ефектът от превъртането на текста нагоре и далеч от екрана беше както луд страхотен специален ефект за филм през 1977 г., така и страхотен типографски стил, който беше съвсем нов по това време.
Можем да постигнем подобен ефект с HTML и CSS! Тази публикация е по-скоро за това как да получите този плъзгащ се текстов ефект, вместо да се опитвате да пресъздадете пълната начална последователност на Междузвездни войни или да съвпадате с точните стилове, използвани във филма, така че нека стигнем до място, където това е крайният резултат:
Вижте Intro на Pen Star Wars от Geoff Graham (@geoffgraham) на CodePen.
Основният HTML
Първо, нека зададем HTML за съдържанието:
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…
Това ни дава всички парчета, от които се нуждаем:
- Контейнер, наречен
star-wars, който ще използваме за позициониране на съдържанието. Това също е необходимо, защото ще използвамеperspectiveсвойството CSS, където наличието на родителски елемент е полезен начин за добавяне на дълбочина или изкривяване наtransformсвойството на дъщерния елемент . - Контейнер, наречен,
crawlкойто ще съдържа действителния текст и ще бъде елементът, към който прилагаме CSS анимацията. - Съдържанието!
Може би сте забелязали, че заглавието на филма е обвито в допълнителен контейнер, наречен title. Това не е необходимо, но може да ви предостави допълнителни опции за стилизиране, ако имате нужда от тях.
Основният CSS
Номерът е да си представите триизмерно пространство, където текстът пълзи вертикално нагоре Y-axisи навън по Z-axis. Това създава впечатлението, че текстът едновременно се плъзга нагоре по екрана и далеч от зрителя.
Първо, нека настроим документа, така че екранът да не може да се превърта. Искаме текстът да излиза от долната част на екрана, без зрителят да може да превърта и вижда текста преди да влезе. Можем да използваме overflow: hiddenтова:
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; )Сега можем да преминем към стилизиране на нашия star-warsконтейнер, който е родителският елемент за нашата демонстрация:
.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; )След това можем да приложим стилове към crawlелемента. Отново този елемент е важен, защото съдържа свойствата, които ще преобразят текста и ще бъдат анимирани.
.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%; )Засега имаме красив куп текст, но той не е нито изкривен, нито анимиран. Нека направим така.
Анимация!
Това е, което наистина ви интересува, нали? Първо ще определим @keyframesанимацията. Анимацията прави малко повече от анимация за нас, защото ние ще добавим нашите transformсвойства тук, особено за движението по Z-axis. Ще започнем анимацията 0%там, където текстът е най-близо до зрителя и се намира под екрана, извън полезрението, след което ще завършим анимацията 100%там, където е далеч от зрителя и тече нагоре и над горната част на екрана.
/* 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); ) )Сега, нека приложим тази анимация върху .crawlелемента:
.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; )Забавни времена с фина настройка
Можете да се забавлявате малко повече с нещата, след като основният ефект е налице. Например, можем да добавим малко избледняване в горната част на екрана, за да подчертаем ефекта от пълзенето на текста в далечината:
.fade ( position: relative; width: 100%; min-height: 60vh; top: -25px; background-image: linear-gradient(0deg, transparent, black 75%); z-index: 1; )Добавете този елемент в горната част на HTML и текстът ще тече зад градиент, който преминава от прозрачен към същия фон като :
Пълният пример
Ето пълния код от тази публикация, събрана заедно.
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); ) )Други примери
Някои други хора са направили по-верни предавания на откриването на „Междузвездни войни“, използвайки други техники, отколкото тези, описани тук в тази публикация.
Тим Пиетруски има красиво оркестрирана версия, използваща topза движението и opacityза създаване на избледняващ ефект:
Вижте обхождането на Pen Star Wars от 1977 г. от Тим Пиетруски (@TimPietrusky) на CodePen.
Yukulélé използва marginза преместване на продължението по екрана:
Вижте обхождането на Pen Pure CSS Star Wars от Yukulélé (@yukulele) на CodePen.
Karottes използва transformподобно на тази публикация, но разчита повече на TranslateYпреместването на текста по Y-axis.
Вижте Пълзенето на Pen Star Wars от Karottes (@Karottes) на CodePen.