Otwarcie na Gwiezdne Wojny jest ikoniczne. Efekt przewijania tekstu zarówno w górę, jak i poza ekran był zarówno szalonym, fajnym efektem specjalnym dla filmu z 1977 roku, jak i fajnym stylem typograficznym, który był zupełnie nowy w tamtych czasach.
Podobny efekt możemy osiągnąć za pomocą HTML i CSS! Ten post jest bardziej o tym, jak uzyskać efekt przesuwanego tekstu, zamiast próbować odtworzyć pełną sekwencję otwierającą Gwiezdne wojny lub dopasować dokładnie style użyte w filmie, więc przejdźmy do miejsca, w którym jest to ostateczny wynik:
Zobacz wprowadzenie do Pen Star Wars autorstwa Geoffa Grahama (@geoffgraham) na CodePen.
Podstawowy HTML
Najpierw skonfigurujmy HTML dla treści:
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…
To daje nam wszystkie potrzebne elementy:
- Kontener o nazwie
star-wars, którego będziemy używać do pozycjonowania zawartości. Jest to również konieczne, ponieważ będziemy używaćperspectivewłaściwości CSS, gdzie posiadanie elementu nadrzędnego jest pomocnym sposobem na dodanie głębi lub pochylenietransformwłaściwości elementu podrzędnego . - Kontener o nazwie,
crawlktóry będzie zawierał rzeczywisty tekst i będzie elementem, do którego zastosujemy animację CSS. - Zawartość!
Być może zauważyłeś, że tytuł filmu jest umieszczony w dodatkowym kontenerze o nazwie title. Nie jest to konieczne, ale może zapewnić dodatkowe opcje stylizacji, jeśli ich potrzebujesz.
Podstawowy CSS
Sztuczka polega na wyobrażeniu sobie trójwymiarowej przestrzeni, w której tekst czołga się pionowo w górę Y-axisi na zewnątrz wzdłuż Z-axis. Sprawia to wrażenie, że tekst jest jednocześnie przesuwany w górę ekranu i od widza.
Najpierw skonfigurujmy dokument tak, aby nie można było przewijać ekranu. Chcemy, aby tekst pojawiał się z dołu ekranu, a widz nie mógł przewijać i zobaczyć tekstu przed jego wejściem. Możemy overflow: hiddento zrobić:
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; )Teraz możemy przejść do stylizacji naszego star-warskontenera, który jest elementem nadrzędnym dla naszego demo:
.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; )Następnie możemy zastosować style do crawlelementu. Ponownie, ten element jest ważny, ponieważ zawiera właściwości, które przekształcą tekst i będą animowane.
.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%; )Jak dotąd mamy ładnie wyglądający tekst, ale nie jest on ani wypaczony, ani animowany. Zróbmy to.
Animacja!
To jest to, na czym naprawdę ci zależy, prawda? Najpierw zdefiniujemy @keyframesanimację. Animacja robi dla nas coś więcej niż tylko animację, ponieważ zamierzamy transformtutaj dodać nasze właściwości, szczególnie dla ruchu wzdłuż Z-axis. Rozpoczniemy animację w 0%miejscu, w którym tekst znajduje się najbliżej widza i znajduje się poniżej ekranu, poza zasięgiem wzroku, a następnie zakończymy animację w 100%miejscu, w którym jest daleko od widza i płynie w górę i nad górną częścią ekranu.
/* 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); ) )Teraz zastosujmy tę animację do .crawlelementu:
.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; )Zabawa z precyzyjnym dostrajaniem
Możesz mieć trochę więcej zabawy, gdy główny efekt zostanie zastosowany. Na przykład możemy dodać niewielkie zanikanie u góry ekranu, aby podkreślić efekt pełzania tekstu w dal:
.fade ( position: relative; width: 100%; min-height: 60vh; top: -25px; background-image: linear-gradient(0deg, transparent, black 75%); z-index: 1; )Dodaj ten element na górze kodu HTML, a tekst będzie płynął za gradientem, który przechodzi od przezroczystego do tego samego tła, co :
Pełny przykład
Oto pełny kod z tego posta zebrany razem.
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); ) )Inne przykłady
Niektórzy ludzie wykonali wierniejsze wersje otwarcia Gwiezdnych Wojen, używając innych technik niż te, które zostały omówione w tym poście.
Tim Pietrusky ma pięknie zaaranżowaną wersję wykorzystującą topruch i opacityefekt zanikania:
Zobacz indeks początkowy Pen Star Wars z 1977 roku autorstwa Tima Pietrusky'ego (@TimPietrusky) na CodePen.
Yukulélé używa margindo poruszania po ekranie:
Zobacz początkowe indeksowanie Pen Pure CSS Star Wars autorstwa Yukulélé (@yukulele) na CodePen.
Karottes używa czegoś transformpodobnego do tego posta, ale bardziej polega na TranslateYprzenoszeniu tekstu wzdłuż Y-axis.
Zobacz Pen Star Wars Crawl autorstwa Karottes (@Karottes) na CodePen.