外星人图像和外星人太空船_如何编码滚动的“外星人”网站

最新推荐文章于 2025-12-26 22:03:27 发布

翻译最新推荐文章于 2025-12-26 22:03:27 发布 · 327 阅读

文章标签：

#html #python #css #javascript #java #ViewUI

外星人图像和外星人太空船

我们将要建设的

我们将把所有的东西放在一起，以便当您从页面顶部向下滚动时，您会看到“ Alien Lander”正在降落。一开始，我们将看到不明飞行物在太空中盘旋。

当我们向下滚动时，不明飞行物将到达大气层并成为“外星彗星”。

最后，当它穿过林线时，它将变成一个“小矮人”，使他降落在地面上。

看一下现场演示！

SVG图片

在此项目中，我们将使用SVG图像，因此我们可以利用它们的可变缩放能力以及较小的文件大小。

在开始编码之前，您将需要在本教程系列的第一部分中创建的图像，分为四个SVG文件：

UFO作为名为“ ufo.svg”的文件
“外星彗星”作为名为“ alien_comet.svg”的文件
“小绿人”作为名为“ alien_landing.svg”的文件
除去上述三项的背景图像，名为“ background.svg”的文件

您可以根据需要从首选的图形应用程序中自己导出这些SVG图像，或者可以在GitHub 的源文件中找到所有可供使用的四张图像。

设置基本结构

为您的项目创建一个新文件夹，并在其中创建一个名为“ css”的子文件夹和一个名为“ images”的子文件夹。

将您的四个SVG图像复制并粘贴到新的“ images”文件夹中。

在“ css”文件夹中，创建一个名为“ style.css”的文件。

在主文件夹中，创建一个名为“ index.html”的新文件。

您的文件夹结构现在应如下所示：

在“ index.html”文件中，添加以下基本HTML以获取基本知识并加载样式表：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Scrolling Alien Lander</title>
  <link rel="stylesheet" href="css/coding_style.css">
</head>
<body>


  
</body>
</html>

添加背景

看起来似乎违反直觉，但实际上我们将使用img元素而不是CSS背景图像添加背景图像。我们这样做是因为：

我们想利用SVG调整大小的能力，无论浏览器窗口的尺寸如何，都用“ background.svg”图像填充整个视口。
为了使滚动技术起作用，我们需要知道背景图像的高度。
因为我们允许背景图像的大小是可变的，所以我们无法预先知道其高度。
由于我们无法预先知道背景图片的高度，因此必须在图片加载后对其进行检测。
如果将“ background.svg”设置为CSS背景图像，则其高度不会影响网站布局，因此很难检测其高度。
通过插入“ background.svg”作为常规图像，它的高度将影响站点布局，从而使其相对容易使用jQuery进行检测。

现在您了解了为什么要采用这种方法，让我们开始编码！

在您的“ index.html”文件中添加以下代码：

<img class="background" src="images/background.svg">

现在，如果您在浏览器中预览文件，您应该会看到图像填充了视口。但是，边缘周围仍然会有一些空白。

这是因为默认情况下，浏览器在body元素上包含很小的空白。要覆盖它，请在“ style.css”文件中添加以下CSS：

body {
  margin: 0;
}

还有另一个我们需要覆盖的浏览器默认值，即设置为inline图像的display属性的默认值。如果滚动到页面底部，由于此默认设置，您会看到图像下方目前有一个小的空白。通过添加以下内容进行更改：

img {
  display: block;
}

现在，您应该会看到“ background.svg”图像充满了与边缘齐平的窗口，如果您调整窗口宽度的大小，您将看到SVG图像会自动缩放以适应新的大小。网站布局的高度也会更改，以保持“ background.svg”图像的正确纵横比。

添加前景容器

为了使我们刚放置的图像表现为背景图像，我们需要一种使其余内容位于前景顶部的方法。我们可以通过添加将用作容器的div元素，然后修改其position和z-index属性来实现此目的。

在您的“ index.html”文件中，在刚添加的图像之后，插入以下新的div：

<div class="foreground">
  </div>

在“ style.css”中添加以下CSS：

.foreground {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
}

让我们来看一下上面的代码。

首先，通过将position设置为absolute我们将元素从常规文档流中移除（否则会将其放置在背景图像下方），从而可以将其放置在我们选择的任何位置。

然后，将top和left属性设置为0 ，这会将元素移到窗口顶部，并使它与背景图像水平对齐。

之后，将元素的height和width 100% 。这样可以确保元素不会折叠为零，不会隐藏其中的任何内容。

最后，我们将z-index设置为1 ，这会使元素向前移动，因此它位于背景图片的前面（默认情况下为auto的z-index ）。这样可以防止元素内的内容被背景图像遮盖。

现在，我们的前台容器已准备好向其中添加内容。

添加UFO面板

我们要使UFO在底部“降落”的方法是创建三个面板，每个“降落”阶段一个。然后，我们将为每个面板添加相应的SVG图像，例如“ ufo.svg”文件，作为固定位置背景图像。然后，图像将在滚动过程中保留在原处，而背景在其后方移动，从而产生下降的错觉。

在您的“前景” div ，添加以下新div ：

<div class="ufo_section"></div>

现在将以下代码添加到您CSS中：

.ufo_section {
  height: 100%;
  background: url(../images/ufo.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40% auto;
  background-attachment: fixed;
}

在上述代码的第一行中，我们将元素的height为100% ，以确保其内容可见。然后，我们添加“ ufo.svg”图像作为背景。我们将background-repeat设置为no-repeat因为我们只希望一个UFO出现，然后我们将background-position水平和垂直放置在中心background-position 。

使用background-size属性，我们将宽度设置为基于百分比的值，并允许自动计算高度。此宽度是从原始矢量图像绘制的，其中UFO的宽度约为整个插图宽度的40％。

通过将“ ufo.svg”图像的宽度设置为百分比，当调整窗口大小并且“ background.svg”图像随之改变时，UFO图像还将调整其宽度以保留预期的比例。

在最后一行，我们将background-attachment设置为fixed ，这意味着图像在滚动时将保持固定不变，从而给我们带来了下降的幻觉。

尝试刷新页面并立即滚动-您应该会看到UFO在行星之间垂直移动。

添加彗星和着陆面板

当您向下滚动网站时，一旦跌落足够远，您会发现UFO消失了。发生这种情况是因为我们滚动超过了ufo_section面板的高度，所以此时我们不再能够看到其背景。

我们要堆叠三块板这样在彼此的顶部，这样当我们滚过之一，其背景消失以下面板的背景出现，创造一个形象的被下一个被替换的效果。

因此，我们现在将重复上述过程，以插入“ alien_comet.svg”和“ alien_landing.svg”图像。

在HTML中，在ufo_section div之后并仍在前景div内添加以下内容：

<div class="comet_section"></div>
<div class="landing_section"></div>

然后在您CSS中添加以下新类：

.comet_section {
  height: 100%;
  background: url(../images/alien_comet.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15% auto;
  background-attachment: fixed;
}

.landing_section {
  height: 100%;
  background: url(../images/alien_landing.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15% auto;
  background-attachment: fixed;
  position: relative;
}

我们在这里使用所有相同的代码和技术，只更改了图像文件名，并且将background-size属性的宽度设置为15%以适应刚刚添加的较窄图像。

您完成CSS

您的“ style.css”文件现已完成，应包含以下代码：

body {
  margin: 0;
}

img {
  display: block;
}

.foreground {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
}

.ufo_section {
  height: 100%;
  background: url(../images/ufo.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40% auto;
  background-attachment: fixed;
}

.comet_section {
  height: 100%;
  background: url(../images/alien_comet.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15% auto;
  background-attachment: fixed;
}

.landing_section {
  height: 100%;
  background: url(../images/alien_landing.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15% auto;
  background-attachment: fixed;
  position: relative;
}

现在返回您的站点，向下滚动，您应该会看到UFO变成彗星，然后再向下一点变成“小绿人”。

添加面板高度计算

现在，您会注意到滚动时有两个问题需要解决，它们是：

三个面板均不够高。这使得外星着陆器似乎从一种形式转换为另一种形式的时间太早了，因此它永远不会落地。
您可以看到“ alien_comet.svg”映像在“ ufo.svg”映像完全消失之前开始出现，这看起来很奇怪。

由于我们的“ background.svg”图像没有固定大小，因此我们不知道加载前每个面板的确切像素高度。但是，我们可以预先决定的是每个面板的高度应为“ background.svg”高度的百分比。

使用jQuery，我们可以实现以下过程：

将我们希望每个面板的高度定义为“ background.svg”图像高度的百分比（或分数）。
加载后检测“ background.svg”的高度。
根据以上两个信息，计算并设置面板的高度。

在此过程中，我们还将添加几个额外的空div充当每个面板之间的间隔，并使用jQuery设置它们的高度。在面板之间添加空间将使过渡更加顺畅，解决了在“ ufo.svg”图像消失之前看到“ alien_comet.svg”图像的问题。

更新您HTML，以便每个现有div之间都有一个div分隔符，如下所示：

<div class="foreground">
  <div class="ufo_section"></div>
  <div class="spacer_one"></div>
  <div class="comet_section"></div>
  <div class="spacer_two"></div>
  <div class="landing_section"></div>
</div>

在开头部分，通过添加以下内容加载jQuery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

设置JavaScript函数

在结束</body>标记之前，创建一对<script></script>标记并在内部设置一个新函数，如下所示：

<script>

  function set_section_heights(){

  }
  
</script>

我们希望此功能在页面首次加载时以及在页面大小调整时触发，因此要实现此功能，还应在打开script标记后添加以下代码：

$(document).ready(function(){
  set_section_heights();
});

$(window).resize(function(){
  set_section_heights();
});

获取背景图像的高度

在set_section_heights()函数内部，我们需要做的第一件事是找出背景图像当前的高度并将其保存为变量。为此，请添加以下代码：

var doc_height = $(".background").height();

在代码的第一部分$(".background") ，jQuery找到了具有类名background的元素。然后，附加的.height()函数获取该元素的像素高度为整数。这告诉我们“ background.svg”图像的高度，并将该数字保存在变量doc_height 。

定义目标截面高度

现在，我们将设置一个可以在其中定义的对象：

我们要为其设置高度的每个元素的类名称。
该元素的高度应为背景高度的一部分。

我们将遍历此对象，并使用其中包含的值来调整前景中各节的大小。

让我们从对象中的一个条目开始：

var section_heights = {
  "ufo_section": 0.25
}

在这里，我们将索引（左侧的值）设置为ufo_section以匹配第一部分的类名。

然后，将值设置为0.25 ，这是表示25％的另一种方法。 doc_height ，我们将这个值乘以doc_height变量中存储的doc_height ，即背景图片的高度。通过这样做，我们可以说我们希望ufo_section面板为“ background.svg”当前高度的25％。

例如，如果“background.svg”的高度为1000px的ufo_section的高度会出来为250px ：

1000 * 0.25 = 250

现在，我们已经研究了该对象的工作原理，让我们为要设置高度的其他元素添加一些条目。将对象更新为以下内容：

var section_heights = {
  "ufo_section": 0.25,
  "spacer_one": 0.03,
  "comet_section": 0.36,
  "spacer_two": 0.06,
  "landing_section": 0.298
}

注意：我根据反复试验选择了这些值，因此在完成本教程以查看效果后，请随意使用数字。

迭代`section_heights`对象

完成我们的对象后，我们准备开始遍历它并调整面板的大小。

首先，我们需要一个$.each()函数来迭代section_heights对象，并从其包含的每个条目中提取索引和值（分别代表类名和高度）。

在section_heights对象之后添加以下代码：

$.each( section_heights, function( index, value ) {
  console.log( "Index: " + index, "| Value: " + value );
});

为了让您看到上面的迭代函数如何输出index和value变量，我们使用console.log()向section_heights对象中的每个条目向控制台写入一些消息。

重新加载您的网站，打开Chrome Web Developer工具（或您喜欢的浏览器中的等效工具），然后查看控制台。您应该看到以下内容：

在每个消息左侧的索引之后：您可以看到每个条目的index ，即我们要调整大小的元素的类名。

在“ 值”之后每个消息的右侧：您可以看到每个条目的value ，即每个面板应占总高度的比例。

计算并设置截面高度

现在，我们不只是将这些数据记录到控制台中，而是使用它来设置前景部分的大小。删除console.log()行，并将其替换为：

$( "." + index ).height( Math.floor(value * doc_height) );

让我们分解一下这行代码。

首先我们有$( "." + index ) 。我们使用它来查找要调整大小的元素。例如，对于对象中的第一个条目， index设置为ufo_section。在这种情况下，我们代码的第一部分将评估为$.( ".ufo_section" ) 。使用此代码，将提示jQuery在页面上搜索类为ufo_section的元素。

接下来，我们添加.height(...) 。通过此代码，jQuery将设置找到的元素的高度，将其更改为括号之间传递的值。

在方括号之间，您将看到value * doc_height 。这是我们进行前面提到的乘法以计算预期面板高度的地方。例如，我们对象的第一个条目的值为0.25 。该数字将乘以doc_height变量中保存的doc_height 。

在这两个变量相乘的周围，您将看到Math.floor() 。这会将乘法结果四舍五入到最接近的整数。

doc_height ，如果doc_height值为5197 ，则对象中的第一个条目会将其乘以0.25 ， 1299.25的结果为1299.25 。

Math.floor()将舍入到1299 。这意味着我们的代码现在将评估为： $.( ".ufo_section" ).height(1299);

在此行中，jQuery将找到具有类ufo_section的元素，并将其高度设置为1299px 。

您完成HTML和JavaScript

这样就包装了您HTML和JavaScript。现在，您完成的“ index.html”文件应包含以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Scrolling Alien Lander</title>
  <link rel="stylesheet" href="css/coding_style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>

  <img class="background" src="images/background.svg">

  <div class="foreground">
    <div class="ufo_section"></div>
    <div class="spacer_one"></div>
    <div class="comet_section"></div>
    <div class="spacer_two"></div>
    <div class="landing_section"></div>
  </div>

<script>

  $(document).ready(function(){
    set_section_heights();
  });

  $(window).resize(function(){
    set_section_heights();
  });

  function set_section_heights(){

    var doc_height = $(".background").height();

    var section_heights = {
      "ufo_section": 0.25,
      "spacer_one": 0.03,
      "comet_section": 0.36,
      "spacer_two": 0.06,
      "landing_section": 0.298
    }

    $.each( section_heights, function( index, value ) {
      $( "." + index ).height( Math.floor(value * doc_height) );
    });

  }
  
</script>

</body>
</html>

现在重新加载您的网站以查看运行中的代码，并且当您检查HTML时，您应该会看到新计算的尺寸内联显示：

调整浏览器窗口的大小，您应该看到这些值会重新计算和更新，例如：

然后你就完成了！

看看最终结果！现在，当您从页面的顶部开始并开始滚动时，您会看到UFO开始下降。当它到达大气层时，它会消失一点点，而“外星彗星”将取代它并继续下降。在树木的顶部，它再次消失了，一个“小矮人”完成了到地面的旅程。

正如我之前提到的，最好在section_heights对象中设置值，这样您就可以了解它们如何影响着陆器各个阶段的流动。

我希望您喜欢本教程，并且对SVG图像和固定背景可以做的一些有趣的事情有了一些新的想法。

再次感谢Yulia的原始矢量图，也感谢您的阅读，我很快就会再见！

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-code-a-scrolling-alien-lander-website--cms-26826