지식IN 클론코딩

백선영·2023년 3월 27일
0

웹퍼블리싱_공부

목록 보기
12/13
post-thumbnail

💻 지식IN 클론코딩

  • 사이트: 지식IN
  • 사용언어: HTML, CSS, Jquery, gsap
  • 분류: 반응형 PC, 클론코딩

📌 KEY POINT

  • Scss
  • swiper
  • 숫자카운트

1. Scss

이번 클론코딩을 통해 처음으로 css전처리기인 Scss를 사용해 보았다. 이번 코딩에서 많이 사용했던 Scss 기능을 정리해봤다.

중첩

  • 상위 선택자의 반복을 피하고 좀 더 편리하게 복잡한 구조를 작성할 수 있다.
.section {
  width: 100%;
  .list {
    padding: 20px;
    li {
      float: left;
    }
  }
}

상위 선택자 참조

  • 중첩 안에서 & 키워드는 상위(부모) 선택자를 참조하여 바꿀 수 있다.
.marque-box{
    display: flex;
    justify-content: flex-end;
    cursor: default;
    &+.marque-box{
      margin-top: 60px;
    }

@import
외부에서 가져온 Sass 파일은 모두 단일 CSS 출력 파일로 병합됩니다.또한, 가져온 파일에 정의된 모든 변수 또는 Mixins 등을 주 파일에서 사용할 수 있습니다.

@mixin

  • 미디어쿼리
    이렇게 @include로 불러오면 되기 때문에 css에서 미디어쿼리를 사용할 때보다 더 편하게 사용할 수 있다.
$mobile: 768px; //320
$tablet: 1023px; // 768
$desktop: 1280px; //1024
.header{
  @include tablet{
    height: 50px;
    padding: 18px 0;
    box-sizing: border-box;
  }

2. swiper

이번 슬라이드는 기존과 다른 모양이라 스와이퍼에 대해 더 배울 수 있었다.

  .issue-swiper{
    @include tablet{
      max-width: 710px;
    }
    max-width: 2250px;
    padding: 86px 0 96px;
    margin: -50px auto 0;
    perspective: 2000px;
    .swiper-wrapper{
      transform-style: preserve-3d; //매우 중요!
    }

perspective
원근감을 주기 위해 사용하는 css속성이다.

transform-style: preserve-3d;
3D 공간에서 자식 요소들을 렌더링하는 방법을 결정하는 방법으로 기본값은 flat이다.
이와 반대로 3D 렌더링을 결정하는 값이 preserve-3d으로, 이를 사용하면 해당 컨테이너 영역을 삼차원 영역으로 활용 할 수 있다. 그렇기 때문에 이번 슬라이드에서는 transform-style: preserve-3d;를 꼭 넣어줘야한다!

3. 숫자 카운트 애니메이션

기존에 숫자 카운트애니메이션에 gsap에 스크롤 트리거를 추가하여 특정 섹션에 왔을 때 카운트가 될 수 있도록 하였다.

  function numberCounter(target_frame, target_number) {
    this.count = 0; this.diff = 0;
    this.target_count = parseInt(target_number);
    this.target_frame = document.getElementById(target_frame);
    this.timer = null;
    this.counter();
};
numberCounter.prototype.counter = function() {
    var self = this;
    this.diff = this.target_count - this.count;
    if(this.diff > 0) {
        self.count += Math.ceil(this.diff / 5);
    }
    this.target_frame.innerHTML = this.count.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    if(this.count < this.target_count) {
        this.timer = setTimeout(function() { self.counter(); }, 20);
    } else {
        clearTimeout(this.timer);
    }
};
 
  ScrollTrigger.create({
      trigger:".sc-donation",
      start:"0% 40%",
      end:"0 30%",
      onEnter:function(){
        new numberCounter("counter4", 4338644);
        new numberCounter("counter3", 258953);
        new numberCounter("counter2", 10);
        new numberCounter("counter1", 130000);
      }
  })
profile
웹퍼블리셔를 꿈꾸고 있습니다✨

0개의 댓글