shields 徽标_如何使徽标具有“滑动滚动”效果

shields 徽标

在今天的教程中，我们将使用JavaScript创建一个简单，灵活，视差效果，其中徽标看上去会随着用户滚动时的背景改变颜色。

我们将创建一个“ default”元素，使其位置正确（ position: fixed ），以及一堆“ moveable”元素，其位置取决于该“ default”元素。 每次用户滚动时，我们都会使用JavaScript来实现。

注意：为了涵盖所有基础，我以视频和书面形式提供了说明。

观看视频

在YouTube上订阅Tuts + Web设计

阅读教程

基本标记

我们将从创建几个包含元素开始。 让我们将它们的背景之一设为暗而一为浅，以便在其中包含一个对比鲜明的图像。 我们还要继续前进，给它一类的使我们的第一个图像的“默认”图像default ，而其它形象将得到类的moveable 。

<div class="container dark">
  <img src="img/acme-light.svg" class="default">
</div>

<div class="container light">
  <img src="img/acme-dark.svg" class="moveable">
</div>

基本样式

现在，通过设置overflow: hidden确保我们的图像不会最终滚动到其容器之外。 我们还将继续说这些容器具有相对位置，因此在编写JavaScript时，绝对定位的元素将与这些容器对齐，而不是直接与fixed元素对齐。

为了可滚动性，让我们将这些容器的min-height 400px左右。 为了使徽标远离边缘，让我们给它们加上1em padding 。

.container {
  overflow: hidden;
  position: relative;
  min-height: 400px;
  padding: 1em;
}

每个容器需要一些对比色，因此：

.dark {
  background: #333;
}

.light {
  background: #fff;
}

最后，按照承诺，让我们设置默认的和可移动CSS，以便一个在用户滚动时卡在页面上，另一个在不移动到其他元素的情况下随之移动：

.default {
  position: fixed;
}

.moveable {
  position: absolute;
}

那应该注意标记和样式。 如果您查看该页面，则应该看到默认徽标向下滚动并隐藏在其他容器的后面，而所有可移动徽标应作为普通元素显示在其各自容器的左上角。

JavaScript简介

现在有趣的是，使其可以与JavaScript一起使用。

首先，我们将在我们的index.html底部加载jQuery和自定义脚本：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="js/slipScroll.js"></script>
  </body>
</html>

创建并打开一个名为js/slipScroll.js的文件。

在该文件中，我们要做的第一件事是创建一个名为setLogo的函数，并将该函数放入jQuery滚动事件中，以便每次用户滚动像素时都会触发此事件。 我们还希望确保在用户首次到达页面时（滚动之前）触发此事件：

var setLogo = function() {

};

$(document).scroll(function() {
  setLogo();
});

setLogo();

使事情起作用

现在为魔术。 假设页面上的.moveable每个实例都应将其CSS top位置更改为默认图像距页面顶部的距离，减去此.moveable元素的容器距页面顶部的距离。

var setLogo = function() {

  $('.moveable').each(function() {
    $(this).css('top',
      $('.default').offset().top -
      $(this).closest('.container').offset().top
    );
  });

};

刷新页面，瞧！ 您仅用几行代码就从头创建了伪视差滚动效果。

结论

我鼓励您修改此解决方案。 尝试使用JavaScript函数本身，看看添加或删除一些像素后会得到什么样的怪异偏移量。 尝试使用其他元素（是否可以导航？），而不只是将图像用作可滚动内容。

希望您能学到很多，如果有任何疑问，请随时在下面写下评论。

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-give-your-logo-the-slip-scroll-effect--cms-22274

shields 徽标