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 徽标