코딩/수업메모

HTML, CSS, JS 활용 - 15 ~ 19강

ponyo118 2026. 3. 12. 18:15

15강 - 특정 구간에서 스크롤시, 횡으로 이동하는 효과

gsap

gsap - codepen

CODEPEN - 1부

CODEPEN - 2부

CODEPEN - 3부

 

[html]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>


<section class="section-group section-group--1 section-group--vertical-up">
    <section class="section section--1">섹션1</section>
    <section class="section section--2">섹션2</section>
    <section class="section section--3">섹션3</section>
    <section class="section section--4">섹션4</section>
    <section class="section section--5">섹션5</section>
</section>

<section class="section-group section-group--2 section-group--horizontal-right">
    <section class="section section--6">섹션6</section>
    <section class="section section--7">섹션7</section>
    <section class="section section--8">섹션8</section>
    <section class="section section--9">섹션9</section>
    <section class="section section--10">섹션10</section>
</section>


<section class="section-group section-group--3">
    <section class="section section--11">섹션11</section>
    <section class="section section--12">섹션12</section>
    <section class="section section--13">섹션13</section>
    <section class="section section--14">섹션14</section>
    <section class="section section--15">섹션15</section>
</section>

<section class="section-group section-group--4 section-group--horizontal-left">
    <section class="section section--16">섹션16</section>
    <section class="section section--17">섹션17</section>
    <section class="section section--18">섹션18</section>
    <section class="section section--19">섹션19</section>
    <section class="section section--20">섹션20</section>
</section>


<section class="section-group section-group--5 section-group--stack-up">
    <section class="section section--21">섹션21</section>
    <section class="section section--22">섹션22</section>
    <section class="section section--23">섹션23</section>
    <section class="section section--24">섹션24</section>
    <section class="section section--25">섹션25</section>
</section>

[css]

html, body {
    overflow-x: hidden;
}
/* 
body { -ms-overflow-style: none;}
body::-webkit-scrollbar { display:none }
 */

body, ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    font-weight: bold;
    letter-spacing: -0.5rem;
    border: 10px solid black;
    box-sizing: border-box;
    background-color: white;
    position: relative;
}

.section-group--horizontal-right {
    display: flex;
    flex-direction: row-reverse;
}

.section-group--horizontal-right > .section,
.section-group--horizontal-left > .section {
    width: 100%;
    flex-shrink: 0;
}

.section-group--horizontal-left {
    display: flex;
}

[js]

// 스크롤 트리거 플러그인 활성화
gsap.registerPlugin(ScrollTrigger);

function SectionGroup__init() {
    $(".section-group--horizontal-right").each(function (index, node) {
        var $group = $(node);
        var $section = $group.find(" > .section");

        gsap.to($section, {
            xPercent: 100 * ($section.length - 1),
            ease: "none",
            scrollTrigger: {
                trigger: $group,
                start: "top top",
                end: "+=" + ($section.length - 1) + "00%",
                pin: true,
                scrub: true
            }
        });
    });

    $(".section-group--horizontal-left").each(function (index, node) {
        var $group = $(node);
        var $section = $group.find(" > .section");

        gsap.to($section, {
            xPercent: -100 * ($section.length - 1),
            ease: "none",
            scrollTrigger: {
                trigger: $group,
                start: "top top",
                end: "+=" + ($section.length - 1) + "00%",
                pin: true,
                scrub: true
            }
        });
    });

    $(".section-group--stack-up").each(function (index, node) {
        console.log(node)
        var $group = $(node);
        var $section = $group.find(" > .section:not(:first-child)");

        $section.each(function (index, node) {
            var $sectionOne = $(node);

            gsap.to($sectionOne, {
                ease: "none",
                scrollTrigger: {
                    trigger: $sectionOne,
                    start: "top 100%",
                    end: "bottom 100%",
                    pin: $sectionOne.prev(),
                    pinSpacing: false,
                    scrub: true
                }
            });
        });
    });
}

SectionGroup__init();

동영상

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

 

16강 - scroll-snap-type, scroll-behavior로 fullpage js 효과 구현

CODEPEN

동영상

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

 

[html]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pen</title>
  </head>
  <body>
    <header class="top_bar">
      <ul>
        <li><a href="#section-1">섹션 1</a></li>
        <li><a href="#section-2">섹션 2</a></li>
        <li><a href="#section-3">섹션 3</a></li>
        <li><a href="#section-4">섹션 4</a></li>
        <li><a href="#section-5">섹션 5</a></li>
      </ul>
      </header>
    <main class="section_group">
      <section id="section-1" class="section section-1">섹션1</section>
      <section id="section-2" class="section section-2">섹션2</section>
      <section id="section-3" class="section section-3">
        <h1>섹션 3</h1>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus consequatur, eligendi quos neque sapiente quibusdam! Reiciendis cum nam provident velit dolor quidem debitis nobis similique! Quidem quas facilis animi numquam?
        In aliquam, vel debitis ratione aliquid ipsum totam voluptas nihil officiis. Recusandae accusamus at repellat cupiditate veniam placeat dolores, illum repellendus officiis aliquid sed sit nisi dicta hic fugiat dignissimos.
        Consectetur obcaecati dolores totam laudantium doloremque officiis quod saepe, necessitatibus maxime porro sit nulla, atque cum. Temporibus eius quia quod corporis aut enim, fugit repellendus velit assumenda provident odit fuga?
        Consequuntur, adipisci vero dolor, odit impedit, provident perspiciatis unde minima pariatur totam consectetur sed qui nesciunt. Facilis, aspernatur ipsa impedit magnam harum dolore ducimus odit autem quo, nesciunt, temporibus assumenda!
        Maxime asperiores corporis aperiam unde optio tempore blanditiis vitae ipsam ratione labore accusantium, quas modi quidem iste perferendis exercitationem sapiente, molestias natus placeat voluptas dolorem. Quo eum reiciendis vel assumenda?
        Blanditiis facere quam dignissimos? Iste possimus repudiandae beatae facere adipisci ab. Officia amet repudiandae facilis? Harum odit placeat doloremque, accusantium corrupti magnam dolores perspiciatis ex numquam quis! Odio, animi doloremque!
        Eos repellat quam accusamus cum dignissimos expedita corporis assumenda. Dicta quas aperiam praesentium optio ut, expedita eaque? Eius, rem ea praesentium modi minus, dignissimos unde velit illo perferendis facilis consequatur!
        Dignissimos voluptatum suscipit recusandae ad repellat animi iusto nihil? Perferendis dolore placeat voluptas dolorem veniam ipsam, iste rerum beatae quasi, repellendus totam vel eum ratione necessitatibus, praesentium itaque ab aliquam.
        Cum ab necessitatibus non minus veritatis asperiores quos modi sequi officiis quibusdam amet reprehenderit officia ipsam obcaecati laboriosam delectus, culpa fugiat aut consectetur enim eos placeat! Consequatur placeat dicta ipsa?
        Asperiores aperiam architecto amet, sunt cumque magnam! Similique suscipit amet hic sint excepturi modi optio corrupti! Id corrupti reiciendis eaque natus facilis itaque, voluptatum, vero incidunt recusandae, maiores rem ab.
        Voluptatibus quidem architecto sunt aspernatur, vel tempore cum mollitia? Molestias quo est perspiciatis magni harum, quia aliquam sit eligendi officia culpa doloremque. Sit commodi autem quod impedit vel iure ipsa.
        Quibusdam esse culpa illo similique tenetur temporibus blanditiis provident vitae natus, explicabo, recusandae voluptate omnis molestias quasi animi iusto nemo architecto. Libero minus dicta nam eaque impedit maiores nihil neque?
        Exercitationem dignissimos praesentium possimus quisquam nemo odit deserunt nostrum tenetur nulla eum minus perferendis quo est repellendus rerum laudantium tempore numquam, architecto iure consequuntur maiores accusantium ea vel qui? Eaque.
        Reprehenderit dicta provident repellat quam deserunt nisi suscipit sequi dolor placeat doloremque voluptas iste possimus veritatis, error rerum quod aspernatur? Sunt ullam quo harum, adipisci ad commodi inventore maiores magni?
        Ullam doloribus perferendis suscipit? Quae voluptas ad deleniti nostrum sit aliquam odit delectus possimus repudiandae esse ipsam tempore laborum quibusdam, quod vero obcaecati officiis cumque quam nam reiciendis ratione? Temporibus?
        Velit nobis, sed omnis tempore illum pariatur, sequi reiciendis sapiente eos libero cumque blanditiis numquam reprehenderit! Sint architecto vel vitae, reiciendis ad praesentium, fugit saepe, a deserunt sunt excepturi blanditiis.
        Fugit nisi nulla cumque est amet aperiam facere sed, nobis illo? Nisi dicta sapiente possimus autem tempora et doloremque. Cum saepe facere recusandae obcaecati, dolorem ullam ipsam ipsum autem aut!
        Praesentium maxime obcaecati pariatur aperiam, iure eaque officiis labore odio tenetur eos harum magnam inventore voluptatem qui aliquam cupiditate veniam omnis fuga eligendi ab! Ducimus omnis nobis excepturi rem expedita.
        Assumenda quae soluta quibusdam quia sit ducimus totam. Sapiente tempore harum perspiciatis quo laboriosam eum enim doloribus odio nisi. Sint molestias perspiciatis porro deleniti! Reiciendis pariatur maiores dolorem eaque neque.
        Nesciunt eius deleniti, quidem tenetur reprehenderit culpa modi excepturi nihil aperiam eaque dolores sint at voluptate sunt dignissimos nam. Voluptatibus eaque odit rem itaque dolor exercitationem at, voluptatum assumenda veritatis?
      </section>
      <section id="section-4" class="section section-4">섹션4</section>
      <section id="section-5" class="section section-5">섹션5</section>
    </main>
    <script src="./script.js"></script>
  </body>
</html>

[css]

body {
  margin: 0;
}

.top_bar {
  position: fixed;
  top: 0;
  right: 0;
  border: 3px solid black;
  background-color: pink;
}

.section_group {
  overflow-y: scroll;
  height: 100vh;
  scroll-behavior: smooth;
  scroll-snap-type:y mandatory;
}

.section_group > .section {
  min-height: 100vh;
  border: 10px solid black;
  box-sizing: border-box;
  scroll-snap-align:start;
}

 

17강

특정 시작에 글자들이 순서대로 하나씩 회전하면서 나타나는 애니메이션

&nbsp;

CODEPEN

[html]

<span>↓HOVER↓</span>
<div class="box-1">
  <span>A</span>
  <span>B</span>
  <span>&nbsp;</span>
  <span>C</span>
  <span>D</span>
</div>

[css]

.box-1 {
  font-size: 5rem;
  font-weight: bold;
  display: flex;
  border: 1px solid black;
}

.box-1 > * {
  transform: rotateY(180deg);
  transition: all .3s;
  opacity: 0;
}

.box-1:hover > * {
  transform: rotateY(0);
  opacity: 1;  
}

.box-1:hover > :nth-child(1) {
  transition-delay: 0.1s;
}

.box-1:hover > :nth-child(2) {
  transition-delay: 0.2s;
}

.box-1:hover > :nth-child(3) {
  transition-delay: 0.3s;
}

.box-1:hover > :nth-child(4) {
  transition-delay: 0.4s;
  
}.box-1:hover > :nth-child(5) {
  transition-delay: 0.5s;
}

동영상

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

18강 -  반응형 스와이퍼

tailwindcss

swiper - scrollbar

codesandbox - scrollbar

CODEPEN

[html]

<!-- 테일윈드 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<section class="section section-1">
    <div class="container mx-auto">
        <div class="swiper-box-1">
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">Slide 1</div>
                    <div class="swiper-slide">Slide 2</div>
                    <div class="swiper-slide">Slide 3</div>
                    <div class="swiper-slide">Slide 4</div>
                    <div class="swiper-slide">Slide 5</div>
                    <div class="swiper-slide">Slide 6</div>
                    <div class="swiper-slide">Slide 7</div>
                    <div class="swiper-slide">Slide 8</div>
                    <div class="swiper-slide">Slide 9</div>
                </div>
                
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                
                <div class="swiper-scrollbar"></div>
            </div>
        </div>
    </div>
</section>

[css]

.section-1 {
    padding-left: 50px;
    padding-right: 50px;
    overflow: hidden;
}

.swiper-box-1 .swiper-slide {
    height: 500px;
    background-color: green;
}

.swiper-box-1 .swiper {
    overflow: visible;
}

[js]

var swiper = new Swiper(".mySwiper", {
    loop: true,
    spaceBetween: 20,
    scrollbar: {
        el: ".swiper-scrollbar",
        hide: true
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
    },
    breakpoints: {
        0: {
            slidesPerView: 1
        },
        768: {
            slidesPerView: 2
        },
        1024: {
            slidesPerView: 3
        },
        1280: {
            slidesPerView: 4
        },
        1536: {
            slidesPerView: 5
        }
    }
});

동영상

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

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

 

양쪽 버튼 추가

- html
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

- js
navigation: {
  nextEl: ".swiper-button-next",
  prevEl: ".swiper-button-prev",
},

스와이퍼 - 스크롤바

CODEPEN - 1부

CODEPEN - 2부

CODEPEN - another (응용)

 

 

[html]

<!-- 제이쿼리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<!-- 테일윈드 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">

<!-- Swiper CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" />
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>

<div class="swiper-box-1">
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">

            <div class="swiper-slide">
                <h1>Slide 1</h1>
                <div class="info_box_wrap hidden">
                    <div class="info_box">
                        슬라이드 1
                    </div>
                </div>
            </div>

            <div class="swiper-slide">
                <h1>Slide 2</h1>
                <div class="info_box_wrap hidden">
                    <div class="info_box">
                        슬라이드 2
                    </div>
                </div>
            </div>

            <div class="swiper-slide">
                <h1>Slide 3</h1>
                <div class="info_box_wrap hidden">
                    <div class="info_box">
                        슬라이드 3
                    </div>
                </div>
            </div>

        </div>

        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>

        <div class="swiper-scrollbar"></div>

    </div>
</div>

<div class="swiper-box-1__active-slide-info-box-wrap border border-red-500"></div>

 

[css]

.swiper-box-1 {
    overflow: hidden;
}

.swiper-box-1 > .swiper {
    width: 600px;
    height: 300px;
}

 

[js]

var swiper = new Swiper(".mySwiper", {
// 스크롤바
scrollbar: {
el: ".swiper-scrollbar", // 스크롤바 요소
hide: true               // 일정 시간 후 자동 숨김
},
// 좌우 화살표 네비게이션
navigation: {
nextEl: ".swiper-button-next", // 다음 버튼
prevEl: ".swiper-button-prev", // 이전 버튼
},
// 스와이퍼 이벤트 설정
on: {
// 슬라이더가 처음 생성된 후 실행
        afterInit: function (_swiper) {
            // console.log(_swiper.slides[_swiper.activeIndex]);
            const $active_slide = $(_swiper.slides[_swiper.activeIndex]);
            const html = $active_slide.find(".info_box_wrap").html();
            // console.log(html);
            $(".swiper-box-1__active-slide-info-box-wrap").empty().append(html);
            // updateActiveSlideInfo(_swiper);
        },
        // 슬라이드가 바뀔 때
        slideChange: function (_swiper) {
            // const $active_slide = $(_swiper.slides[_swiper.activeIndex]);
            // const html = $active_slide.find(".info_box_wrap").html();
            // $(".swiper-box-1__active-slide-info-box-wrap").empty().append(html);
            updateActiveSlideInfo(_swiper);
        }
    }
});

function updateActiveSlideInfo(_swiper) {
    // 현재 활성 슬라이드 가져오기
    const $active_slide = $(_swiper.slides[_swiper.activeIndex]);

    // 활성 슬라이드 안에 있는 info_box_wrap 내용 가져오기
    const html = $active_slide.find('.info_box_wrap').html();

    // 가져온 내용을 외부 박스에 넣기
    $('.swiper-box-1__active-slide-info-box-wrap').empty().append(html); // 기존 내용 제거 /새 내용 추가
}

동영상

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

 

'코딩 > 수업메모' 카테고리의 다른 글

HTML, CSS, JS 활용 - 24 ~26 강  (0) 2026.03.16
HTML, CSS, JS 활용 - 20 ~ 23강  (1) 2026.03.13
HTML, CSS, JS 활용 - 11 ~ 14강  (0) 2026.03.11
HTML, CSS, JS 활용 - 7 ~ 10강  (0) 2026.03.10
HTML, CSS, JS 활용 - 1 ~6강  (0) 2026.03.10

'코딩/수업메모'의 다른글

  • 현재글HTML, CSS, JS 활용 - 15 ~ 19강

관련글

티스토리툴바