gsap+Observer实现动态翻转翻页分页动画效果代码-html代码-BFW代码库

gsap+Observer实现动态翻转翻页分页动画效果代码

代码语言：html

所属分类：其他

代码描述：gsap+Observer实现动态翻转翻页分页动画效果代码

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

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

<head>
  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
body {
	font-family: sans-serif;
	width:100%;
	height:100vh;
	margin:0;
	padding:0;
}

.vegetables {
	display: flex;
	justify-content:center;
	align-items:center;
	width:100%;
	height:100%;
}

.page {
	list-style: none;
	padding: 1.5em;
	background:#fff;
	min-height:40vh; 
	min-width:40vw;
	display: flex;
	flex-direction:column;
	align-items:center;
	justify-content: space-around;
	border-radius:5px;
}

.page li {
	font-size: 1.5em;	
}

.page-num {
	position:absolute;
	bottom:2em;
	font-size:1.1em;
	color:#fff
}

.nav {
	cursor:pointer;
	position:absolute;
	right:0;
	top:50%;
	transform:translateY(-50%);
/* 	mix-blend-mode:overlay; */
}

.navBtn:focus {
	outline: none;
}
</style>


  
</head>

<body>
  <div class="vegetables">
	<ul class="page">
		<li>Carrot</li>
		<li style="color:#ff6347">Tomato</li>
		<li>Broccoli</li>
		<li>Cucumber</li>
		<li>Spinach</li>
	</ul>
	<!-- Page 1 -->

	<ul class="page">
		<li>Potato</li>
		<li>Pepper</li>
		<li style="color:#8944bb">Eggplant</li>
		<li>Lettuce</li>
		<li>Onion</li>
	</ul>
	<!-- Page 2 -->

	<ul class="page">
		<li style="color:#80bc22">Zucchini</li>
		<li>Cauliflower</li>
		<li>Kale</li>
		<li>Cabbage</li>
		<li>Mushroom</li>
	</ul>
	<!-- Page 3 -->

	<ul class="page">
		<li>Asparagus</li>
		<li>Artichoke</li>
		<li style="color:#a42e41">Radish</li>
		<li>Beet</li>
		<li>Okra</li>
	</ul>
	<!-- Page 4 -->

	<ul class="page">
		<li>Brussels Sprouts</li>
		<li>Green Bean</li>
		<li style="color:#fc7604">Butternut Squash</li>
		<li>Turnip</li>
		<li>Chard</li>
	</ul>
	<!-- Page 5 -->
	
	<ul class="page">
		<li style="color:#ed9121">Carrot</li>
		<li>Tomato</li>
		<li>Broccoli</li>
		<li>Cucumber</li>
		<li>Spinach</li>
	</ul>
	<!-- Page 6 -->

	<ul class="page">
		<li style="color:#80461B">Potato</li>
		<li>Pepper</li>
		<li>Eggplant</li>
		<li>Lettuce</li>
		<li>Onion</li>
	</ul>
	<!-- Page 7 -->
	
	<ul class="page">
		<li>Potato</li>
		<li>Pepper</li>
		<li>Eggplant</li>
		<li>Lettuce</li>
		<li>Onion</li>
	</ul>
	<!-- Page 8 (shows the default w/out accent color) -->
	
	<div class="page-num"></div>
</div>
<svg class="nav"></svg>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.9.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Observer.3.11.4.js"></script>
      <script >
document.addEventListener("DOMContentLoaded", () => {
  let currentNavBtn,currentPage = 0;
  const pages = document.querySelectorAll(".page");
  const nav = document.querySelector(".nav");

  gsap.set(nav, { attr: { width: 99, h.........完整代码请登录后点击上方下载按钮下载查看