如何做一个全屏背景滚动组件答案

【问题标题】：How to do a full screen background scroller component如何做一个全屏背景滚动组件
【发布时间】：2019-09-08 10:01:59
【问题描述】：

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

我正在尝试模仿此页面上的设计https://purpose.nike.com/ 如何做到这一点？

【问题讨论】：

标签： html css reactjs animation css-transitions

【解决方案1】：

你所说的页面只不过是多个背景在不同的部门下放置

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

然后为所有的潜水提供 ID 并将所有内容放入不同的 div 的关联做那个 div

【讨论】：

【解决方案2】：

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.

【讨论】：

【解决方案3】：

我在 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>

【讨论】：

【解决方案4】：

你可以试试整页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>

【讨论】：