用10行JavaScript代码制作一款漂亮的视差效果
web前端开发
共 2353字,需浏览 5分钟
·
2020-10-23 15:02
英文 | https://www.ibrahima-ndaw.com/blog/parallax-effect-with-10-lines-of-javascript/
翻译 | web前端开发(web_qdkf)
在本文中,我们将使用HTML,CSS和仅10行JavaScript代码来制作一个漂亮的视差效果。
首先,我们来看一下最终完成的视差效果的动画图:
Welcome
Scroll to see how cool i am!
Cool like you
然后,我们使用两个标签制作视差效果。第一个标记header包含页面加载时显示的元素,第二个标记section将在滚动时触发以启动效果。
CSS
在CSS这部分里,我们需要先进行一些CSS的设置,然后将需要的字体进行导入进来,代码如下:
@import url("https://fonts.googleapis.com/css?family=Courgette:400,700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(135deg, #0056a7, #165fa3, #477aaa);
font-family: "Courgette", cursive;
}
header {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
height: 100vh;
color: #eee;
z-index: -1;
text-align: center;
animation: fadeIn 1.5s ease-in-out;
}
接着,我们用position:relative控制header标签的位置,当效果开始时,属性z-index:-1会将header标签放置在section元素后面。
section {
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
height: 100vh;
font-size: 5rem;
background: #fcdb6d;
color: #0056a7;
}
在这里,我们为section选择器使用了相反的方法,即当z-index属性滚动为1时,则section标记里面的字放置在header上方。
.animate-me {
animation: bounceIn 3s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes bounceIn {
0% {
transform: scale(0.1);
opacity: 0;
}
60% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(1);
}
}
最后,虽然不是最不重要的一点,但我们为元素入口制作了一些动画。section的反弹效果和header的褪色效果。该类animate-me将section通过JavaScript添加到后面。
JavaScript
最后,我们通过使用JavaScript,让效果在滚动时产生视差效果。
window.addEventListener("scroll", function() {
const distance = window.scrollY
document.querySelector("header").style.transform = `translateY(${distance *
1}px)`
document.querySelector(
".container"
).style.transform = `translateY(${distance * 0.3}px)`
setTimeout(() => {
document.querySelector("section h3").classList.add("animate-me")
}, 400)
})
然后,我们将通过Y轴(垂直)distance的数量分配给常量scroll。然后从DOM中选择所需的元素并访问该transform属性。
评论