Стар Варс Цравл Тект - ЦСС-трикови

Anonim

Отварање Ратова звезда је иконично. Ефекат помицања текста према горе и даље са екрана био је и лудо кул специјални ефекат за филм давне 1977. године и кул типографски стил који је у то вријеме био потпуно нов.

Сличан ефекат можемо постићи помоћу ХТМЛ-а и ЦСС-а! Овај пост говори више о томе како да постигнете тај ефекат клизног текста, уместо да покушавате да поново креирате целу секвенцу отварања Ратова звезда или да подударате тачне стилове коришћене у филму, па хајде да дођемо до места где је ово коначни резултат:

Погледајте увод у „Ратове звезда Пен“, Геофф Грахам (@геоффграхам) на ЦодеПен.

Основни ХТМЛ

Прво, подесимо ХТМЛ за садржај:



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својство ЦСС, где је надређени елемент користан начин за додавање дубине или искривљење transformсвојства подређеног елемента .
  • Контејнер који се зове crawlкоји садржи стварни текст и биће елемент на који примењујемо ЦСС анимацију.
  • Садржај!

Можда сте приметили да је наслов филма умотан у додатни контејнер који се зове title. Ово није неопходно, али може вам пружити додатне опције за обликовање ако вам затребају.

Основни ЦСС

Трик је у замишљању тродимензионалног простора где текст пузи вертикално горе 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; )

Додајте тај елемент на врх ХТМЛ-а и текст ће тећи иза градијента који иде од прозирне до исте позадине као :

Пуни пример

Ево целокупног кода из овог поста.



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за стварање ефекта блеђења :

Погледајте пузање Пен Стар Варс-а из 1977, Тим Пиетруски (@ТимПиетруски) на ЦодеПен-у.

Иукулеле користи marginза померање дуж екрана:

Погледајте Пен Пуре ЦСС Стар Варс почетно пузање Иукулеле-а (@иукулеле) на ЦодеПен-у.

Кароттес користи transformмного попут овог поста, али се више ослања на TranslateYпомерање текста дуж Y-axis.

Погледајте Пен Стар Варс Цравл од Кароттес (@ Каротес) на ЦодеПен-у.