div+css实现水平与垂直相结合的页面滚动效果代码-html代码-BFW代码库

div+css实现水平与垂直相结合的页面滚动效果代码

代码语言：html

代码描述：div+css实现水平与垂直相结合的页面滚动效果代码，先垂直滚动页面3大板块，第二板块的时候，滚动鼠标滚动进水平横向图片列表滚动，然后再滚动到最后一个板块。

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

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

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


    <style>
        @import url("https://fonts.googleapis.com/css2?family=Oxanium:wght@700&family=Great+Vibes&display=swap");
        @property --k {
          syntax: "<number>";
          initial-value: 0;
          inherits: true;
        }
        html {
          overflow-x: hidden;
          scrollbar-color: gold #121212;
        }
        
        body {
          margin: 0;
        }
        
        header, footer {
          display: grid;
          place-content: center;
          min-height: 100vh;
          background: silver;
          font-size: 2em;
          font: 700 4em oxanium, sans-serif;
          text-shadow: 1px 1px 3px;
        }
        
        footer {
          font-family: Great Vibes, cursive;
        }
        
        section {
          height: 500vh;
          background: #212121;
        }
        @supports (animation-timeline: view()) {
          section {
            background: linear-gradient(90deg, rgba(255, 215, 0, calc(1 - round(down, var(--k)))) calc(var(--k)*100%), #0000 0) 0 0/100% 0.5rem no-repeat fixed #212121;
            animation: k 1s both;
            animation-timeline: view();
            animation-range: contain;
          }
        }
        
        @keyframes k {
          to {
            --k: 1 ;
          }
        }
        h2 {
          color: #ededed;
          font: 900 2em/2 sans-serif;
        }
        
        img {
          width: min(30vw, 70vh);
          aspect-ratio: 1;
          object-fit: cover;
          box-shadow: 2px 2px 5px;
        }
        
        .stick {
          box-sizing: border-box;
          display: grid;
          align-content: center;
          position: sticky;
          top: 0;
          padding: 2em;
          height: 100vh;
        }
        
        .wrap {
          display: grid;
          grid-auto-flow: column;
          grid-gap: 2em;
          translate: calc(var(--k)*(50vw - 100%));
        }
        
        /* just support info */
        aside {
          position: fixed;
          bottom: 0;
          padding: 1em;
        }
        
       .........完整代码请登录后点击上方下载按钮下载查看