gsap+lenis实现全屏自适应图文鼠标滚动上下切换效果代码-html代码-BFW代码库

gsap+lenis实现全屏自适应图文鼠标滚动上下切换效果代码

代码语言：html

所属分类：幻灯片

代码描述：gsap+lenis实现全屏自适应图文鼠标滚动上下切换效果代码

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

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

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

  
<style>
*,
*::after,
*::before {
	box-sizing: border-box;
}

:root {
	font-size: 16px;
	--page-padding: 1.5rem;
	--color-text: #fff;
	--color-bg: #12100e;
	--color-link: rgba(255,255,255,0.6);
	--color-link-hover: #fff;
	--color-bg-1: #2f251e;
	--color-bg-2: #43392f;
	--color-bg-3: var(--color-bg-1);
	--color-bg-4: var(--color-bg-2);
	--color-bg-5: var(--color-bg-1);
	--color-bg-6: var(--color-bg-2);
}

body {
	margin: 0;
	color: #fff;
	background-color: #12100e;
	font-family: "area-variable", sans-serif;
	font-variation-settings: "slnt" 0, "wdth" 150, "wght" 500, "INKT" 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	width: 100%;
	overflow-x: hidden;
}

/* Page Loader */
.js .loading::before,
.js .loading::after {
	content: '';
	position: fixed;
	z-index: 5000;
}

.js .loading::before {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-bg);
}

.js .loading::after {
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	border-radius: 50%;
	opacity: 0.4;
	background: var(--color-link);
	animation: loaderAnim 0.7s linear infinite alternate forwards;
}

@keyframes loaderAnim {
	to {
		opacity: 1;
		transform: scale3d(0.5,0.5,1);
	}
}

a {
	text-decoration: none;
	color: var(--color-link);
	outline: none;
	cursor: pointer;
}

a:hover {
	color: var(--color-link-hover);
	outline: none;
}

/* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
a:focus {
	/* Provide a fallback style for browsers
	 that don't support :focus-visible */
	outline: none;
	background: lightgrey;
}

a:focus:not(:focus-visible) {
	/* Remove the focus indicator on mouse-focus for browsers
	 that do support :focus-visible */
	background: transparent;
}

a:focus-visible {
	/* Draw a very noticeable focus style for
	 keyboard-focus on browsers that do support
	 :focus-visible */
	outline: 2px solid red;
	background: transparent;
}

.unbutton {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	cursor: pointer;
}

.unbutton:focus {
	outline: none;
}

.frame {
	padding: var(--page-padding);
	position: relative;
	di.........完整代码请登录后点击上方下载按钮下载查看