three+gsap实现滚动背景图像三维碎片化动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：three+gsap实现滚动背景图像三维碎片化动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  


  
<style>

canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100vh;
}
:root {
  scroll-behavior: smooth;
}
body {
  background: black;
  display: flex;
  flex-flow: column;
  background: #222;
}
h1 {
  font: 10vmin 'Zen Loop', cursive;
  color: white;
  text-shadow: 0 0 2px black;
  padding: 5vmin;
  box-sizing: border-box;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
  background: black;
}
article {
  box-sizing: border-box;
  padding: 5vmin;
  width: 50vw;
  overflow: hidden;
  background: #111;
  color: #ddd;
  border-radius: 5px;
  border-block: 2px solid #eee;
  border-inline: 2px solid #aaa;
  box-shadow: 0 0 0 5px #000;
  font-family: 'Yomogi', cursive;
  place-self: center;
  margin-block: 10vh;
}
article:last-of-type {
  border-radius: 5px 5px 0 0;
  border-block-end-width: 0;
  margin-block: 80vh;
  -webkit-margin-after: 0;
          margin-block-end: 0;
}
article h2 {
  font-weight: bold;
  margin: 1ch 0;
}
a {
  color: inherit;
}
</style>

</head>

<body >
  <a name="top" id="top"></a>

<article>
  <h2>{ <a href="#about">滚动试试</a> }</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam metus ligula, vestibulum rhoncus elementum ut, consectetur vel justo. Nulla varius sapien odio, quis luctus magna ultricies ut. Vivamus commodo massa vitae turpis laoreet, id pretium massa ultrices. Vivamus accumsan consectetur tortor at condimentum. Etiam hendrerit eget lacus sit amet pulvinar. Praesent ac ipsum molestie, posuere purus at, hendrerit quam. In id tellus ante. Praesent semper malesuada cursus. Suspendisse potenti. Fusce viverra nulla sit amet mauris vulputate venenatis. Sed et eros eget sapien bibendum tristique. Nam eleifend ultrices tincidunt. Nam viverra dui ac turpis faucibus vestibulum.</p>
</article>
<article>
  <h2>{ add as many < article > as you like }</h2>
  <p>Cras volutpat, tellus pretium commodo dignissim, elit ante pharetra risus, et tempus ligula felis ac libero. Nulla eget pulvinar arcu. Quisque nec risus ultricies dolor mattis egestas ac et nibh. Suspendisse vestibulum ligula non est porttitor consequat. Nulla at magna sed sem tincidunt efficitur a non felis. Praesent vehicula neque sed tellus consectetur, non cursus quam lobortis. Pellentesque id eleifend dui. Ut viverra, ante iaculis eleifend blandit, felis mauris fermentum nunc, in volutpat est diam vitae ipsum. Phasellus pellentesque justo quam, vitae tempor quam imperdiet eget. Donec bibendum a risus id elementum. Vestibulum aliquet porttitor eros, ac facilisis metus fermentum ac. Praesent scelerisque tincidunt hendrerit. Proin dignissim lobortis purus, sit amet vulputate ex rhoncus ac.</p>
</article>
<article>
  <h2>{ add as many < article > as you like }</h2>
  <p>Cras volutpat, tellus pretium commodo dignissim, elit ante pharetra risus, et tempus ligula felis ac libero. Nulla eget pulvinar arcu. Quisque nec risus ultricies dolor mattis egestas ac et nibh. Suspendisse vestibulum ligula non est porttitor consequat. Nulla at magna sed sem tincidunt efficitur a non felis. Praesent vehicula neque sed tellus consectetur, non cursus quam lobortis. Pellentesque id eleifend dui. Ut viverra, ante iaculis eleifend blandit, felis mauris fermentum nunc, in volutpat est diam vitae ipsum. Phasellus pellentesque justo quam, vitae tempor quam imperdiet eget. Donec bibendum a risus id elementum. Vestibu.........完整代码请登录后点击上方下载按钮下载查看