[HTML/CSS] 3D 텍스트 올라가는 효과

 

HTML

<!-- 제이쿼리 CDN -->
<script src="https://code.jquery.com/jquery-3.7.1.slim.js"></script>
<!-- Slick CDN -->
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<!-- Slick CSS CDN -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>


<div class="list_wrap">
  <ul class="list autoplay">
    <li>
      <ul>
        <li><span>31회 합격생 김○구</span></li>
        <li><span>31회 합격생 김○구</span></li>
        <li><span>31회 합격생 김○구</span></li>
        <li><span>31회 합격생 김○구</span></li>
        <li><span>31회 합격생 김○구</span></li>
      </ul>
    </li>
    <li>
      <ul>
        <li><span>32회 합격생 김○구</span></li>
        <li><span>32회 합격생 김○구</span></li>
        <li><span>32회 합격생 김○구</span></li>
        <li><span>32회 합격생 김○구</span></li>
        <li><span>32회 합격생 김○구</span></li>
      </ul>
    </li>
    <li>
      <ul>
        <li><span>33회 합격생 김○구</span></li>
        <li><span>33회 합격생 김○구</span></li>
        <li><span>33회 합격생 김○구</span></li>
        <li><span>33회 합격생 김○구</span></li>
        <li><span>33회 합격생 김○구</span></li>
      </ul>
    </li>
    <li>
      <ul>
        <li><span>34회 합격생 김○구</span></li>
        <li><span>34회 합격생 김○구</span></li>
        <li><span>34회 합격생 김○구</span></li>
        <li><span>34회 합격생 김○구</span></li>
        <li><span>34회 합격생 김○구</span></li>
      </ul>
    </li>
    <li>
      <ul>
        <li><span>35회 합격생 김○구</span></li>
        <li><span>35회 합격생 김○구</span></li>
        <li><span>35회 합격생 김○구</span></li>
        <li><span>35회 합격생 김○구</span></li>
        <li><span>35회 합격생 김○구</span></li>
      </ul>
    </li>
  </ul>
</div>

<script>
  $('.autoplay').slick({
    slidesToShow: 4,   // 세로줄 갯수
    slidesToScroll: 1,   // 슬라이드가 몇 개 씩 넘어갈 것인지
    infinite: true,   // 무한 반복 여부
    autoplay: true,   // 자동 슬라이드 여부
    vertical: true,   // 세로 슬라이드 설정
    autoplaySpeed: 0,   // 슬라이드가 몇 초 동안 멈출것인지
    speed: 800,   // 슬라이드 넘어가는 속도
    pauseOnFocus: false,   // 포커스 시 멈춤 설정
    pauseOnHover: false,   // 마우스 오버 시 멈춤 설정
  });
</script>

 

 

CSS

* { list-style: none; padding: 0; margin: 0; font-size: 0;}
.list_wrap { width: 640px; height: 220px; overflow: hidden; }
.list { width: 100%; transform: perspective(260px) rotateX(30deg); position: relative;  transition-timing-function: linear; }   /*3D 설정*/
.list li { width: calc(100% / 5 - 0px); display: inline-block; font-size: 0; position: relative; }
.list li span { font-size: 12px; line-height: 3; font-weight: bold; }
.slick-track { transition-timing-function: linear !important}   /*슬라이드 모션 속도 지정*/

 

 

Codepen

See the Pen [HTML/CSS] 3D 텍스트 올라가는 효과 by TytanLee (@TytanLee) on CodePen.

 

 

 

 

• Slick Slide 라이브러리를 활용한 텍스트 효과
• 라이브러리 옵션 중 `slidesToShow`에 보여줄 세로줄을 설정
• 라이브러리 옵션 중 `vertical`을 설정해 세로로 슬라이드 설정
• 라이브러리 옵션 중 `autoplaySpeed`와 `speed`를 설정해 적당한 속도 조절
• CSS에 3D로 보여줄 부분에 `transform: perspective(260px) rotateX(30deg);`를 사용해 효과 연출
• 라이브러리 클래스 `slick-track`을 CSS에 가져와서 `transition-timing-function: linear !important`를 사용해 슬라이드 이동 속도 설정