in-view.js实现dom元素滚动进入可视区域变色动画效果代码-html代码-BFW代码库

in-view.js实现dom元素滚动进入可视区域变色动画效果代码

代码语言：html

代码描述：in-view.js实现dom元素滚动进入可视区域变色动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600" rel="stylesheet">



    <style>
        html {
          box-sizing: border-box;
        }
        
        *, *:before, *:after {
          box-sizing: inherit;
        }
        
        .bg--turquoise {
          background: #1abc9c;
        }
        
        .bg--green-sea {
          background: #16a085;
        }
        
        .bg--emerald {
          background: #2ecc71;
        }
        
        .bg--nephrtis {
          background: #27ae60;
        }
        
        .bg--peter-river {
          background: #3498db;
        }
        
        .bg--belize-hole {
          background: #2980b9;
        }
        
        .bg--midnight-blu {
          background: #2c3e50;
        }
        
        .bg--midnight-blu {
          background: #2c3e50;
        }
        
        .bg--amethyst {
          background: #9b59b6;
        }
        
        .bg--wisteria {
          background: #8e44ad;
        }
        
        .bg--sun-flower {
          background: #f1c40f;
        }
        
        .bg--orange {
          background: #f39c12;
        }
        
        .bg--pumpkin {
          background: #d35400;
        }
        
        .bg--carrot {
          background: #e67e22;
        }
        
        .bg--pumpkin {
          background: #d35400;
        }
        
        .bg--alizarin {
          background: #e74c3c;
        }
        
        .bg--pomegranate {
          background: #c0392b;
        }
        
        .bg--clouds {
          background: #ecf0f1;
        }
        
        .bg--silver {
          background: #bdc3c7;
        }
        
        .bg--concrete {
          background: #95a5a6;
        }
        
        .bg--asbestos {
          background: #7f8c8d;
        }
        
        .bg--dark {
          background: #222222;
        }
        
        .bg--dark_light {
          background: #393433;
        }
        
        body {
          font-size: 100%;
          font-family: "Source Sans Pro", sans-serif;
          color: #ecf0f1;
          background: #222222;
        }
        
        .wrapper {
          transition: background 0.2s ease;
        }
        
        .section {
          height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        
        .short {
          height: 33.3333333333vh;
        }
        
        .title {
          white-space: nowrap;
          font-weight: 100;
          font-size: 4vw;
          font-color: #ecf0f1;
        }
        .title a {
          color: inherit;
        }
    </style>


</head>

<body>
    <div class="wrapper">
        <div class="section" data-background-color="transparent">
            <h1 class="title">Changing background-color while scrolling version 2</h1>
        </div>
        <div class="section" data-background-color="#3498db">
            <h1 class="title">Is a remake of a plugin I made a .........完整代码请登录后点击上方下载按钮下载查看