代码片段 → CSS → 星球大战爬行字幕

星球大战爬行字幕

Avatar of Geoff Graham
Geoff Graham 于

星球大战的开场画面非常具有标志性。文本向上和远离屏幕滚动的效果，在1977年的电影中既是一种非常酷炫的特效，同时也是一种当时全新的酷炫的排版风格。

我们可以使用HTML和CSS实现类似的效果！这篇文章更多的是关于如何获得这种滑动文本效果，而不是试图重新创建完整的星球大战开场序列或匹配电影中使用的确切样式，所以让我们进入最终结果。

查看 CodePen 上 Geoff Graham (@geoffgraham) 的作品 星球大战片头。

基本HTML

首先，让我们为内容设置HTML

<section class="star-wars">

  <div class="crawl">
    
    <div class="title">
      <p>Episode IV</p>
      <h1>A New Hope</h1>
    </div>
    
    <p>It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.</p>     
    <p>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.</p>
    <p>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…</p>

  </div>

</section>

这为我们提供了所有需要的部分

  • 一个名为star-wars的容器，我们将使用它来定位内容。这也很有必要，因为我们将使用perspective CSS 属性，而拥有父元素是添加深度或倾斜子元素的transform属性的有用方法。
  • 一个名为crawl的容器，它将容纳实际的文本，并将成为我们应用CSS动画的元素。
  • 内容！

您可能已经注意到，电影标题被包裹在一个名为<div>的额外容器中，名为title。这不是必需的，但如果需要，可以为您提供其他样式选项。

基本CSS

诀窍是想象一个三维空间，其中文本沿Y轴垂直向上爬行，并沿Z轴向外移动。这给人一种文本同时向上滑动屏幕并远离观看者的印象。

三维平面的X、Y和Z轴

首先，让我们设置文档<body>，以便屏幕不可滚动。我们希望文本从屏幕底部向上出现，而观看者无法滚动并提前看到文本。我们可以使用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轴的移动。我们将从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顶部，文本将流过从透明到与<body>相同的背景的渐变

<div class="fade"></div>

完整示例

这是这篇文章中整理的完整代码。

<div class="fade"></div>

<section class="star-wars">

  <div class="crawl">

    <div class="title">
      <p>Episode IV</p>
      <h1>A New Hope</h1>
    </div>
    
    <p>It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.</p>      
    <p>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.</p>
    <p>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…</p>

  </div>

</section>
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);
  }
}

其他示例

其他一些人使用与本文中介绍的不同技术，制作了更忠实的星球大战开场画面版本。

Tim Pietrusky 使用top进行移动，并使用opacity创建淡出效果，制作了一个精心编排的版本

查看 CodePen 上 Tim Pietrusky (@TimPietrusky) 的作品 1977年星球大战开场爬行字幕。

Yukulélé 使用margin沿屏幕移动

查看 CodePen 上 Yukulélé (@yukulele) 的作品 纯CSS星球大战开场爬行字幕。

Karottes 使用transform，与本文类似，但更多地依赖于TranslateY沿Y轴移动文本。

查看 CodePen 上 Karottes (@Karottes) 的作品 星球大战爬行字幕。

嘘！创建一个DigitalOcean账户，并获得200美元的免费信用额度，用于基于云的托管和服务。

评论

  1. Wayne
    评论永久链接#

    太棒了。我正在将它用于学校项目，效果非常好。感谢您提供这个。当然，我更改了措辞以反映我的项目，但效果非常好，您会以为我参与了星球大战的制作。

    再次感谢，这就是我热爱网页开发的原因

    回复
  2. Garrett
    评论永久链接#

    有没有办法使用元素的滚动位置而不是动画来实现此效果？

    回复
  3. Jason Willis
    评论永久链接#

    如何在滚动期间加入声音，甚至在滚动完成后显示背景？

    回复
  4. Andrew
    评论永久链接#

    你好——太棒了！
    我对CSS等一无所知，因此这样的帮助真是天赐之物！！

    只有一件事需要——在Twein中使用Sugarcube，我试图让一段文字带有爬行效果，并在其完成后跳转到下一段文字。这可能吗？

    回复

发表评论

您的电子邮件地址将不会被公开。 必填字段标有 *

© 2024 . All rights reserved.