motionjs实现滚动鼠标卡片堆叠效果代码-html代码-BFW代码库

motionjs实现滚动鼠标卡片堆叠效果代码

代码语言：html

代码描述：motionjs实现滚动鼠标卡片堆叠效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
:root {
	--card-height: 40vw;
	--card-margin: 4vw;
	--card-top-offset: 1em;
	--numcards: 4;
	--outline-width: 0px;
}

#cards {
	padding-bottom: calc(var(--numcards) * var(--card-top-offset)); /* Make place at bottom, as items will slide to that position*/
	margin-bottom: var(--card-margin); /* Don't include the --card-margin in padding, as that will affect the scroll-timeline*/
}

.card {
	position: sticky;
	top: 0;
	padding-top: var(--card-top-offset);
	transform-origin: 50% 0%;
	will-change: transform;
}


/** DEBUG **/

#debug {
  position: fixed;
  top: 1em;
  left: 1em;
}
#debug::after {
  content: " Show Debug";
  margin-left: 1.5em;
  color: white;
  white-space: nowrap;
}

#debug:checked ~ main {
  --outline-width: 1px;
}


/** PAGE STYLING **/

* { /* Poor Man's Reset */
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background: rgb(58 29 43);
	color: rgb(255, 255, 255);
	text-align: center;

	font-size: calc(1em + 0.5vw);
}

header,
main {
	width: 80vw;
	margin: 0 auto;
}

header {
	height: 100vh;
	display: gr.........完整代码请登录后点击上方下载按钮下载查看