기본 콘텐츠로 건너뛰기

스타일시트(css)를 사용한 fadein, fadeout 효과, javascript 제어 - css + javascript

이미지
작성자:

css를 이용한 fadein, fadeout효과, javascript로 제어하기

여러개의 배경이미지가 겹쳐져 있을 때, 하나의 배경이미지가 살짝 크고 투명한 상태에서 원래 크기와 불투명한 상태로 나타나고(fadein), 일정 시간이 지나 다른 이미지가 같은 방식으로 나타날 때 보여지고 있던 이미지는 역순으로 사라지는 효과(fadeout)

html

<!-- 배경을 감싸는 영역 -->
<div class="bg_area">
  <!-- vuejs를 이용하여 배경이미지를 반복 생성 -->
  <div class="bg"
     :style="'background-image:url('+ list +')'"
     :class="{on: idx === efc.bgNo}"
     v-for="(list, idx) in efc.bgUrls"
     :key="idx"></div>
</div>

css

.bgwrap{
  position:relative;
  width:100%;
  height:100%;
}

/* (안보여지는)기본 배경이미지 */
.bgwrap .bg{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  transform:scale(1.05) rotate(0.01deg); /* 원본보다 살짝 크고 회전된 상태로 */
  opacity:0; /* 투명도 0으로 안보이게 */
  transition:opacity 0.8s ease, transform 4s ease; /* 투명도랑 크기, 회전에 애니메이션 효과 */
}

/* 보여지는 배경이미지 */
.bgwrap .bg.on{
  z-index:9;
  opacity:1; /* 투명도 1이 되어 보여지게 */
  transform:scale(1) rotate(0deg); /* 원본 상태(크기, 회전각)로 */
}

js (vuejs 사용)

const efc = reactive({
  // 0 = 항상 첫번재 사진부터 보여지게.
  // v-for는 index가 0부터 시작.
  // 0번째(첫) 이미지부터 fadein으로 들어오게 하기 위해서 초기값 -1.
  bgNo: -1,
  
  bgTimer: null,
  bgUrls: ["image/bg01.webp", "image/bg02.webp", "image/bg03.webp"],
})

......

// 배경 이미지 fadein, fadeout용, 4초마다 bgNo 변경(여기선 0, 1, 2, 0, 1, 2, 0,...)
noChange = () => {
  efc.bgTimer = setTimeout(() => {
    if(efc.bgNo < efc.bgUrls.length - 1) {
      efc.bgNo += 1;
    } else {
      efc.bgNo = 0;
    }
    noChange();
  }, 4000);
}
// 멈출 때 필요하면 - clearTimeout(efc.bgTimer);

......

onMounted(() => {
  setTimeout(() => {
    // efc.bgNo는 -1, efc.bgUrls의 index는 0부터 시작
    // setTimeout을 0.01초 준 이유는 안그러면 dom이 생성될 때 처음부터 bg에 on클래스가 붙은 상태라 효과 없음
    efc.bgNo = 0;
  }, 10);
  noChange();
})

이처럼 css에서 fadein, fadeout의 효과를 주는 class를 하나 만든뒤에, javascript를 이용해서 해당 class를 붙였다(fadein) 떼었다(fadeout) 하면 된다.


끝.



분류 :