📄 우아한형제들

최준현·2022년 7월 26일

제작기간	22.06.12 ~ 22.06.14 (3일 소요)
사용 언어	html, css, jquery
사용 플러그인	gsap, swiper
분류	pc, mobile, 클론코딩

✔ 메인 슬라이드

💬 작업하기 전 우아한형제들 페이지 메인 슬라이드를 살펴본 결과, 슬라이드 17개가 새로고침 할 때 마다 슬라이드 5개를 선택하여 보여주고 있었습니다.

🖊 17개 슬라이드 중 랜덤으로 5개를 뽑아 슬라이드 만들기

📌 17개 슬라이드를 html에 작성

<section class="swiper sc-mainSlide">
            <h2 class="blind">메인 슬라이드</h2>
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="" class="link-slide slide-intro01">
                        <div class="img-box left"><img src="./assets/images/slide_intro01.jpg" alt="누군가 지켜보고 있다?"></div>
                        <div class="txt-box">
                            <span class="default-txt">우아한형제들이 알고 싶다</span>
                            <h3 class="desc">누군가<span class="fiction">지켜보고 있다?</span></h3>
                            <span class="cate">회사 소개 ></span>
                        </div>
                    </a>
                </div>
              .
              .
              .
              .
              .
              <div class="swiper-slide">
                    <a href="" class="link-slide slide-more01">
                        <div class="img-box small"><img src="./assets/images/slide_more01.jpg" alt="이게 무슨 일이야! 컨퍼런스"></div>
                        <div class="txt-box black">
                            <span class="default-txt">우아한형제들이 알고 싶다</span>
                            <h3 class="desc">이게 무슨 일이야!<br><span class="fiction">컨퍼런스</span></h3>
                            <span class="cate">자세히 보기 ></span>
                        </div>
                    </a>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </section>

📌 배열 생성
var numArray = [];
var slideArray = [];
💬 5개의 난수를 넣어 줄 배열 numArray와 5개의 슬라이드를 넣어 줄 슬라이드 배열 slideArray를 생성해주었습니다.

📌 슬라이드 배열에 랜덤으로 슬라이드 넣기
('.sc-mainSlide .swiper-slide').each(function(){
      var randomSlide = Math.floor(Math.random() * 17) + 1;
      if(!numArray.includes(randomSlide)) {
          numArray.push(randomSlide);
          slideArray.push($('.sc-mainSlide .swiper-slide:nth-child('+randomSlide+')').html());
      }
💬 반복문을 이용하여 슬라이드 17개에 맞춰 1~17까지 난수 값을 생성하여 randomSlide 변수에 넣어주었습니다.

💬 중복체크를 해주기 위해 numArray 변수 안에 방금 생성한 randomSlide 값이 포함되는지 조건문을 걸어주고 없다면, numArray 배열에 randomSlide 값을 push를 이용하여 넣어주었습니다.

💬 마찬가지로 html상 randomSlide 값 번째 슬라이드를 찾아 그 html을 통째로 SlideArray 배열에 넣어줍니다.

📌 5개의 슬라이드를 넣었다면?
$('.sc-mainSlide .swiper-slide').each(function(){
      if(numArray.length == 5) {
          $('.sc-mainSlide .swiper-wrapper').empty();
          $(numArray).each(function(i){
              $('.sc-mainSlide .swiper-wrapper').append('<div class="swiper-slide"></div>')
              $('.sc-mainSlide .swiper-slide:last-child').append(slideArray[i]);
          })
      }
  })
💬 만약 numArray에 들어있는 난수가 5개가 된다면, html에 들어있는 17개의 슬라이드를 empty()을 이용하여 전부 비워주고, numArray의 길이만큼 반복문을 돌려 새로운 슬라이드 영역을 생성하고 저장해둔 SlideArray의 슬라이드들을 append를 이용하여 하나씩 채워 넣었습니다.

🔘 최종코드

var numArray = [];
var slideArray = [];
$('.sc-mainSlide .swiper-slide').each(function(){
    var randomSlide = Math.floor(Math.random() * 17) + 1;
    if(!numArray.includes(randomSlide)) {
        numArray.push(randomSlide);
        slideArray.push($('.sc-mainSlide .swiper-slide:nth-child('+randomSlide+')').html());
    }
    if(numArray.length == 5) {
        $('.sc-mainSlide .swiper-wrapper').empty();
        $(numArray).each(function(i){
            $('.sc-mainSlide .swiper-wrapper').append('<div class="swiper-slide"></div>')
            $('.sc-mainSlide .swiper-slide:last-child').append(slideArray[i]);
        })
    }
})

🖊 텍스트를 하나씩 잘라 순차적으로 나타내기

💬 우아한형제들 메인 슬라이드 제목 중 둘째줄부터 한 글자씩 순차적으로 나타나는 모습을 볼 수 있습니다.

📌 한 글자씩 보여질 부분 클래스 주기
<h3 class="desc">누군가<span class="fiction">지켜보고 있다?</span></h3>
.sc-mainSlide .txt-box .desc .fiction {
  display: none;
}
💬 모든 슬라이드마다 한 글자씩 보여질 부분을 class="fiction으로 설정하여 따로 구분하였고, display:none을 하였습니다.

📌 한 글자씩 잘라서 html에 넣기
var text = $('.swiper-slide-active').find('.fiction').text().split("");
$('.swiper-slide-active').find('.desc').append('<span class="fade"></span>')
$(text).each(function(i){
    $('.swiper-slide-active').find('.fade').append('<i class="fade-txt'+i+'">'+text[i]+'</i>');
})
💬 html에서 fiction 클래스를 찾아 텍스트를 split("")을 이용하여 한 글자씩 잘라 text변수에 넣어주었습니다.

💬 그 후, 활성화된 슬라이드 .swiper-slide-active에서 제목 부분 뒤에 fade 클래스를 가진 span 태그를 append을 이용하여 넣어주었습니다.

💬 자른 text의 길이 만큼 반복문을 돌려 fade클래스를 가진 span 태그에 fade-txt클래스를 가진 i태그로 글자 하나하나 추가하였습니다.

📌 setInterval로 opacity 조정하기
var i = 0;
setInterval(function(){
    if(i < text.length) {
        $('.swiper-slide-active').find('.fade-txt'+i+'').animate({opacity: "1"});
            i++;
        } else {
            return false;
        }
    }, 200)
💬 fade-txt의 순서를 잡아주기 위해 i 변수를 생성하여 0으로 초기화 해주고, 0.2s로 작동하는 setInterval을 생성, text의 길이만큼 fade-txt의 i번째 요소를 opacity:1로 변경해 준 후 i++을 해주었고, i가 text의 길이보다 높아지게 되면 setInterval을 종료해주었습니다.

📌 슬라이드가 넘어갈 때마다 작동
 function fadeText() {
      $('.swiper-slide .fade').remove();
      var text = $('.swiper-slide-active').find('.fiction').text().split("");
      $('.swiper-slide-active').find('.desc').append('<span class="fade"></span>')
      $(text).each(function(i){
          $('.swiper-slide-active').find('.fade').append('<i class="fade-txt'+i+'">'+text[i]+'</i>');
      })
      var i = 0;
      setInterval(function(){
              if(i < text.length) {
                  $('.swiper-slide-active').find('.fade-txt'+i+'').animate({opacity: "1"});
                  i++;
              } else {
                  return false;
              }
      }, 200)
  }
💬 최종적으로 완성한 이 코드를 fadeText()라는 변수명으로 함수를 만들어주고, 슬라이드가 변경될 때마다 fade 클래스를 가진 span태그가 생성될테니 함수 시작하자마자 remove로 초기화를 해주는 코드를 추가하였습니다.
on: {
    slideChange: function(){
        setTimeout(function(){
            fadeText();
        })
    }
},                    
💬 메인슬라이드 swiper안에 SlideChange 메서드를 이용해 setTimeout으로 fadeText() 함수를 실행하였습니다.

❗ 문제점 발생

💬 이렇게 한 결과 슬라이드가 넘어갈 때 원하는 대로 잘 작동하지만 빠르게 넘길 때 이미 실행된 fadeText()와 슬라이드가 넘어가서 실행된 fadeText()가 겹쳐서 적용되는 문제점이 발생하였습니다.

📌 수정

💬 이를 수정하기 위해서 슬라이드가 넘어갈 때 이미 실행되고 있는 fadeText()함수를 종료하는 메서드를 넣어야 한다고 생각했습니다.
var isStop = false;
var textAni = setInterval(function(){
          if(!isStop) {
              if(i < text.length) {
                  $('.swiper-slide-active').find('.fade-txt'+i+'').animate({opacity: "1"});
                  i++;
              } else {
                  return false;
              }
          } else {
              clearInterval(textAni);
              isStop = false;
              fadeText();
          }
      }, 200)
--------------------------------------------------------------------------------------------
on: {
	slideChange: function(){
		isStop = true;
	}
},
💬 그래서 isStop이라는 변수를 생성하여 false로 담고, opacity가 조정되는 setInteval을 변수 textAni로 설정해 준 후, isStop이 false인 경우 함수가 실행되게 적용하고 true인 경우 textAni가 종료되게 clearInterval을 사용하고, isStop = false로 변경한 후 fadeText()를 적용하게 하였습니다.

💬 swiper에 slideChange 메서드에는 슬라이드가 변경될 때 isStop = true로 변경하여 그 즉시 fadeText() 함수가 종료되게 만들어서 문제점을 해결할 수 있었습니다!

🔘 최종코드

var isStop = false;
  function fadeText() {
      $('.swiper-slide .fade').remove();
      var text = $('.swiper-slide-active').find('.fiction').text().split("");
      $('.swiper-slide-active').find('.desc').append('<span class="fade"></span>')
      $(text).each(function(i){
          $('.swiper-slide-active').find('.fade').append('<i class="fade-txt'+i+'">'+text[i]+'</i>');
      })
      var i = 0;
      var textAni = setInterval(function(){
          if(!isStop) {
              if(i < text.length) {
                  $('.swiper-slide-active').find('.fade-txt'+i+'').animate({opacity: "1"});
                  i++;
              } else {
                  return false;
              }
          } else {
              clearInterval(textAni);
              isStop = false;
              fadeText();
          }
      }, 200)
  }
----------------------------------------------------------------------------------------------------
var mainSlide = new Swiper(".sc-mainSlide", {
      pagination: {
          el: ".swiper-pagination",
      },
      autoplay: {
          delay: 7000,
      },
      on: {
          slideChange: function(){
              isStop = true;
          }
      },
      loop: true
  });

✔ keyframe과 clone을 이용한 무한 롤링

💬 우아한형제들 페이지 하단 글꼴 부분에서 컨텐츠들이 끊이지 않고 계속해서 옆으로 롤링되는 모습을 볼 수 있었습니다.

📌 slide-font html 작성

<div class="slide-font">
	<ul class="font-area">
		<li class="font-item hanna11"><h3 class="font-title">한나는열한살체</h3></li>
		<li class="font-item jua"><h3 class="font-title">주아체</h3></li>
		<li class="font-item dohyeon"><h3 class="font-title">도현체</h3></li>
		<li class="font-item yeonsung"><h3 class="font-title">연성체</h3></li>
		<li class="font-item kiranghaerang"><h3 class="font-title">기랑해랑체</h3></li>
		<li class="font-item hannaAir"><h3 class="font-title">한나체 Air</h3></li>
		<li class="font-item hannaPro"><h3 class="font-title">한나체 Pro</h3></li>
		<li class="font-item euljiro"><h3 class="font-title">을지로체</h3></li>
		<li class="font-item euljiro10year"><h3 class="font-title">을지로 10년후체</h3></li>
		<li class="font-item euljiroorae"><h3 class="font-title">을지로 오래오래체</h3></li>
	</ul>
</div>

💬 html에는 script로 복제하기 위해서 한 덩어리만 작성하였습니다.

📌 font-area clone()을 이용하여 복제/추가
var fontItemClone = $('.font-area').clone();
  fontItemClone.addClass('dup');
  $('.slide-font').append(fontItemClone);
💬 fontItemClone 변수를 만들어 font 컨텐츠들을 clone()을 이용하여 복제해 넣어주었고 dup 클래스를 추가하여 최종 부모인 slide-font 뒤에 추가하였습니다

📌 keyframe을 이용하여 무한롤링
.sc-font .font-area {
    display: inline-flex;
    animation: fontSlide 40s linear infinite;
}
.sc-font .font-area.dup {
    animation: fontSlideDup 40s linear infinite;
}
----------------------------------------------------------------------
@keyframes fontSlide {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-100%);
    }
    50.01%{
        transform: translateX(100%);
    }
    100%{
        transform: translateX(0);
    }
}
@keyframes fontSlideDup {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-200%);
    }
}
💬 원래 있던 font-area는 fontSlide keyframe으로 애니메이션에 절반동안 X축으로 -100%로 이동하게 하여 화면에 안보여질 때 바로 X축 100%로 이동하여 다시 0으로 설정해 제자리고 돌아오게 만들었습니다.

💬 복제된 .dup은 fontSlideDup keyfram으로 X축 -200%로 설정하여 자연스럽게 무한롤링이 되도록 완성하였습니다!

최준현

이전 포스트

📄 andar

다음 포스트