问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

这个js效果怎麽做到的呢?通常怎麽称呼?

头像
jasonhsieh
    14623145

    在visual studio code的官方首页看到这个效果

    clipboard.png

    看了一下它的页面代码，是用一个div.mask先做了上下模煳的效果，裡面在放<ul>和数个<li>做为每个文字的项目，但是它在ul那有写个 reactroot ，我试着将chrome的javascript功能关起来后那效果确实不能跑了。

    .home .getting-started .mask {
    background: linear-gradient(180deg,#fff,hsla(0,0%,100%,0),hsla(0,0%,100%,0),#fff);
    z-index: 5;
    height: 100%;
    width: 100%;
    position: absolute;
    left: -20px;
}

    也就是说这应该不是纯CSS的效果，而是利用js操作dom得出的效果，但具体怎麽实现我没办法从reac转es5的javascript代码段看出来，想请问大家这效果具体怎麽实现呢? 用纯 javascript或jquery都行，或者是设计思路。

    谢谢各位

    css3动画javascriptjquery
    阅读 2.5k
    4 个回答
    得票最新
    头像
    四月的桜和猫
      3.3k52955

      瞎写的 用了setInterval以及transition
      css：

       <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style-type: none;
        }
        .home{
            box-sizing: border-box;
            padding: 100px;
            width: 650px;
            display: flex;
            margin: auto;
        }
       .home .title{
         height: 300px;
           width: 500px;
        }
        .title h2{
            line-height: 300px;
        }
        .home .ul-list{
            height: 300px;
            width: 500px;
            position: relative;
        }
        .mask{
            background: linear-gradient(180deg,#fff,hsla(0,0%,100%,0),hsla(0,0%,100%,0),#fff);
            z-index: 5;
            height: 100%;
            width: 100%;
            position: absolute;
            left: -20px;
        }
        .list{
            height: 100%;
            overflow: hidden;
            position: relative;
        }
        ul{
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            transition: top 1s;
            box-sizing: content-box;
            padding-right: 20px;

            padding-left: 0;
            list-style: none;
            margin-bottom: 0;
        }
        ul li{
            font-size: 30px;
            height: 40px;
        }
    </style>

      html：

      <body>
<div class="home">
    <div class="title">
   <h2>VS Code for</h2>
    </div>
    <div class="ul-list">
        <div class="mask">

        </div>
        <div class="list">
            <ul id="list">
                <li>111</li>
                <li>222</li>
                <li>333</li>
                <li>444</li>
                <li>555</li>
                <li>666</li>
                <li>777</li>
                <li>888</li>
                <li>999</li>
                <li>10000</li>
                <li>111</li>
                <li>222</li>
                <li>333</li>
                <li>444</li>
                <li>555</li>
                <li>666</li>
                <li>777</li>
                <li>888</li>
                <li>999</li>
                <li>10000</li>
            </ul>
        </div>
    </div>

</div>
</body>

      js：

      <script>
    var timing=null;
      timing=setInterval(function () {
          addTop();
         console.log(parseInt($("#list").css('top')))
          if (parseInt($("#list").css('top'))<=-510){
//              clearInterval(timing)
              $("#list").css("top",0+'px')
          }
      },1500)
    addTop=function () {
        var num =parseInt($("#list").css('top'))
        $("#list").css("top",(num-30)+'px')
    }

</script>

      clipboard.png

      头像
      michael_cai
        10.6k2840

        其实就是底部一个滚动列表，上面盖一层带渐变的遮罩而已。

        头像
        深红
          2k22029

          ul外面还包了个div。那个div限制了高度，并且设置了overflow:hidden。利用js动态改变ul的margin-top或者top,改成负值就可以向上移动了。

          头像
          Xeira
            4.1k2717

            这个叫跑马灯，不过一般是横着的，这个是竖着的
            用js每隔一定时间，把列表上移，可以把滚出可视区的条目重新添加到列表底部，或者把列表重复足够的次数保证滚动到一次循环的最后条目时，没有空白出现在可视区
            有很多现成的包，比如http://kenwheeler.github.io/s...，参看的Autoplay的例子，无非是图片换成文字，水平换成垂直罢了

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题
            宣传栏