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

代码语言：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: grid;
	place-items: center;
}

#cards {
	list-style: none;
	outline: calc(var(--outline-width) * 10) solid blue;
	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(var(--numcards), var(--card-height));
	gap: var(--card-margin);
}

.card {
	outline: var(--outline-width) solid hotpink;
}

.card__content {
	box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.1), 0 1em 2em rgba(0, 0, 0, 0.1);
	background: rgb(255, 255, 255);
	color: rgb(10, 5, 7);
	border-radius: 1em;
	overflow: hidden;

	display: grid;
	grid-template-areas: "text img";
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;

	align-items: stretch;
	outline: var(--outline-width) solid lime;
}

.card__content > div {
	grid-area: text;
	width: 80%;
	place-self: center;
	text-align: left;

	display: grid;
	gap: 1em;
	place-items: start;
}

.card__content > figure {
	grid-area: img;
	overflow: hidden;
}

.card__content > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

h1 {
	font-weight: 300;
	font-size: 3.5em;
}

h2 {
	font-weight: 300;
	font-size: 2.5em;
}

p {
	font-family: sans-serif;
	font-weight: 300;
	line-height: 1.42;
}

.btn {
	background: rgb(188 87 36);
	color: rgb(255 255 255);
	text-decoration: none;
	display: inline-block;
	padding: 0.5em;
	border-radius: 0.25em;
}

aside {
	width: 50vw;
	margin: 0 auto;
	text-align: left;
}

aside p {
	margin-bottom: 1em;
}
</style>

  


</head>

<body  >
  <!-- @TODO: Move away from custom props before injecting the polyfill, as it can't handle it -->
<input type="checkbox" id="debug" />

<header>
	<div>
		<h1>Stacking Cards</h1>
		<p>👇 Scroll down to see the effect.</p>
	</div>
</header>
<main>
	<ul id="cards">
		<li class="card" id="card_1">
			<div class="card__content">
				<div>
					<h2>Card One</h2>
					<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
					<p><a href="#top" class="btn btn--accent">Read more</a></p>
				</div>
				<figure>
					<img src="//repo.bfw.wiki/bfwrepo/image/62ce70479f00a.png" alt="Image description">
				</figure>
			</div>
		</li>
		<li class="card" id="card_2">
			<div class="card__content">
				<div>
					<h2>Card Two</h2>
					<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
					<p><a href="#top" class="btn btn--accent">Read more</a></p>
				</div>
				<figure>
					<img src="//repo.bfw.wiki/bfwrepo/icon/60ff85d9f3537.jpg" alt="Image description">
				</figure>
			</div>
		</li>
		<li class="card" id="card_3">
			<div class="card__content">
				<div>
					<h2>Card Three</h2>
					<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
					<p><a href="#top" class="btn btn--accent">Read more</a></p>
				</div>
				<figure>
					<img src="//repo.bfw.wiki/bfwrepo/image/62ce70479f00a.png" alt="Image description">
				</figure>
			</div>
		</li>
		<li class="card" id="card_4">
			<div class="card__content">
				<div>
					<h2>Card Four</h2>
					<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
					<p><a href="#top" class="btn btn--accent">Read more</a></p>
				</div>
				<figure>
					<img src="//repo.bfw.wiki/bfwrepo/image/6275e9cfb88a9.png" alt="Image description">
				</figure>
			</div>
		</li>
	</ul>
</main>
<aside>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem repellat non ratione eum provident quaerat obcaecati dicta autem voluptates sit cum quis distinctio, atque sint commodi reprehenderit perspiciatis iure velit molestiae eos molestias ipsa nihil quia? Porro tempore in fugit, aspernatur et temporibus aliquam magnam adipisci deleniti dicta repellat alias nostrum impedit quidem odit excepturi nam. Itaque numquam unde quae dignissimos exercitationem placeat, ipsa amet tempora vitae ullam animi! Hic asperiores in esse atque expedita dolorem officia illo commodi fugit earum ab, assumenda optio, sed repellat. Maiores laudantium reprehenderit suscipit accusamus assumenda, debitis nemo ut sapiente numquam doloremque alias explicabo minus autem harum illum dicta. Unde obcaecati inventore repellat id eligendi eaque, rerum aliquam maiores aspernatur cumque tenetur quo qui mollitia atque quasi voluptate ipsum neque exp.........完整代码请登录后点击上方下载按钮下载查看