45일

이예진·2025년 7월 28일

HTML, CSS, JS 활용 23강 특정 구간에서 스크롤시, 횡으로 이동하는 효과

gsap
gsap - codepen
CODEPEN - 1부
CODEPEN - 2부
CODEPEN - 3부
선생님 영상

설명
scrollY 값을 감지해서 특정 구간에 진입했을 때, 내부 요소를 가로 슬라이딩(translateX) 시키는 효과.
주로 가로 콘텐츠 영역이나 갤러리, 타임라인 등을 연출할 때 사용됨.

단계별 요약

단계핵심 기능
1부스크롤 위치에 따라 console로 감지해보기
2부특정 영역 진입 시 translateX로 횡 이동 적용
3부fixed로 고정 + 내부 요소만 가로 이동시키기

주요 개념 요약

1. scrollY 감지
js
window.addEventListener("scroll", () => { console.log(window.scrollY); // 스크롤 위치 로그 확인 });

2. 특정 구간 진입 확인
js
const section = document.querySelector(".scroll-section");
const sectionTop = section.offsetTop; const sectionHeight = section.offsetHeight;
if (scrollY >= sectionTop && scrollY <= sectionTop + sectionHeight) {
// 내부 요소 translateX
}

3. 내부 요소 가로 이동
js
innerBox.style.transform = translateX(-${scrollY - sectionTop}px);
// 스크롤 양만큼 왼쪽으로 이동

4. 고정 레이아웃 처리
css
.scroll-section { position: relative; height: 300vh; /* 긴 스크롤 영역 확보 */ }
.sticky-box { position: sticky; top: 0; height: 100vh; overflow: hidden; }

핵심 정리표

요소설명
scrollY스크롤 위치 추적
offsetTop해당 섹션의 Y위치
translateX요소를 가로로 이동시킴
position: sticky특정 위치에서 고정된 상태 유지
height: 300vh충분한 스크롤 높이 확보

한줄 요약
스크롤 위치를 감지해 특정 섹션 안에서만 내부 요소가 가로로 움직이게 만드는 패럴랙스 효과 구현!

HTML, CSS, JS 활용 24강 scroll-snap-type, scroll-behavior로 fullpage js 효과 구현

CODEPEN
선생님 영상

설명
JS 없이도 CSS만으로 페이지 단위로 스크롤되는 구조를 구현할 수 있음.
scroll-snap-type, scroll-snap-align 속성과 함께 overflow: scroll을 활용해, 마치 fullPage.js처럼 동작함.

핵심 구현 요약

요소역할
.pages전체 페이지를 감싸는 스크롤 영역 (세로 스크롤 설정)
.page각각의 페이지 (높이 100vh)
scroll-snap-type부모 요소에 적용, 스크롤 위치를 스냅시킴
scroll-snap-align자식 요소의 스냅 기준 설정
scroll-behavior: smooth부드러운 스크롤 효과

주요 코드

html
<div class="pages">
<section class="page">1</section>
<section class="page">2</section>
<section class="page">3</section>
</div>

css
html, body { height: 100%; margin: 0; scroll-behavior: smooth; }
.pages { height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; /* y축 기준, 반드시 스냅됨 */ }
.page { height: 100vh; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; font-size: 5rem; background-color: #f3f3f3; border-bottom: 1px solid #ccc; }

핵심 정리표

속성설명
scroll-snap-type: y mandatoryy축 기준으로 스냅, 꼭 스냅해야 함
scroll-snap-align: start요소의 시작 지점을 기준으로 맞춤
overflow-y: scroll스크롤 가능하게 설정
scroll-behavior: smooth부드러운 스크롤 효과
height: 100vh1화면당 한 섹션 표시

한줄 요약
JS 없이도 scroll-snap-type과 scroll-behavior를 조합하면 풀페이지 스크롤 UI를 CSS만으로 구현할 수 있음!

HTML, CSS, JS 활용 25강 특정 시작에 글자들이 순서대로 하나씩 회전하면서 나타나는 애니메이션

CODEPEN
선생님 영상

설명
각 글자를 <span>으로 감싸고, 각자 다른 animation-delay를 주면
한 글자씩 등장하면서 회전하는 텍스트 애니메이션을 구현할 수 있음.

핵심 구현 요약

요소설명
.text-wrap span각각의 글자(span) 요소
@keyframes회전하면서 투명도 조절
animation-delay순서대로 등장하도록 시간차 부여
opacity, transform투명도와 회전효과 적용

주요 코드

html
<div class="text-wrap">
<span>S</span>
<span>T</span>
<span>U</span>
<span>D</span>
<span>Y</span>
</div>

css
.text-wrap { display: flex; font-size: 5rem; font-weight: bold; justify-content: center; margin-top: 200px; }
.text-wrap span { display: inline-block; opacity: 0; transform: rotateY(90deg); animation: rotateFadeIn 0.6s forwards; }
.text-wrap span:nth-child(1) { animation-delay: 0.1s; }
.text-wrap span:nth-child(2) { animation-delay: 0.3s; }
.text-wrap span:nth-child(3) { animation-delay: 0.5s; }
.text-wrap span:nth-child(4) { animation-delay: 0.7s; }
.text-wrap span:nth-child(5) { animation-delay: 0.9s; }
@keyframes rotateFadeIn { 100% { opacity: 1; transform: rotateY(0deg); } }

핵심 정리표

속성/기법설명
@keyframes rotateFadeIn회전하면서 투명도 나타남
animation-delay각 글자에 시간차 부여
transform: rotateY()Y축 기준 회전
opacity: 0 → 1점점 나타나도록 설정
forwards애니메이션이 끝난 후 상태 유지

팁
JS 없이도 순서 애니메이션은 nth-child와 animation-delay만으로 가능
transform 속성과 조합하면 훨씬 풍부한 시각 효과 가능

한줄 요약
텍스트를 <span>으로 쪼개고 animation-delay로 시간차를 두면, 글자가 하나씩 회전하면서 자연스럽게 등장하는 효과를 만들 수 있음!

HTML, CSS, JS 활용 26강 반응형 스와이퍼

tailwindcss
swiper - scrollbar
codesandbox - scrollbar
CODEPEN
선생님 영상

주요 목표

  • 슬라이드를 Swiper.js로 구성
  • 반응형 설정 (breakpoints) 활용
  • 좌우 버튼 및 페이지네이션 추가

핵심 코드 구성

html
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">슬라이드1</div>
<div class="swiper-slide">슬라이드2</div>
<div class="swiper-slide">슬라이드3</div>
<div class="swiper-slide">슬라이드4</div>
<div class="swiper-slide">슬라이드5</div>
</div>
<!-- 페이지네이션 & 버튼 -->
<div class="swiper-pagination"> </div>
<div class="swiper-button-prev"> </div>
<div class="swiper-button-next"> </div>
</div>

css
.swiper { width: 100%; padding: 40px 0; }
.swiper-slide { background: #eee; text-align: center; font-size: 24px; height: 200px; line-height: 200px; }

js
new Swiper(".swiper", { loop: true,
spaceBetween: 20,
slidesPerView: 1,
pagination: { el: ".swiper-pagination", clickable: true },
navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" },
breakpoints: { 768: { slidesPerView: 2 }, 1024: { slidesPerView: 3 } } });

핵심 옵션 설명

옵션설명
loop: true무한 루프 슬라이드
spaceBetween슬라이드 간 간격 (px)
slidesPerView한 번에 보여줄 슬라이드 수
pagination페이지네이션 요소 활성화
navigation이전/다음 버튼 설정
breakpoints반응형으로 슬라이드 수 조절

핵심 정리표

기능사용 속성/메서드
기본 슬라이드.swiper, .swiper-slide
페이지네이션.swiper-pagination, clickable: true
좌우 버튼.swiper-button-next, .swiper-button-prev
반응형 뷰 설정breakpoints 객체 내 slidesPerView 설정

한 줄 요약
Swiper.js로 간편하게 반응형 슬라이드를 만들고, breakpoints로 화면 크기에 따라 슬라이드 수를 유동적으로 조절할 수 있음.

HTML, CSS, JS 활용 27강 스와이퍼, 현재 활성화된 슬라이드의 내용을 별도의 공간에 표시

스와이퍼 - 스크롤바
CODEPEN - 1부
CODEPEN - 2부
CODEPEN - another
선생님 영상

목표

  • 슬라이드 내부가 아닌 외부 텍스트 영역에 현재 슬라이드 정보 표시
  • 슬라이드 이동 시마다 자동 업데이트

핵심 코드 구성

html
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" data-title="슬라이드 1번 내용">Slide 1</div>
<div class="swiper-slide" data-title="슬라이드 2번 내용">Slide 2</div>
<div class="swiper-slide" data-title="슬라이드 3번 내용">Slide 3</div>
</div>
</div>
<!-- 별도 출력 공간 -->
<div class="slide-info">
현재 슬라이드 내용: <span class="slide-title">슬라이드 1번 내용</span>
</div>

js
const swiper = new Swiper(".swiper", { loop: true, on: { slideChange: function () { const activeSlide = this.slides[this.activeIndex]; const title = activeSlide.dataset.title; document.querySelector(".slide-title").textContent = title; } } });

설명

요소/기능설명
data-title 속성슬라이드마다 고유한 텍스트를 미리 부여
.slide-title외부 텍스트 표시용 영역
swiper.on.slideChange슬라이드가 변경될 때마다 실행되는 Swiper 이벤트
this.activeIndex현재 활성화된 슬라이드의 인덱스 번호
this.slides[...]전체 슬라이드 배열 중 하나에 접근

핵심 정리표

목적방법
현재 슬라이드 정보 가져오기this.slides[this.activeIndex]
슬라이드별 텍스트 지정 방법data-title 사용자 정의 속성 활용
외부 텍스트 업데이트document.querySelector().textContent
슬라이드 변경 감지 이벤트on.slideChange 사용

한줄 요약
Swiper의 slideChange 이벤트를 활용하여, 슬라이드가 바뀔 때마다 외부 영역에 관련 정보를 동적으로 표시할 수 있음.

HTML, CSS, JS 활용 28강 멀티 숫자 카운터, 제이쿼리 each

tailwindcss
MDN - 삼항연산자
CODEPEN - 1부
CODEPEN - 2부CODEPEN - 3부

선생님 영상
멀티 숫자 카운터, 제이쿼리 each 1부
멀티 숫자 카운터, 제이쿼리 each 2, 3부

1부 - 기본 숫자 카운터 구현

목표

  • .counter 클래스가 달린 요소들에 대해
  • data-target 값까지 숫자를 점점 증가시킴

핵심 코드 요약
js
$('.counter').each(function () { const $el = $(this); const target = +$el.data('target'); let count = 0;
const interval = setInterval(() => { count += Math.ceil(target / 100); if (count >= target) { count = target; clearInterval(interval); } $el.text(count); }, 20); });

2부 - 스크롤 진입 시 카운팅 시작

목표

  • #section-counter 영역에 도달하면 카운트 시작
  • 한 번만 실행되도록 isPlay 플래그 사용

핵심 JS 변경
let isPlay = false;
$(window).scroll(function () { const sectionTop = $('#section-counter').offset().top; const scrollBottom = $(window).scrollTop() + $(window).height();
if (scrollBottom > sectionTop && !isPlay) { isPlay = true;
$('.counter').each(function () { const $el = $(this); const target = +$el.data('target'); let count = 0;
const interval = setInterval(() => { count += Math.ceil(target / 100);
if (count >= target) { count = target; clearInterval(interval); } $el.text(count); }, 20); }); } });

3부 - 숫자 포맷팅 (콤마 추가)

목표

  • 숫자에 천 단위 콤마(,) 삽입
  • 가독성 향상

핵심 코드 추가
js
function formatNumber(num) { return num.toLocaleString(); // ex) 1,000 }
js
$el.text(formatNumber(count));

전체 핵심 정리

단계주요 기능
1부.each()로 다중 숫자 카운터 구현
2부특정 영역에 도달했을 때만 카운트 실행 (scroll 이벤트 활용)
3부숫자에 천 단위 콤마 표시 (가독성 향상)

한줄 요약
.each() 반복 → scroll 진입 → 숫자 증가 + 포맷팅까지
시각적으로 세련된 숫자 카운트 애니메이션 구현이 가능

profile
이예진
헤
이전 포스트

44일차

다음 포스트

46일차

0개의 댓글