Question

我想重新创建一种我在网站上注意到的特殊滚动。

转到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>

Answer 1

哇，真是个垃圾网站，这使我的笔记本电脑停顿了下来。

无论哪种方式，这都是您顺利进行此操作的方式：

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或CSS淡化内容（滚动效果）

1 个答案: