css+svg实现大气鼠标滚动页面内容横向竖向跟随滚动代码-html代码-BFW代码库

css+svg实现大气鼠标滚动页面内容横向竖向跟随滚动代码

代码语言：html

代码描述：css+svg实现大气鼠标滚动页面内容横向竖向跟随滚动代码，向下滚动页试试。

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

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

<head>
  <meta charset="UTF-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">

  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Indie+Flower&amp;display=swap'>
  
<style>


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

:root { 
   --items: min(30rem, 70vw);
   --color-base: #181213;
   scroll-timeline: --page block;  
   
   @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
   }
}

body {
   font: 300 1rem/1.33 "Helvetica";
   color: var(--color-base);
   display: grid;
   overflow-x: hidden;
}

img {
   inline-size: 100%;
   max-inline-size: 100%;
   block-size: auto;
}

hr[id] {
   border: 0;
   margin: 0;
}


/* animations */

@keyframes clip {  
   to { transform: scale(1.75); } 
}
@keyframes scroll { 
   to { translate: calc((var(--items) * -3) + 20vw) 0; }
}
@keyframes moveup {
    to { transform: translateY(var(--moveup)); }
}
@keyframes reveal {
    85%, 100% { opacity: 1 }
    100% { transform: translateY(0);  }
}


body > svg {
   block-size: 0;
   inline-size: 0;

   clipPath {
      transform-origin: 50vw 50vh;
      /* on retina displays the transform-origin 
       * seems bugged (opened an issue on 
       * https://issues.chromium.org/issues/366293477)
       */
      @media (-webkit-min-device-pixel-ratio: 1.5) { 
         transform-origin: 100vw 100vh;
      }
      transform: scale(0);
      animation: linear clip 1 forwards;
      animation-timeline: --page;
      animation-range: entry 10dvb exit 100dvb;   
   }
}



/* header */

header {
   position: fixed;
   z-index: 1;
   inset: 0 0 auto 0;
   background: #fff;
   
   @supports (animation-timeline: view()) {  
      --moveup: -101%;
      animation: ease-out moveup 1 forwards;
      animation-timeline: --page;
      animation-range: entry 30dvb exit 57dvb;
   }
   
   > div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem 2rem;
      margin: 0 10vw;
      border-bottom: 1px solid;
      padding-block: 2rem;
   }
   
   svg {
      inline-size: 8rem;
   }

   ul {
      display: flex;
      gap: 2.5rem;
      :any-link {
         font-weight: 300;
         font-size: 1.25rem;
         color: inherit;
         text-decoration: none;
      }
   }
}


/* general sections style */
section {
   padding-block: 7dvb;
   
   h2 {
      font-size: clamp(3rem, 6vw, 6rem);
      line-height: 1;
      letter-spacing: -.15rem;
      font-weight: 300;
      text-shadow: 0 0 1px currentColor;
   }
   
   h3 {
      margin-block: 2rem;
      font-size: clamp(1.6rem, 4.5vw, 4.5rem);
      font-weight: 400;
   }

   p {
      font-size: 1.1rem;
      line-height: 1.5;
   }   
}
 

/* general hero style */
   
.hero {
   min-block-size: 100dvb;
   
   
   @supports (animation-timeline: view()) {  
      block-size: 100dvb;
      inline-size: 100vw;
      position: sticky;
      top: 0;
      grid-area: 1 / 1;
      
      --moveup: -100dvb;
      animation: linear moveup 1 forwards;
      animation-timeline: --page;
      animation-range: entry 200dvb entry 300dvb;  
      
      /* give enough room to run scroll-animations
       * so the main element is not hidden
       */
      ~ main {
         margin-block-start: 200dvb;
         min-block-size: 100dvb;
      }
   }

   
   h2.........完整代码请登录后点击上方下载按钮下载查看