Question

我正在尝试弄清楚如何设置具有多个背景的全屏着陆页。我希望用户能够滚动一次并让下一个背景占据整个屏幕。我还想跟踪用户在登陆页面的哪个部分，就像右边的位置跟踪器一样。

我正在尝试在此页面https://purpose.nike.com/上模拟设计一个人怎么做到的？

Answer 1

If you want to achieve the wallpaper thing as nike as done you would have to add some transitions to make it look good. To achieve it add the background to each div you want and add following css.

   .bg{
    height: 100vh;
    width: 100vw; }
    .bg_url1 { background: url1 }
    .bg_url2 { background: url2 }

    <div class="bg bg_url1"/>
    <div class="bg bg_url2"/>


add this to each wallpaper then you can combine it with javascript/jquery to add transitions to make it look good.

Answer 2

我在jquery scrollify上找到了解决方案。请参阅我的示例代码，在其中可以使全屏div滚动并进行控制台打印（完成滚动时div的位置或索引）。

$(function() {
  $.scrollify({
    section : ".full_sc_div",
    after: function(index){
      console.log(index);
    }
  });

});

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Scrollify</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.js"></script>

</head>
<body>
    <div class="full_sc_div" style="background-color: red;">div 1</div>
    <div class="full_sc_div" style="background-color: green;">div 2</div>
    <div class="full_sc_div" style="background-color: blue;">div 3</div>
    <div class="full_sc_div" style="background-color: white;">div 4</div>
    <div class="full_sc_div" style="background-color: black;">div 5</div>

</body>
</html>

Answer 3

您可以尝试整页js：https://projects.lukehaas.me/scrollify/#home

<div id="fullpage">
    <div class="section">Section 1</div>
    <div class="section">
       <div class="slide" data-anchor="slide1">Slide 2.1</div>
       <div class="slide" data-anchor="slide2">Slide 2.2</div>
   </div>
   <div class="section">Section 3</div>
   <div class="section">Section 4</div>
</div>

<script>
    new fullpage('#fullpage', {
      sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    });
</script>

Answer 4

您正在谈论的页面不过是多个背景，以不同的部分彼此相邻放置

 <div>..Walpaper1..</div>
 <div>..Walpaper2..</div>
 <div>..Walpaper3..</div>
 <div>..Walpaper4..</div>

然后为所有潜水提供ID，并将所有内容放入该div的另一位联系人中

如何做全屏背景滚动器组件

4 个答案: