gsap+ScrollSmoother实现丝滑顺滑滚动页面效果代码-html代码-BFW代码库

gsap+ScrollSmoother实现丝滑顺滑滚动页面效果代码

代码语言：html

代码描述：gsap+ScrollSmoother实现丝滑顺滑滚动页面效果代码，滚动鼠标试试。

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

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

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

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
:root {
	--dark: #1d1d1d;
  --grey-dark: #414141;
	--light: #fff;
	--mid: #ededed;
  --grey: #989898;
  --gray: #989898;
	--green: #28a92b;
  --green-dark: #4e9815;
	--green-light: #6fb936;
	--blue: #2c7ad2;
	--purple: #8d3dae;
	--red: #c82736;
	--orange: #e77614;
  accent-color: var(--green);
}
body {
  background-color: #111;
  font-family: "Signika Negative", sans-serif, Arial;
  overscroll-behavior: none;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

section {
  height: 60vh;
  display:flex;align-items:center;justify-content:center;min-height:100vh;
}


#smooth-content {
  overflow: visible;
  width: 100%;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,255,255,.07) 2px, transparent 2px),
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

button {
  position: relative; 
}

.box {
  width: 100px;
  height: 100px;
  background-color: #28a92b;
  z-index: 100;
  line-height: 100px;
  f.........完整代码请登录后点击上方下载按钮下载查看