Conia World 제작

1. 01

   인트로 재생 후 비디오 슬라이드 시작

   Problem5개 장면이 한 파일로 묶인 영상을, 인트로가 끝난 뒤 장면 타이밍에 맞춰 4초씩 자동으로 넘어가게 해야 했습니다. 재생바 애니메이션도 같은 타이밍에 맞춰야 했습니다.

   SolutionSwiper의 fade 효과를 쓰고, 슬라이드 전환이 끝날 때마다 4초 타이머와 진행바 transition을 직접 다시 걸어 영상과 텍스트, 재생바의 타이밍을 맞췄습니다. 인트로 타이머가 끝난 뒤에 슬라이드를 시작합니다.

   <div class="main_visual">
     <div class="video_wrap">
       <video class="pc" src="./resource/images/video_pc.mp4" muted autoplay loop playsinline></video>
     </div>
     <div class="swiper-container">
       <div class="swiper-wrapper">
         <div class="swiper-slide">
           <div class="txt_wrap container">
             <p data-animate="fade-up">효과적으로 매출을 높이는</p>
             <h1 data-animate="fade-up" data-animate-delay="0.1">데이터 기반의<br />멤버십 커머스, 코니아</h1>
           </div>
         </div>
         <!-- 나머지 4개 슬라이드 -->
       </div>
       <div class="swiper-control">
         <div class="swiper-autoplay-pagination">
           <div class="swiper-pagination"></div>
           <div class="swiper-autoplay-progressbar">
             <span class="swiper-autoplay-progressbar-fill"></span>
           </div>
         </div>
       </div>
     </div>
   </div>

   const mainVisualStart = function () {
     const $swiper = $('.main_visual .swiper-container');
     const $progressFill = $swiper.find('.swiper-autoplay-progressbar-fill');
     const visualSwiper = new Swiper('.main_visual .swiper-container', {
       pagination: { el: '.swiper-pagination', type: 'fraction' },
       loopAdditionalSlides: 1,
       speed: 10,
       loop: true,
       simulateTouch: false,
       effect: 'fade',
       fadeEffect: { crossFade: true },
       on: {
         setNextMedia: function () {
           this.playDuration = 4000;
         },
         slideChangeTransitionStart: function () {
           $progressFill.removeClass('is-play')
             .css('transition-duration', this.params.speed + 'ms');
           this.emit('setNextMedia');
         },
         slideChangeTransitionEnd: function () {
           var swiper = this;
           $(swiper.slides).removeClass('enable-animate')
             .eq(swiper.activeIndex).addClass('enable-animate');
           $progressFill.addClass('is-play').css('transition-duration', '4000ms');
           clearTimeout(swiper.playTimeout);
           swiper.playTimeout = setTimeout(function () {
             swiper.slideNext();
           }, 4000);
         },
       },
     });
   };
   
   // 인트로가 끝난 뒤 슬라이드 시작
   const introTimer = function () {
     $('.mask').addClass('on');
     $('.wrap').removeClass('intro-active');
     setTimeout(mainVisualStart, 0);
   };
   setTimeout(introTimer, 100);

2. 02

   반응형 체험 폼 제작

   Problem자사 쇼핑몰 MD 체험 수입 계산 팝업을 만들어야 했습니다. 개발자가 기능을 붙이기 편한 HTML·CSS가 필요했습니다.

   Solution단계(step1~3)와 카테고리를 class 이름으로 구분해, 개발에서 단계별로 요소를 찾고 값을 넣기 쉽게 구조화했습니다.

   <div class="lt form">
     <!-- STEP 01 -->
     <div class="form_wrap step1">
       <p class="sub_tit">라이프스타일에 맞는 카테고리를 선택해주세요</p>
       <div class="radio_item">
         <input type="radio" id="ct_pet" name="ct_item">
         <label for="ct_pet"><span class="radio_box"></span>반려동물</label>
       </div>
       <div class="radio_item">
         <input type="radio" id="ct_food" name="ct_item">
         <label for="ct_food"><span class="radio_box"></span>식품</label>
       </div>
     </div>
     <!--// STEP 01 -->
   
     <!-- STEP 02 -->
     <div class="form_wrap step2">
       <p class="sub_tit">판매하고 싶은 상품을 선택해주세요</p>
       <div class="check_item">
         <input type="checkbox" id="pd01" name="pd_item">
         <label for="pd01">
           <span class="check_box"></span>
           <span class="fl">
             <span class="pd_name">홍삼 50ml * 30포</span>
             <strong class="pd_price">29,000<span> 원</span></strong>
           </span>
           <strong class="return">
             <p>수익률</p>
             <strong class="pd_yeild"></strong>
             <span>%</span>
           </strong>
         </label>
       </div>
     </div>
     <!--// STEP 02 -->
   
     <!-- STEP 03 -->
     <div class="form_wrap step3">
       <div class="item_wrap">
         <p class="sub_tit">판매할 상품을 몇 명에게 추천할 수 있을까요?</p>
       </div>
     </div>
     <!--// STEP 03 -->
   </div>

전체 작업 목록