我想重新创建一种特殊的卷轴,我注意到在一个网站上。
转到https://basicagency.com/yir/;
等待EXPLORE
按钮出现并单击它;
在新视图中向下滚动。
我如何才能使用相同的滚动效果的内容?似乎你不是在往下走,而是在网站上。
我已经能够创建一个页面,看起来一样,但我不知道如何做到这一点。
/* i don't have idea */
*{
padding: 0;
margin: 0;
max-width: 100vw;
overflow-x: hidden;
}
main{
display: grid;
grid-template-columns: 10vw 90vw;
grid-template-rows: 100vh;
}
nav{
background: rgba(255,0,0,0.5);
z-index: 1;
width: 10vw;
height: 100vh;
left: 0;
top: 0;
position: fixed;
}
#c1{
background: blue /*url(../img/back.jpeg) center no-repeat*/;
background-size: cover;
grid-column: 1 / -1;
grid-row: 1 / -1;
z-index: 0;
}
#c2{
background: black;
grid-column: 1 / -1;
grid-row: 1 / -1;
z-index: 0;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<nav>
</nav>
<main>
<content id="c1">
</content>
</main>
<main>
<content id="c2">
</content>
</main>
</body>
</html>
最佳答案
哇,真是个垃圾网站,让我的笔记本电脑停了下来。
不管怎样,这里是你如何顺利地做到这一点的:
https://codepen.io/damPop/pen/OaLawm
https://github.com/peachananr/onepage-scroll
将此添加到您的文件中
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
应该可以。
关于javascript - 使用JavaScript或CSS淡化内容(滚动效果),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53993597/