javascript - 使用JavaScript或CSS淡化内容(滚动效果)

标签 javascript html css

我想重新创建一种特殊的卷轴,我注意到在一个网站上。
转到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/

相关文章:

html - 将部分文本移动到 div 的右侧

javascript - react JS : Differentiate between Click and Click + Shift event

javascript - 如何重用 promise ?

php - 在 html 电子邮件模板 php 中创建一个 foreach 表

css - 在 React.js 中使用 CSS 动画

html - 导航栏汉堡菜单不显示正确的 li 元素

html - 嵌套的 Div 悬停内容定位不正确

javascript - Babel CLI 引用错误 : regeneratorRuntime is not defined

javascript - 使用异步 Action Vuex 加载状态

java - Selenium 2 将CSS注入(inject)当前显示的网页