자바스크립트 - transitionend 이용하여 배경색 슬라이드 만들기

HTML, CSS, 자바스크립트를 이용하여

배경색을 1초마다 다른 색으로 변경시켜 보도록 하겠습니다.

 

변경도 자연스럽게 슬라이드 되도록 한번 해보도록 하겠습니다.

아래 run pen을 누르시면 동작합니다.

See the Pen slide by powerku (@powerku) on CodePen.

 

 

먼저 HTML을 이용하여

div, ul, li 태그를 만들어줍니다.

<div class=box>
  <ul>
    <li class="red"></li>
    <li class="orange"></li>
    <li class="yellow"></li>
    <li class="green"></li>
    <li class="blue"></li>
    <li class="navy"></li>
    <li class="purple"></li>
  </ul>
</div>

li 태그들이 이동하면서 화면이 슬라이드 되는 것처럼 보이게 됩니다.

 

css도 추가합니다.

.box {
  width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden;   
}

ul {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 2100px;
  height: 100px;
  padding: 0;
  margin: 0;
  transition: 1s;
}

li {
  list-style: none;
  width: 300px;
  height: 300px;
  float: left;
}

.red {
  background-color: red;
}
.orange {
  background-color: orange;
}

.yellow {
  background-color: yellow;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}
.navy {
  background-color: navy;
}
.purple {
  background-color: purple;
}

 

자바스크립트도 추가합니다.

 

반응형

const ul = document.querySelector('ul');
let li;
let left = 0;
setInterval(() => {
  li = document.querySelectorAll('li');
  left = -300;
  ul.style.left = `${left}px`;
  ul.style.transition = '1s';
}, 1000)

ul.addEventListener("transitionend", function() {
  console.log('transitionend');
  ul.style.left = `0px`
  ul.style.transition = '0s';
  ul.appendChild(li[0]);
})

1초 간격으로 li를 이동시킵니다.

이동시킨 이후에는 li를 요소를 맨뒤로 보냅니다.

 

이렇게 하면 1초에 한 번씩 배경색을 슬라이드 할 수 있습니다.