gsap+ScrollTrigger+web audio api实现dj碟片播放滚动刮擦效果代码-html代码-BFW代码库

gsap+ScrollTrigger+web audio api实现dj碟片播放滚动刮擦效果代码

代码语言：html

所属分类：多媒体

代码描述：gsap+ScrollTrigger+web audio api实现dj碟片播放滚动刮擦效果代码

代码标签： gsap ScrollTrigger web audio api dj 碟片播放滚动刮擦

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

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

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

  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css">

  
  
<style>
@import url("https://fonts.cdnfonts.com/css/lcd");
body {
  pointer-events: none;
  height: 500vh;
  --speed: 1;
  --cursor: grab;
  background: url("//repo.bfw.wiki/bfwrepo/image/665f89df86e88.png") 50% 50%/100vw 100vh no-repeat fixed;
  cursor: var(--cursor);
}
body * {
  font-family: "LCD", sans-serif;
  font-family: "LCD2", sans-serif;
  font-family: "LCDMono2", sans-serif;
  font-family: "LCDMono", sans-serif;
  font-family: "Digitalism", sans-serif;
  text-transform: uppercase;
}
body::-webkit-scrollbar {
  display: none;
}
body.playing #vinyl {
  pointer-events: all;
  animation-play-state: running;
}
body.playing #needle {
  transform: rotate(0deg);
}
body:after {
  font-family: "Futura", sans-serif;
  font-size: 12px;
  content: "Scroll up & down on the record to scratch";
  color: #222;
  position: fixed;
  top: 2.5vmin;
  left: 50%;
  transform: translate(-50%, 0).........完整代码请登录后点击上方下载按钮下载查看