three实现滚动瀑布时间线大事记效果代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：three实现滚动瀑布时间线大事记效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/modernizr.2.8.3.js"></script>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">



    <style>
        /* custom styles */
        body {
          font-family: open-sans, sans-serif;
          overflow-x: hidden;
          color: white;
          background: black;
        }
        
        h2, h3 {
          position: relative;
          text-transform: uppercase;
          font-family: open-sans-condensed, sans-serif;
          font-size: 3rem;
          font-weight: 100;
          letter-spacing: .1em;
          margin: 0 0 .5rem 0;
          text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
        }
        
        h3 {
          font-size: 1.5rem;
        }
        
        a {
          text-decoration: none;
          font-size: 1.5rem;
          font-weight: 500;
        }
        a:hover {
          color: white;
        }
        
        ol {
          font-size: 3rem;
          text-transform: uppercase;
          list-style-type: decimal;
        }
        
        li {
          line-height: 1.5;
        }
        
        .slide {
          position: relative;
          display: flex;
          display: -webkit-flex;
          -webkit-flex-direction: column;
          -webkit-align-items: center;
          -webkit-justify-content: center;
          -moz-flex-direction: column;
          -moz-align-items: center;
          -moz-justify-content: center;
          width: 100vw;
          height: 100vh;
        }
        
        figure {
          position: relative;
          padding: 50px 80px;
          width: 400px;
          opacity: 0;
          -moz-transition: -webkit-clip-path 1s, opacity 0.2s;
          -o-transition: -webkit-clip-path 1s, opacity 0.2s;
          -webkit-transition: -webkit-clip-path 1s, opacity 0.2s;
          transition: -webkit-clip-path 1s, opacity 0.2s;
        }
        figure canvas {
          position: absolute;
          top: 0;
          -moz-transform: scale(0);
          -ms-transform: scale(0);
          -webkit-transform: scale(0);
          transform: scale(0);
          -moz-transition: -webkit-transform 0.5s;
          -o-transition: -webkit-transform 0.5s;
          -webkit-transition: -webkit-transform 0.5s;
          transition: -webkit-transform 0.5s;
        }
        figure.in {
          opacity: 1;
        }
        figure.in canvas {
          -moz-transform: scale(1);
          -ms-transform: scale(1);
          -webkit-transform: scale(1);
          transform: scale(1);
        }
        figure.in figcaption {
          opacity: 1;
        }
        figure.right {
          float: right;
        }
        figure.right canvas {
          left: 0;
        }
        figure.right figcaption {
          border-left: 2px solid white;
          text-align: left;
        }
        figure.left {
          float: left;
        }
        figure.left canvas {
          right: 0;
        }
        figure.left figcaption {
          border-right: 2px solid white;
          text-align: right;
        }
        
        figcaption {
          position: relative;
          padding: 0 10px;
          z-index: 1;
          text-transform: uppercase;
          font-family: open-sans-condensed, sans-serif;
          font-size: 1.3rem;
          opacity: 0;
          -moz-transition: -webkit-clip-path 1s, opacity 1s;
          -o-transition: -webkit-clip-path 1s, opacity 1s;
          -webkit-transition: -webkit-clip-path 1s, opacity 1s;
          transition: -webkit-clip-path 1s, opacity 1s;
        }
        figcaption p {
          line-height: 1.5;
        }
        
        .section {
          width: 100vw;
          height: 100vh;
        }
        
        .slide {
          -webkit-box-sizing: border-box;
          padding: 1rem;
        }
        
        #title {
          margin: auto;
        }
        
        #scroll-btn {
          position: fixed;
          bottom: 0;
          left: 50%;
          margin-left: -54px;
          opacity: 1;
          -moz-transition: opacity 0.2s;
          -o-transition: opacity 0.2s;
          -webkit-transition: opacity 0.2s;
          transition: opacity 0.2s;
          -moz-transform: translateZ(0);
          -ms-transform: translateZ(0);
          -webkit-transform: translateZ(0);
          transform: translateZ(0);
        }
        #scroll-btn.out {
          opacity: 0;
        }
        
        #ground {
          top: 0;
          left: 0;
          position: fixed;
          width: 100%;
          height: 100%;
        }
        
        #deck {
          z-index: 2;
        }
    </style>


</head>

<body>
    <script id="skyVS">
        varying vec2 vUv;
        varying float time;
        uniform float delta;
        
        void main()
        {
            vUv = uv;
                gl_Position = projectionMatrix * modelViewMatrix *  vec4(position,1.0);
        }
    </script>

    <script id="skyFS">
        #ifdef GL_ES
    precision highp float;
    #endif
    
    uniform vec2 resolution;
    uniform float time;
    uniform float delta;
    
    varying vec2 vUv;        
    
    void main(void)
    {
        vec2 position = vUv;
    
        float red = 0.1;
        float green = 0.0;
        float blue = 0.1;
        
        
        if (vUv.y < 0.85) {
                float offset = 0.1 + (0.85 - vUv.y) * (1.0 + sin(delta * 0.1) * 1.0);
        
                blue = offset;
                red = offset;
                
                //blue *= (1.1 + cos(vUv.x + delta * 0.3) * 0.05);
                blue *= 1.0 + cos(vUv.x + delta * 0.3) * 0.05;
                
        }
        
        if (vUv.y < 0.8) {
                blue += 0.0 + cos(vUv.x + delta * 0.2) * 0.01;
        
        }
    
        vec3 rgb = vec3(red, green, blue);
        vec4 color = vec4(rgb, 1.0);
        
        gl_FragColor = color;   
    }
    </script>

    <canvas id="ground"></canvas>
    <div id="whitepanel"></div>

    <div id="deck">
        <section id="cover" class="cover slide slide--green" data-x="0" data-y="0" data-z="0">
            <h2>the great fall</h2>
            <h3>scroll down</h3>
        </section>

        <section class="section">
            <figure class="right">
                <figcaption>
                    <h2>Conflict</h2>
                    <p>Conflict arises from attempts to control the flow of mana by use of technology or magic between different civilizations.</p>
                </figcaption>
            </figure>
        </section>

        <section class="section">
            <figure class="left">
                <figcaption>
                    <h2>knights</h2>
                    <p>An order of knights work to maintain balance of mana in the world to avert disaster, and protect the Mana Tree.</p>
                </figcaption>
            </figure>
        </section>

        <section class="section">
            <figure class="right">
                <figcaption>
                    <h2>cataclysm</h2>
                    <p>Hints that a cataclysm may be on the horizon, or has already happened in the past also play a large part in both games.</p>
                </figcaption>
            </figure>
        </section>

        <section class="section">
            <figure class="left">
                <figcaption>
                    <h2>Disobeying</h2>
                    <p>Disobeying their Elder's instructions, three boys from the small Potos village trespass into a local waterfall where a treasure is said to be kept.</p>
                </figcaption>
            </figure>
        </section>

        <section class="section">
            <figure class="right">
                <figcaption>
                    <h2>Randi</h2>
                    <p>One of the boys, the game's protagonist (named Randi in the original Japanese version), stumbles and falls into the lake, where he finds a rusty sword embedded in a stone.</p>
                </figcaption>
            </figure>
        </section>

        <section class="section">
            <figure class="left">
                <figcaption>
                    <h2>Sword</h2>
                    <p>Guided by a disembodied voice, he pulls the sword free, inadvertently unleashing monsters in the surrounding countryside of the village. </p>
                </figcaption>
            </figure>
        </section>

        <section class="section">
            <figure class="right">
                <figcaption>
                    <h2>Omen</h2>
                    <p>The villagers interpret the sword's removal as a bad omen and banish the boy from Potos forever. </p>
                </figcaption>
            </figure>
        </section>

        <section class="section">
            <figure class="left">
                <figcaption>
                    <h2>Jema</h2>
                    <p>An elderly knight named Jema recognizes the blade as the legendary Mana Sword, and encourages the hero to re-energize it by visiting the eight Mana Temples.</p>
                </figcaption>
            </figure>
        </section>

        <section class="section">
            <figure class="right">
                <figcaption>
                    <h2>journey</h2>
              .........完整代码请登录后点击上方下载按钮下载查看