josh.js实现页面下拉滚动内容动画显示效果代码-html代码-BFW代码库

josh.js实现页面下拉滚动内容动画显示效果代码

代码语言：html

代码描述：josh.js实现页面下拉滚动内容动画显示效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="description" content="Josh.js - A JavaScript library to animate content on page scroll." />
    <meta name="keywords" content="JavaScript, Animation, JavaScript Animation, Scroll Animation, Reveal on Scroll, Vanila JS Scroll Animation" />
    <meta name="author" content="Al Mamun" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/animate.4.1.1.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
          }
          body {
            overflow-x: hidden;
          }
          header {
            text-align: center;
            background: #eb6383;
            color: #ffe9c5;
            height: 550px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
          }
          h1 {
            font-size: 9rem;
            line-height: 1;
          }
          h2 {
            font-size: 3rem;
            line-height: 1;
            padding: 2rem 0;
          }
          .get-button {
            color: #000;
            background: #b4f2e1;
            font-size: 2.5rem;
            text-decoration: none;
            margin-top: 1.5rem;
            padding: 0.6rem 2.5rem;
            border-radius: 3px;
          }
          .get-button:hover {
            opacity: 0.8;
          }
          .element {
            height: 400px;
            font-size: 5rem;
            color: #eb6383;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            width: 70vw;
            border-radius: 5px;
            margin: 50px auto;
          }
          button#load-more {
            height: 3.5rem;
            border: 1px solid #000;
            background: #b4f2e1;
            font-size: 1.5rem;
            color: #000;
            width: 215px;
            margin: 1rem auto;
            display: block;
            cursor: pointer;
            outline: 0;
            border-radius: 3px;
          }
          @media (max-width: 600px) {
            h1 {
              font-size: 6rem;
            }
            h2 {
              font-size: 1.5rem;
            }
            .element {
              font-size: 3rem;
              width: 90%;
            }
            .get-button {
              padding: 0.6rem 1.5rem;
            }
          }
    </style>
</head>

<body>
    <main id="main">
        <header>
            <h1 class="josh-js" data-josh-anim-name="pulse" data-josh-iteration="infinite" data-josh-duration="1500ms">
                Josh.js
            </h1>
            &.........完整代码请登录后点击上方下载按钮下载查看