时间戳

首页 > 解决方案 > 如何做一个全屏背景滚动组件

html - 如何做一个全屏背景滚动组件

问题描述

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

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

标签： htmlcssreactjsanimationcss-transitions

解决方案

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.

推荐阅读