움직이는 차선 (css, javascript)

아래홈페이지의 첫 페이지에 나오는것을 참조하며 만들어보았다. 

www.amoeba.co.kr/drive/self

amoeba

내부에 있는 li tag안에 다른 태그를 넣어서 움직이게 한것을 따라했는데, 나머지 다른 인터렉티브하게 보이는 부분들도 많이 연습하며 시간을 보내봐야겠다. 

 

사용된 전체 코드는 아래에 첨부

 

 

 

 

        <style>

            body{

                margin:0;

                padding:0;

            }

            .content{

                margin:0;

                padding:0;

                height:5000px;

                background-color:#000;

            }

            .lane-wrap{

                list-style: none;

                padding:0;

                margin:0;

                position:absolute;

                left:50%;

                transform:translateX(-50%);

                

            }

            .lane-wrap li{

                display:block;

            }

            .lane-wrap b{

                background-color:#000;;

                width:10px;

                height:50px;

                display:block;

            }

            .lane-wrap i{

                background-color:blue;

                width:10px;

                height:50px;

                display:block;

            }

            .lane-text-wrap{

                position:absolute;

                list-style:none;

                left:30%;

                top:20%;

                font-size:2em;

            }

            .text-white{

                color:#fff;

            }

            .text-darkblue{

                color:#105afe;

                opacity:0.3;

            }

        </style>

        <div class="content">

            <ul class="lane-wrap">

                <li>

                    <b></b>

                    <i></i>

                </li>

                <li>

                    <b></b>

                    <i></i>

                </li>

                <li>

                    <b></b>

                    <i></i>

                </li>

                <li>

                    <b></b>

                    <i></i>

                </li>

                <li>

                    <b></b>

                    <i></i>

                </li>

                <li>

                    <b></b>

                    <i></i>

                </li>

            </ul>

            <ul class="lane-text-wrap">

                <li class="text-darkblue">When</li>

                <li class="text-white">self-driving cars</li>

                <li class="text-darkblue">become</li>

                <li class="text-white">safer than</li>

                <li class="text-darkblue">human-driven</li>

                <li class="text-darkblue">cars</li>

            </ul>

        </div>

        <script>

            var lanes = document.querySelectorAll("i");

            var dist = -10;

            setInterval(function(){

                lanes.forEach((el)=>{

                    el.style.transform = "translateY("+dist+"%)";

                });

                dist += -10;

                if(dist < -200){

                    dist = 0;

                }

            },30);

        </script>