Question

第一个问题

我不知道如何描述甚至称呼它，但是当我想对里程表类型进行倒数计时时，我遇到了this website。

您可以看到它的作用，只要滚动一次，它就会在整个页面上向下/向上滚动，并锁定在该页面上，直到您再次滚动为止。

我尝试对其进行研究，但一无所获。关于如何执行此操作的任何想法？预先感谢

第二个问题

我在website中添加了微粒，并遵循了this教程。一切正常，但是它没有显示在我的iPhone上，我不知道为什么会这样，但是大约一年前，当我这样做时，它运行良好。关于如何解决此问题的任何想法？

这是我的website的摘要，该摘要无法正常工作

{
  "particles": {
    "number": {
      "value": 80
    },
    "color": {
      "value": "random"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#ccc"
      }
    },
    "opacity": {
      "value": 1,
      "random": true
    },
    "size": {
      "value": 2
    },
    "line_linked": {
      "enable": true,
      "distance": 110
    },
    "move": {
      "enable": true,
      "speed": 1
    }
  }
}

body {
  margin: 0;
  padding: 0;
  background: #262626;
  font-family: Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;
  font-style: italic;
  text-align: center;
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 22s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: text;
  -webkit-animation-timing-function: ease;
}

h1 {
  font-size: 100px;
}

.main {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%)
}

ul {
  display: flex;
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translate(-50%, 0)
}

ul li {
  list-style: none;
}

ul li a {
  transition: .5s;
  width: 80px;
  height: 80px;
  text-align: center;
  line-height: 80px;
  font-size: 35px;
  display: block;
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 22s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: text;
  -webkit-animation-timing-function: ease;
}

ul li a:hover {
  font-size: 45px;
}

#particles-js {
  background-size: cover;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: -1;
}

#date {
  position: absolute;
  font-size: 25px;
}

@-webkit-keyframes text {
  0% {
    color: #39f;
  }
  15% {
    color: #8bc5d1;
  }
  30% {
    color: #f8cb4a;
  }
  45% {
    color: #95b850;
  }
  60% {
    color: #944893;
  }
  75% {
    color: #c71f00;
  }
  90% {
    color: #bdb280;
  }
  100% {
    color: #39f;
  }
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>

  <link href="styles.css" rel="stylesheet" type="text/css">
  <link rel="import" href="particles.html">
  <link rel="import" href="title.html">
  <link rel="import" href="dateCount.html">

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

</head>

<body>
  <div id="particles-js">
    <div class="main">
      <h1 id="date"></h1>
      <h1>kaszam</h1>
      <ul>
        <li><a href="https://www.instagram.com/kaszamaksym/?hl=en" target="_blank"><i class="fab fa-instagram"></i></a></li>
        <li><a href="https://www.snapchat.com/add/maksymkasza" target="_blank"><i class="fab fa-snapchat-ghost"></i></a></li>
        <li><a href="https://www.facebook.com/maksym.kasza.1" target="_blank"><i class="fab fa-facebook-square"></i></a></li>
        <li><a href="info.html"><i class="fas fa-info-circle"></i></a></li>
      </ul>
    </div>
  </div>
</body>

</html>

Answer 1

好吧，我做过一次，这很费力。

所以<我刚刚使用了一个插件：-）

完整代码在这里

https://codepen.io/damPop/pen/OaLawm

    $(".main").onepage_scroll({
   sectionContainer: "section",     // sectionContainer accepts any kind of selector in case you don't want to use section
   easing: "ease",                  // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in",
                                    // "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
   animationTime: 1000,             // AnimationTime let you define how long each section takes to animate
   pagination: true,                // You can either show or hide the pagination. Toggle true for show, false for hide.
   updateURL: false,                // Toggle this true if you want the URL to be updated automatically when the user scroll to each page.
   beforeMove: function(index) {},  // This option accepts a callback function. The function will be called before the page moves.
   afterMove: function(index) {},   // This option accepts a callback function. The function will be called after the page moves.
   loop: false,                     // You can have the page loop back to the top/bottom when the user navigates at up/down on the first/last page.
   keyboard: true,                  // You can activate the keyboard controls
   responsiveFallback: false,        // You can fallback to normal page scroll by defining the width of the browser in which
                                    // you want the responsive fallback to be triggered. For example, set this to 600 and whenever
                                    // the browser's width is less than 600, the fallback will kick in.
   direction: "vertical"            // You can now define the direction of the One Page Scroll animation. Options available are "vertical" and "horizontal". The default value is "vertical".  
});

滚动时如何锁定页面？如何在所有设备上显示粒子？

1 个答案: