๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
Javascript/Effect

Parallax Scrolling ํŒจ๋Ÿด๋ž™์Šค ์Šคํฌ๋กค๋ง 04 : ์ƒ๋‹จ ์ˆจ๊น€ ๋ฉ”๋‰ด active & ํ•˜๋‹จ top ์ˆจ๊น€ ๋ฒ„ํŠผ & ๋ถ€๋“œ๋Ÿฌ์šด ์ด๋™ & ์š”์†Œ ๊ฐœ๋ณ„์ ์œผ๋กœ ๋‚˜ํƒ€๋‚ด๊ธฐ

by oranssy 2022. 9. 23.
728x90
๋ฐ˜์‘ํ˜•

โญ๏ธ Parallax Scrolling ํŒจ๋Ÿด๋ž™์Šค ์Šคํฌ๋กค๋ง 04 : ์ƒ๋‹จ ์ˆจ๊น€ ๋ฉ”๋‰ด active & ํ•˜๋‹จ top ์ˆจ๊น€ ๋ฒ„ํŠผ & ๋ถ€๋“œ๋Ÿฌ์šด ์ด๋™ & ์š”์†Œ ๊ฐœ๋ณ„์ ์œผ๋กœ ๋‚˜ํƒ€๋‚ด๊ธฐ โญ๏ธ


01. Parallax Scrolling

ํŒจ๋Ÿด๋ž™์Šค(Parallax)๋ž€ '์‹œ์ฐจ'๋ฅผ ๋œปํ•˜๋Š” ๋‹จ์–ด๋กœ, ๋ฉ€๋ฆฌ ์žˆ๋Š” ๋ฌผ์ฒด๋Š” ์ฒœ์ฒœํžˆ ์›€์ง์ด๊ณ  ๊ฐ€๊นŒ์ด ์žˆ๋Š” ๋ฌผ์ฒด๋Š” ๋น ๋ฅด๊ฒŒ ์›€์ง์ด๋Š” ํ˜„์ƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.
ํŒจ๋Ÿด๋ž™์Šค ์Šคํฌ๋กค๋ง (Parallax Scrolling) ๊ธฐ์ˆ ์€ ๋ฐฐ๊ฒฝ ๋˜๋Š” ์˜ค๋ธŒ์ ํŠธ์˜ ๋ ˆ์ด์–ดํ™”, ์Šคํฌ๋กค๊ณผ ์• ๋‹ˆ๋ฉ”์ด์…˜์˜ ์†๋„ ์กฐ์ ˆ์„ ํ†ตํ•ด ๊นŠ์ด์— ๋Œ€ํ•œ ์ฐฉ์‹œ๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ๊ธฐ์ˆ  ์ž…๋‹ˆ๋‹ค.
์ด ๊ธฐ์ˆ ์€ ํ•œ ํŽ˜์ด์ง€๋กœ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์‹œ๊ฐ์ ์ธ ๋ชฐ์ž…๊ฐ์„ ์ฃผ๊ณ  ํšจ๊ณผ์ ์ธ ์Šคํ† ๋ฆฌํ…”๋ง์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•˜๋Š” ์žฅ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค.
๋‹ค๋งŒ ๋‚ด์šฉ์ด ๋„ˆ๋ฌด ๊ธธ ๊ฒฝ์šฐ์—๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์ง€๋ฃจํ•จ์ด๋‚˜ ๋ถˆํŽธํ•จ์„ ๋Š๋‚„ ์ˆ˜ ์žˆ๊ณ , ํ™”๋ฉด ๊ตฌ์„ฑ์ด ๋ณต์žกํ•ด์ง€๋ฉฐ ๋งŽ์€ ๋ฆฌ์†Œ์Šค๋กœ ์ธํ•ด ๋กœ๋”ฉ ์†๋„๊ฐ€ ๋Š๋ฆด ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

02. ํŒจ๋Ÿด๋ž™์Šค ์Šคํฌ๋กค๋ง ๋งŒ๋“ค์–ด๋ณด๊ธฐ : ๋ชฉํ‘œ

๐ŸงŠ ์œ„๋กœ ์Šคํฌ๋กคํ•˜๋ฉด, ๋ฉ”๋‰ด๋ฐ”๊ฐ€ ์ˆจ๊ฒจ์ ธ ์žˆ๋‹ค๊ฐ€ ๋‚˜์˜ค๋„๋ก ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
๐ŸงŠ ๋ธŒ๋ผ์šฐ์ €์˜ ๋งจ ์•„๋ž˜์— ๋„๋‹ฌํ•˜๋ฉด, top ๋ฒ„ํŠผ์ด ์ˆจ๊ฒจ์ ธ ์žˆ๋‹ค๊ฐ€ ๋‚˜์˜ค๋„๋ก ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
๐ŸงŠ ๋ฉ”๋‰ด๋ฐ”์™€ top ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ ์ด๋™ํ•˜๊ฒŒ ๋  ๋•Œ, ํ™”๋ฉด์ด ๋ถ€๋“œ๋Ÿฝ๊ฒŒ ์ด๋™๋˜๋Š” ํšจ๊ณผ๋ฅผ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค.
๐ŸงŠ section ์˜ ์š”์†Œ๋“ค(์ˆซ์ž, ์ด๋ฏธ์ง€, ๊ธ€)์ด ์Šคํฌ๋กคํ•  ๋•Œ ์„œ์„œํžˆ ๋‚˜ํƒ€๋‚˜๋Š” ํšจ๊ณผ๋ฅผ ํ‘œํ˜„ํ•ฉ๋‹ˆ๋‹ค.

[1] ๋ฉ”๋‰ด๋ฐ” ๋งŒ๋“ค๊ธฐ (html)

1) ์‹œ๋ฉ˜ํ‹ฑ ๊ตฌ์กฐ๋ฅผ ์œ„ํ•ด nav ํƒœ๊ทธ๋ฅผ ๋งŒ๋“ค๊ณ , ๊ทธ ์•ˆ์— ์ž์‹ ํƒœ๊ทธ๋กœ ul ๊ณผ li ํƒœ๊ทธ๋ฅผ ์ด์šฉํ•ด ๋ฉ”๋‰ด๋ฐ” ๋ชฉ๋ก์„ ์ž‘์„ฑํ•ฉ๋‹ˆ๋‹ค.
2) ๋ฉ”๋‰ด๋ฐ”๋ฅผ ๋ˆŒ๋ €์„ ๋•Œ ์ด๋™์ด ๋˜๋„๋ก a ํƒœ๊ทธ๋กœ ๋งํฌ๋ฅผ ๊ฑธ์–ด์ฃผ๊ณ , class ๋กœ active ๋ฅผ '๋ฉ”๋‰ด1'์— ์ž…๋ ฅํ•ฉ๋‹ˆ๋‹ค.
3) ๋‚˜์ค‘ ์ž‘์—…์ด์ง€๋งŒ, script ์˜ ๊ณ„์‚ฐ์— ๋”ฐ๋ผ ๋งจ ์œ—์ชฝ์—์„œ ๋ฉ”๋‰ด๊ฐ€ ์‚ฌ๋ผ์ ธ ๋ฒ„๋ฆฌ๊ธฐ ๋•Œ๋ฌธ์— class ="show"๋ฅผ ๋ถ™์—ฌ์ค๋‹ˆ๋‹ค.

   ___ ์ฐธ๊ณ ํ•˜๊ธฐ ___
  `1   a href ์— class ="ํด๋ž˜์Šค๊ฐ’" ๋˜๋Š” id ="์•„์ด๋””๊ฐ’" ์„ ๋„ฃ์–ด์ฃผ๋ฉด ๋งํฌ ์ด๋™์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

<nav id="parallax__nav" class="show">
    <ul>
        <li class="active"><a href="#section1">๋ฉ”๋‰ด1</a></li>
        <li><a href="#section2">๋ฉ”๋‰ด2</a></li>
        <li><a href="#section3">๋ฉ”๋‰ด3</a></li>
        <li><a href="#section4">๋ฉ”๋‰ด4</a></li>
        <li><a href="#section5">๋ฉ”๋‰ด5</a></li>
        <li><a href="#section6">๋ฉ”๋‰ด6</a></li>
        <li><a href="#section7">๋ฉ”๋‰ด7</a></li>
        <li><a href="#section8">๋ฉ”๋‰ด8</a></li>
        <li><a href="#section9">๋ฉ”๋‰ด9</a></li>
    </ul>
</nav>

[2] ๋ฉ”๋‰ด๋ฐ” ๋””์ž์ธํ•˜๊ธฐ (css)

๋ธŒ๋ผ์šฐ์ € ํ™”๋ฉด์— ์–ด๋–ป๊ฒŒ ๋ณด์—ฌ์ง€๋Š”์ง€ ๊ณ„์† ํ™•์ธํ•˜๋ฉด์„œ ๋””์ž์ธํ•ฉ๋‹ˆ๋‹ค.

#parallax__nav {
    position: fixed;    /* ์˜ค๋ฅธ์ชฝ ์œ„์— ๊ณ ์ •ํ•ด์„œ ๋„์›Œ๋†“๊ธฐ์œ„ํ•ด */
    right: 20px;        /* ๊ณ ์ •ํ•ด ๋‘˜ ์œ„์น˜ : ์˜ค๋ฅธ์ชฝ ๊ฐ„๊ฒฉ ์„ค์ • */
    top: -200px;        /* parallax__nav ์— show ๊ฐ€ ์•ˆ ๋ถ™์—ˆ์„ ๋•Œ๋Š” ์ˆจ๊ฒจ์ฃผ๊ธฐ ์œ„ํ•ด - ๊ฐ’์„ ์คŒ */
    z-index: 2000;      /* ๋ฉ”๋‰ด๋ฐ”๋ฅผ ๋ˆŒ๋Ÿฌ์„œ ์ž‘๋™ํ•ด์•ผ ํ•˜๋ฏ€๋กœ, ๋ ˆ์ด์•„์›ƒ์˜ ๋งจ ์œ—์ชฝ(ํ‘œ๋ฉด)์— ์œ„์น˜์‹œํ‚ด */
    background-color: rgba(0, 0, 0, 0.4);       /* rgba : ํˆฌ๋ช…์ƒ‰ ์ง€์ • */
    padding: 20px 30px;     /* ์•ˆ์ชฝ ์—ฌ๋ฐฑ : ์ƒํ•˜ ์ขŒ์šฐ */
    border-radius: 50px;    /* ํ…Œ๋‘๋ฆฌ ๊ณก๋ฅ  */
    transition: top .4s ease;   /* parallax__nav ์— show ๊ฐ€ ๋ถ™์—ˆ์„ ๋•Œ top์˜ ๋ณ€ํ™”์— ์˜ํ•œ ๊ฒฐ๊ณผ๋ฅผ 0.4์ดˆ์˜ ์‹œ๊ฐ„ ๋™์•ˆ ์„œ์„œํžˆ ๋ณด์—ฌ์คŒ */
}

#parallax__nav.show {
    top: 20px;          /* parallax__nav ์— show ๊ฐ€ ๋ถ™์—ˆ์„ ๋•Œ ๋‚˜์˜ค๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•จ */
}

#parallax__nav li {
    display: inline;    /* ์š”์†Œ๊ฐ€ ํ‘œ์‹œ๋˜๋Š” ์˜์—ญ๋งŒํผ๋งŒ ๊ณต๊ฐ„์„ ๊ฐ–๋„๋ก ๋ฐฐ์น˜ */
    margin: 0 5px;      /* ๋ฐ”๊นฅ ์—ฌ๋ฐฑ : ์ƒํ•˜ ์ขŒ์šฐ */
}

#parallax__nav li a {
    display: inline-block;  /* ์š”์†Œ๊ฐ€ ํ‘œ์‹œ๋˜๋Š” ์˜์—ญ๋งŒํผ๋งŒ ๊ณต๊ฐ„์„ ์ฐจ์ง€ํ•˜๋ฉด์„œ ํฌ๊ธฐ์™€ ์—ฌ๋ฐฑ ์„ค์ •์ด ๊ฐ€๋Šฅํ•˜๋„๋ก ๋ฐฐ์น˜ */
    /* width: 30px; ์ž„์‹œ๋กœ ์ค€ ๊ฐ’, css ์„ค์ •ํ•˜๋ฉฐ ๋ธŒ๋ผ์šฐ์ € ํ™”๋ฉด ํ™•์ธ ํ›„ ์ง€์›๋‹ˆ๋‹ค. */
    height: 30px;
    padding: 5px 20px;
    text-align: center;     /* ํ…์ŠคํŠธ ์ค‘์•™ ์ •๋ ฌ */
    line-height: 30px;      /* ์ค„๊ฐ„๊ฒฉ : ๊ธฐ์ค€ ๋†’์ด */
}

#parallax__nav li.active a {
    background: #fff;       /* background ์˜ต์…˜์„ ์ง€์ •ํ•ด์„œ ์‚ฌ์šฉํ•  ๋•Œ (color, image, repeat, attachment, position ๋“ฑ) ์—ฌ๊ธฐ์„œ๋Š” ๋ฐฐ๊ฒฝ์ƒ‰ */
    color: #000;            /* ๊ธ€์ž์ƒ‰ */
    border-radius: 20px;
    box-sizing: content-box;    /* content-box; ๋„ˆ๋น„๋กœ ์ง€์ •๋œ ๊ฐ’์„ content ๋„ˆ๋น„๋กœ ์ ์šฉ์‹œํ‚ด   border-box; ๋„ˆ๋น„๋กœ ์ง€์ •ํ•œ ๊ฐ’์„ ์‹ค์ œ ๋„ˆ๋น„๋กœ ์ ์šฉ์‹œํ‚ด */
}

[3] top ๋ฒ„ํŠผ ๋งŒ๋“ค๊ธฐ (html)

div ํƒœ๊ทธ๋ฅผ ๋งŒ๋“ค๊ณ , css ์™€ script ์˜ ๊ฒฝ๋กœ ์„ค์ •์„ ์œ„ํ•ด id๋กœ ์ด๋ฆ„์„ ์ •ํ•ฉ๋‹ˆ๋‹ค.

<div id="parallax__top">top</div>
<!-- //parallax__top -->

[4] top ๋ฒ„ํŠผ ๋””์ž์ธํ•˜๊ธฐ (css)

๋ธŒ๋ผ์šฐ์ € ํ™”๋ฉด์— ์–ด๋–ป๊ฒŒ ๋ณด์—ฌ์ง€๋Š”์ง€ ๊ณ„์† ํ™•์ธํ•˜๋ฉด์„œ ๋””์ž์ธํ•ฉ๋‹ˆ๋‹ค.

#parallax__top {
    position: fixed;        /* ์•„๋ž˜์— ๋ณด์ด์ง€ ์•Š๊ฒŒ ๊ณ ์ •์‹œ์ผœ ๋†“๊ณ  script ๊ณผ์ •์œผ๋กœ ๋„์šฐ๊ณ ์žํ•จ */
    left: 50%;
    right: 20px;
    bottom: -220px;         /* parallax__top ์— show ๊ฐ€ ์•ˆ ๋ถ™์—ˆ์„ ๋•Œ๋Š” ์ˆจ๊ฒจ์ฃผ๊ธฐ ์œ„ํ•ด - ๊ฐ’์„ ์คŒ */
    transform: translateX(-50%);    /* top ๋ฒ„ํŠผ์ด X์ถ•(๊ฐ€๋กœ)์˜ ์ค‘๊ฐ„์— ์œ„์น˜ํ•˜๋„๋ก */
    z-index: 10000;         /* top ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ์„œ ์ž‘๋™ํ•ด์•ผ ํ•˜๋ฏ€๋กœ, ๋ ˆ์ด์•„์›ƒ์˜ ๋งจ ์œ—์ชฝ(ํ‘œ๋ฉด)์— ์œ„์น˜์‹œํ‚ด */
    width: 40px;            /* parallax__top ๊ฐ€ ์ฐจ์ง€ํ•  ์˜์—ญ์˜ ๋„ˆ๋น„ ์„ค์ • */
    height: 40px;           /* parallax__top ๊ฐ€ ์ฐจ์ง€ํ•  ์˜์—ญ์˜ ๋†’์ด ์„ค์ • */
    background: rgba(0,0,0,0.4);    /* rgba : ํˆฌ๋ช…์ƒ‰ ์ง€์ • */
    text-align: center;     /* ํ…์ŠคํŠธ ์ค‘์•™ ์ •๋ ฌ */
    line-height: 40px;      /* ์ค„๊ฐ„๊ฒฉ : ๊ธฐ์ค€ ๋†’์ด */
    color: #fff;          /* ๊ธ€์ž์ƒ‰ */
    border-radius: 50%;     /* ๋„ˆ๋น„์™€ ๋†’์ด๊ฐ€ ๊ฐ™์„ ๋•Œ ํ…Œ๋‘๋ฆฌ ๊ณก๋ฅ ์ด 50% ์ด๋ฉด ์› ๋ชจ์–‘์ด ๋งŒ๋“ค์–ด์ง */
    padding: 10px;          /* ์•ˆ์ชฝ ์—ฌ๋ฐฑ */
    cursor: pointer;        /* ์ปค์„œ ๋ชจ์–‘ ์ง€์ •*/
    transition: all 0.3s;
}

#parallax__top.show {
    bottom: 20px;           /* parallax__top ์— show ๊ฐ€ ๋ถ™์—ˆ์„ ๋•Œ ๋‚˜์˜ค๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•จ */
}

#parallax__top:hover {      /* ๋งˆ์šฐ์Šค ์˜ค๋ฒ„ ํšจ๊ณผ */
    background: #fff;
    color: #000;
}

[5] ๋‚ด์šฉ ๊ตฌ์กฐ ์งœ๊ธฐ (html)

1) main ํƒœ๊ทธ > div (contents) > section > [ span (๋ฉ”๋‰ด ๋ฒˆํ˜ธ) | h2 (๋ฉ”๋‰ด ์ด๋ฆ„) | { figure > div (์ด๋ฏธ์ง€) } | p (๋‚ด์šฉ ๊ธ€) ] * 9 (๋ฉ”๋‰ด ๊ฐฏ์ˆ˜)
2) css ์™€ script ์˜ ๊ฒฝ๋กœ ์„ค์ •์„ ์œ„ํ•ด, id ์™€ class ๋กœ ์ด๋ฆ„์„ ์ •ํ•ฉ๋‹ˆ๋‹ค.

<main id="parallax__cont">
    <div id="contents">
        <section id="section1" class="contents__item">
            <span class="contents__item__num">01</span>
            <h2 class="contents__item_title">section1</h2>
            <figure class="contents__item__imgWrap">
                <div class="contents__item__img"></div>
            </figure>
            <p class="contents__item__desc">๋‚ด์šฉ ๊ธ€ 1</p>
        </section>
        <!-- //section1 -->

        <section id="section2" class="contents__item">
            <span class="contents__item__num">02</span>
            <h2 class="contents__item_title">section2</h2>
            <figure class="contents__item__imgWrap">
                <div class="contents__item__img"></div>
            </figure>
            <p class="contents__item__desc">๋‚ด์šฉ ๊ธ€ 2</p>
        </section>
        <!-- //section2 -->

        <section id="section3" class="contents__item">
            <span class="contents__item__num">03</span>
            <h2 class="contents__item_title">section3</h2>
            <figure class="contents__item__imgWrap">
                <div class="contents__item__img"></div>
            </figure>
            <p class="contents__item__desc">๋‚ด์šฉ ๊ธ€ 3</p>
        </section>
        <!-- //section3 -->

        <section id="section4" class="contents__item">
            <span class="contents__item__num">04</span>
            <h2 class="contents__item_title">section4</h2>
            <figure class="contents__item__imgWrap">
                <div class="contents__item__img"></div>
            </figure>
            <p class="contents__item__desc">๋‚ด์šฉ ๊ธ€ 4</p>
        </section>
        <!-- //section4 -->

        <section id="section5" class="contents__item">
            <span class="contents__item__num">05</span>
            <h2 class="contents__item_title">section5</h2>
            <figure class="contents__item__imgWrap">
                <div class="contents__item__img"></div>
            </figure>
            <p class="contents__item__desc">๋‚ด์šฉ ๊ธ€ 5</p>
        </section>
        <!-- //section5 -->

        <section id="section6" class="contents__item">
            <span class="contents__item__num">06</span>
            <h2 class="contents__item_title">section6</h2>
            <figure class="contents__item__imgWrap">
                <div class="contents__item__img"></div>
            </figure>
            <p class="contents__item__desc">๋‚ด์šฉ ๊ธ€ 6</p>
        </section>
        <!-- //section6 -->

        <section id="section7" class="contents__item">
            <span class="contents__item__num">07</span>
            <h2 class="contents__item_title">section7</h2>
            <figure class="contents__item__imgWrap">
                <div class="contents__item__img"></div>
            </figure>
            <p class="contents__item__desc">๋‚ด์šฉ ๊ธ€ 7</p>
        </section>
        <!-- //section7 -->

        <section id="section8" class="contents__item">
            <span class="contents__item__num">08</span>
            <h2 class="contents__item_title">section8</h2>
            <figure class="contents__item__imgWrap">
                <div class="contents__item__img"></div>
            </figure>
            <p class="contents__item__desc">๋‚ด์šฉ ๊ธ€ 8</p>
        </section>
        <!-- //section8 -->

        <section id="section9" class="contents__item">
            <span class="contents__item__num">09</span>
            <h2 class="contents__item_title">section9</h2>
            <figure class="contents__item__imgWrap">
                <div class="contents__item__img"></div>
            </figure>
            <p class="contents__item__desc">๋‚ด์šฉ ๊ธ€ 9</p>
        </section>
        <!-- //section9 -->
    </div>
</main>
<!-- //main -->

[6] ๋‚ด์šฉ ๊ตฌ์กฐ ๋””์ž์ธํ•˜๊ธฐ (css)

๋ธŒ๋ผ์šฐ์ € ํ™”๋ฉด์— ์–ด๋–ป๊ฒŒ ๋ณด์—ฌ์ง€๋Š”์ง€ ๊ณ„์† ํ™•์ธํ•˜๋ฉด์„œ ๋””์ž์ธํ•ฉ๋‹ˆ๋‹ค.

#parallax__cont {
        max-width: 1600px;          /* ์ตœ๋Œ€ ๋„ˆ๋น„ ์„ค์ • */
        width: 98%;
        margin: 0 auto;
        /* background-color: rgba(255, 255, 255, 0.1);   ์ž„์‹œ๋กœ ์ค€ ๊ฐ’, css ์„ค์ •ํ•˜๋ฉฐ ๋ธŒ๋ผ์šฐ์ € ํ™”๋ฉด ํ™•์ธ ํ›„ ์ง€์›๋‹ˆ๋‹ค. */
    }
    
    .contents__item {
    width: 1000px;          /* section ์ด ์ฐจ์ง€ํ•  ๋„ˆ๋น„ ์„ค์ • */
    max-width: 70vw;        /* vw : ๋ทฐํฌํŠธ์˜ ๋น„์œจ๋กœ */
    margin: 30vw auto;
    /* background-color: rgba(255, 255, 255, 0.1);   ์ž„์‹œ๋กœ ์ค€ ๊ฐ’, css ์„ค์ •ํ•˜๋ฉฐ ๋ธŒ๋ผ์šฐ์ € ํ™”๋ฉด ํ™•์ธ ํ›„ ์ง€์›๋‹ˆ๋‹ค. */
    text-align: left;       /* ํ…์ŠคํŠธ ์™ผ์ชฝ ์ •๋ ฌ */
    margin-right: 0;
    position: relative;     /* contents__item__num ์˜ position ์— ๋Œ€ํ•œ ๊ธฐ์ค€์  ์„ค์ • (์ •ํ•˜์ง€ ์•Š์œผ๋ฉด ๊ธฐ๋ณธ ๊ธฐ์ค€์ ์ธ ๋ธŒ๋ผ์šฐ์ € ์™ผ์ชฝ ๋งจ ์œ„์— ๋ชจ๋‘ ๊ฒน์ณ์ง) */
    padding-top: 9vw;
}

.contents__item:nth-child(even) {       /* : ์˜ ์ž์‹ child( ~ ๋ฒˆ์งธ ) -> 2n : 2์˜ ๋ฐฐ์ˆ˜, 2n+1 : 3์˜ ๋ฐฐ์ˆ˜, even : ์ง์ˆ˜, odd : ํ™€์ˆ˜ */
    margin-left: 0;
    text-align: right;     /* ํ…์ŠคํŠธ ์˜ค๋ฅธ์ชฝ ์ •๋ ฌ */
}

.contents__item__num {
    font-size: 35vw;        /* ๊ธ€์ž ํฌ๊ธฐ */
    font-family: 'Lato';    /* ๊ธ€์ž์ฒด */
    font-weight: 100;       /* ๊ธ€์ž ๋‘๊ป˜ */
    position: absolute;     /* ์ˆซ์ž๊ฐ€ ์ด๋ฏธ์ง€์™€ ๊ฒน์น˜๋„๋ก ์œ„์น˜๋ฅผ ์„ค์ •ํ•ด์คŒ; ๋ถ€๋ชจ ์˜์—ญ์„ ๊ธฐ์ค€์œผ๋กœ ์„ค์ •๋˜์–ด์•ผ ํ•จ -> relative ์„ค์ • */
    left: -6vw;             /* ์œ„์น˜ ์„ค์ • : ์™ผ์ชฝ ๊ฐ„๊ฒฉ ์„ค์ • */
    top: -13vw;             /* ์œ„์น˜ ์„ค์ • : ์œ—์ชฝ ๊ฐ„๊ฒฉ ์„ค์ • */
    opacity: 0.07;          /* ํˆฌ๋ช…๋„ */
    z-index: -2;            /* ๋ ˆ์ด์•„์›ƒ์—์„œ ๊ฒน์ณ์ง„ ์ˆซ์ž๊ฐ€ ์ด๋ฏธ์ง€ ์•„๋ž˜(๋’ค)์— ์œ„์น˜ํ•˜๋„๋ก */
}

.contents__item:nth-child(even) .contents__item__num {
    left: auto;     /* left ๊ฐ’ ์ดˆ๊ธฐํ™”; ๊ธฐ์ค€์ ์ด right ๋กœ ๋ฐ”๋€œ */
    right: -8vw;    /* ์œ„์น˜ ์„ค์ • : ์˜ค๋ฅธ์ชฝ ๊ฐ„๊ฒฉ ์„ค์ • */
}

.contents__item_title {
    font-weight: 400;
    text-transform: capitalize;     /* ๋‹จ์–ด์˜ ์ฒซ๋ฒˆ์งธ ๊ธ€์ž๋ฅผ ๋Œ€๋ฌธ์ž๋กœ ๋ฐ”๊ฟ”์คŒ; section -> Section */
}

.contents__item__imgWrap {
    width: 100%;
    padding-bottom: 56.25%;     /* ๊ฐ€์ƒ์œผ๋กœ ์ด๋ฏธ์ง€ ์˜์—ญ์„ ๋งŒ๋“ค์–ด์คŒ -> ์ด๋ฏธ์ง€๋ฅผ ์ถœ๋ ฅํ•  ์ˆ˜ ์žˆ์Œ */
    background: #000;
    position: relative;     /* contents__item__img ์˜ position ์— ๋Œ€ํ•œ ๊ธฐ์ค€์  ์„ค์ • */
    overflow: hidden;       /* ์ด๋ฏธ์ง€๊ฐ€ ์˜์—ญ ๋ฐ–์œผ๋กœ ๋„˜์ณ ๋‚˜๊ฐ€๋Š” ๊ฒƒ์„ ๋ง‰์•„์คŒ */
    z-index: -1;
}

.contents__item__img {
    background-repeat: no-repeat;           /* ๊ธฐ๋ณธ์œผ๋กœ ์„ค์ •๋œ ์ด๋ฏธ์ง€ ๋ฐ˜๋ณต ์ฑ„์›€์„ ํ•ด์ œ */
    background-position: center center;     /* ์ด๋ฏธ์ง€๊ฐ€ ์ • ๊ฐ€์šด๋ฐ์— ์œ„์น˜ํ•˜๋„๋ก ์ง€์ • ex) left top, right center, center bottom ๋“ฑ */
    background-size: cover;                 /* ์š”์†Œ์˜ ํฌ๊ธฐ์— ๋งž์ถฐ์„œ ์ด๋ฏธ์ง€๊ฐ€ ๋ฎ์ด๋„๋ก ์ด๋ฏธ์ง€ ํฌ๊ธฐ ์„ค์ • */
    width: 110%;
    height: 110%;
    position: absolute;     /* ์œ„์น˜๋ฅผ ์„ค์ •ํ•ด์คŒ; ๋ถ€๋ชจ ์˜์—ญ์„ ๊ธฐ์ค€์œผ๋กœ ์„ค์ •๋˜์–ด์•ผ ํ•จ -> relative ์„ค์ • */
    left: -5%;
    top: -5%;
    filter: saturate(0%);   /* ์ด๋ฏธ์ง€ ํ•„ํ„ฐ : ํ‘๋ฐฑ (0% ํ‘๋ฐฑ, 50% ํ‘๋ฐฑ ๋ฐ˜ ์ƒ‰๊น” ๋ฐ˜) */
    transition: all 1s;
}

/* ๊ฐ ์„น์…˜์— ์ด๋ฏธ์ง€๋กœ ๋ฐฐ๊ฒฝ ๋„ฃ๊ธฐ */
.contents__item:nth-child(1) .contents__item__img {     /* contents__item ์˜ ์ฒซ๋ฒˆ์งธ ์ž์‹ contents__item__img ์—๊ฒŒ ์ด๋ฏธ์ง€๋ฅผ ๋„ฃ์–ด๋ผ */
    background-image: url(../assets/img/parallax01.jpg);
}

.contents__item:nth-child(2) .contents__item__img {
    background-image: url(../assets/img/parallax02.jpg);
}

.contents__item:nth-child(3) .contents__item__img {
    background-image: url(../assets/img/parallax03.jpg);
}

.contents__item:nth-child(4) .contents__item__img {
    background-image: url(../assets/img/parallax04.jpg);
}

.contents__item:nth-child(5) .contents__item__img {
    background-image: url(../assets/img/parallax05.jpg);
}

.contents__item:nth-child(6) .contents__item__img {
    background-image: url(../assets/img/parallax06.jpg);
}

.contents__item:nth-child(7) .contents__item__img {
    background-image: url(../assets/img/parallax07.jpg);
}

.contents__item:nth-child(8) .contents__item__img {
    background-image: url(../assets/img/parallax08.jpg);
}

.contents__item:nth-child(9) .contents__item__img {
    background-image: url(../assets/img/parallax09.jpg);
}

.contents__item__desc {
    font-size: 2vw;
    font-weight: 600;
    color: 	#FFFFF0;
    text-shadow: 1px 1px 1px #222;      /* ํ…์ŠคํŠธ ๊ทธ๋ฆผ์ž ํšจ๊ณผ : ๊ฐ€๋กœpx, ์„ธ๋กœpx, ๋ฒˆ์ง ์ •๋„, ์ƒ‰๊น” -> ์ด์™€ ๊ฐ™์€ ์†์„ฑ ๊ฐ’์„ ์‰ผํ‘œ๋กœ ๊ตฌ๋ถ„ํ•˜์—ฌ ์—ฌ๋Ÿฌ ๊ฐœ ์ž…๋ ฅํ•˜๋ฉด ์—ฌ๋Ÿฌ ๊ฐœ์˜ ๊ทธ๋ฆผ์ž๊ฐ€ ์ƒ๊น€*/
    line-height: 1.4;
    margin-top: -2vw;
    margin-left: -5vw;
    word-break: keep-all;       /* ์–ด์ ˆ ๋‹จ์œ„๋กœ ๋Š์–ด์ง€๋ฉฐ ์ค„๋ฐ”๊ฟˆ์ด ๋˜๋„๋ก ์„ค์ • */
}

.contents__item:nth-child(even) .contents__item__desc {
    margin-left: auto;      /* ์™ผ์ชฝ ๋ฐ”๊นฅ ์—ฌ๋ฐฑ ์ดˆ๊ธฐํ™”; ๊ธฐ์ค€์ ์ด ์˜ค๋ฅธ์ชฝ ๋ฐ”๊นฅ ์—ฌ๋ฐฑ์œผ๋กœ ๋ฐ”๋€œ */
    margin-right: -4vw;
}

[7] parallax__info ํ™•์ธ์นธ ๋งŒ๋“ค๊ธฐ (html)

1) ์‹œ๋ฉ˜ํ‹ฑ ๊ตฌ์กฐ๋ฅผ ์œ„ํ•ด aside ํƒœ๊ทธ > div ํƒœ๊ทธ > span ํƒœ๊ทธ๋ฅผ ์ž‘์„ฑํ•ฉ๋‹ˆ๋‹ค.
2) css ์™€ script ์˜ ๊ฒฝ๋กœ ์„ค์ •์„ ์œ„ํ•ด, id ์™€ class ๋กœ ์ด๋ฆ„์„ ์ •ํ•ฉ๋‹ˆ๋‹ค.

<aside id="parallax__info">
    <div class="scroll">scrollTop: <span>0</span>px</div>
    <div class="info">
        <ul>
            <li>section$ ๋†’์ด๊ฐ’ - ( browser ๋†’์ด๊ฐ’ /3 )</li>
            <li>#s1 - ( b/3 ) : <span class="offset1">0</span>px</li>
            <li>#s2 - ( b/3 ) : <span class="offset2">0</span>px</li>
            <li>#s3 - ( b/3 ) : <span class="offset3">0</span>px</li>
            <li>#s4 - ( b/3 ) : <span class="offset4">0</span>px</li>
            <li>#s5 - ( b/3 ) : <span class="offset5">0</span>px</li>
            <li>#s6 - ( b/3 ) : <span class="offset6">0</span>px</li>
            <li>#s7 - ( b/3 ) : <span class="offset7">0</span>px</li>
            <li>#s8 - ( b/3 ) : <span class="offset8">0</span>px</li>
            <li>#s9 - ( b/3 ) : <span class="offset9">0</span>px</li>
        </ul>
    </div>
</aside>
<!-- //parallax__info -->

[8] ์œ„์น˜ ํ™•์ธ์นธ ๋””์ž์ธํ•˜๊ธฐ (css)

๋ธŒ๋ผ์šฐ์ € ํ™”๋ฉด์— ์–ด๋–ป๊ฒŒ ๋ณด์—ฌ์ง€๋Š”์ง€ ๊ณ„์† ํ™•์ธํ•˜๋ฉด์„œ ๋””์ž์ธํ•ฉ๋‹ˆ๋‹ค.

#parallax__info {
    position: fixed;        /* ์™ผ์ชฝ ์•„๋ž˜์— ๊ณ ์ •์‹œํ‚ด */
    left: 20px;
    bottom: 20px;
    z-index: 2000;          /* ๊ฐ€๋ ค์ง€์ง€ ์•Š๋„๋ก ๋งจ ์œ—์ชฝ(ํ‘œ๋ฉด)์— ์œ„์น˜์‹œํ‚ด */
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    padding: 20px;
    border-radius: 10px;
}

#parallax__info li, .scroll {
    line-height: 1.4;           /* parallax__info li ์™€ .scroll ์˜ ๋‚ด์šฉ ๊ธ€์ž์— ๋Œ€ํ•œ ์ค„๊ฐ„๊ฒฉ ์„ค์ • */
}

[9] ์š”์†Œ๋“ค์ด ๋‚˜ํƒ€๋‚˜๋Š” ํšจ๊ณผ ์„ค์ •ํ•˜๊ธฐ (css)

๋ธŒ๋ผ์šฐ์ € ํ™”๋ฉด์— ์–ด๋–ป๊ฒŒ ๋ณด์—ฌ์ง€๋Š”์ง€ ๊ณ„์† ํ™•์ธํ•˜๋ฉด์„œ ๋””์ž์ธํ•ฉ๋‹ˆ๋‹ค.

/* ์š”์†Œ๊ฐ€ ํ•œ๊บผ๋ฒˆ์— ๋‚˜ํƒ€๋‚˜๋„๋ก */
    /* #contents > section {
        opacity: 0;
        transition: all 1s;
    }

    #contents > section.show {
        opacity: 1;
    } */


    /* ์š”์†Œ๊ฐ€ ๊ฐœ๋ณ„์ ์œผ๋กœ ์‹œ๊ฐ„์ฐจ๋ฅผ ๋‘๋ฉด์„œ ๋‚˜ํƒ€๋‚˜๋„๋ก */
    #contents > section .contents__item__num {        /* ๋ฐฐ๊ฒฝ ์ˆซ์ž */
        opacity: 0;
        transform: translateY(300px);           /* Y์ถ•(์•„๋ž˜์ชฝ) ์ด๋™(300px) */
        transition: all 1s 0.1s ease-in-out;
        /* all: ๋ชจ๋“  ์†์„ฑ์— ์ ์šฉ, ์ด ์‹œ๊ฐ„: 1์ดˆ, ์‹œ์ž‘ ์‹œ๊ฐ„ ์—ฐ๊ธฐ: 0.1์ดˆ, ์ง„ํ–‰์†๋„: ease-in-out = cubic-bezier  */
    }

    #contents > section .contents__item_title {
        opacity: 0;
        transform: translateX(-100px);           /* X์ถ•(- ์ด๋ฏ€๋กœ ์™ผ์ชฝ์œผ๋กœ) ์ด๋™(100px) */
        transition: all 1s 0.3s ease-in-out;
    }

    #contents > section .contents__item__imgWrap {
        opacity: 0;
        transform: translateY(200px) rotate(10deg) skew(5deg);      /* Y์ถ•(์•„๋ž˜์ชฝ) ์ด๋™(200px), ํšŒ์ „(10๋„), ๋น„ํ‹€๊ธฐ(5๋„) */
        transition: all 1s 0.6s ease-in-out;
    }

    #contents > section .contents__item__desc {
        opacity: 0;
        transform: translateX(-200px);
        transition: all 1s 0.9s ease-in-out;
    }

    /* contents ์˜ section ์— show ๊ฐ€ ๋ถ™์œผ๋ฉด contents__item__num ๋Š” */
    #contents > section.show .contents__item__num {
        opacity: 0.07;
        transform: translateY(0);
    }

    #contents > section.show .contents__item_title {
        opacity: 1;
        transform: translateX(0);
    }

    #contents > section.show .contents__item__imgWrap {
        opacity: 1;
        transform: translateY(0) rotate(0) skew(0);
    }

    #contents > section.show .contents__item__desc {
        opacity: 1;
        transform: translateX(0);
    }

    /* contents ์˜ section ์ค‘์— ์ง์ˆ˜์ธ ์ž์‹์š”์†Œ์˜ contents__item_title ์€ */
    #contents > section:nth-child(even).contents__item_title {
        transform: translateX(100px);
    }

    #contents > section:nth-child(even).show .contents__item_title {
        transform: translateX(0);
    }

    #contents > section:nth-child(even).contents__item__desc {
        transform: translateX(200px);
    }

    #contents > section:nth-child(even).show .contents__item__desc {
        transform: translateX(0);
    }

# ์ž‘๋™์˜ ์›๋ฆฌ ์ƒ๊ฐํ•˜๊ธฐ

scrollTop ์˜ ๊ฐ’์ด ๊ฐ section ์˜ Y์ถ• ๊ฐ’๋ณด๋‹ค ํฌ๊ฑฐ๋‚˜ ๊ฐ™์„ ๋•Œ, ๋ฉ”๋‰ด์˜ active ๊ฐ€ ๋‹ค์Œ section ์œผ๋กœ ์˜ฎ๊ฒจ์ ธ์•ผ ํ•ฉ๋‹ˆ๋‹ค.

ํŒจ๋Ÿด๋ž™์Šค 04 ์›๋ฆฌ

[10] ๋ณ€ํ•˜๋Š” ๊ฐ’ ๊ณ„์‚ฐํ•˜์—ฌ ์ถœ๋ ฅํ•˜๊ธฐ (script)

1) ๊ฐ’์„ ์–ด๋–ป๊ฒŒ ๊ฐ€์ ธ์™€์•ผ ํ• ์ง€ ์ƒ๊ฐํ•ด๋ณด๊ณ , ๊ณ„์‚ฐ ๋ฐฉ๋ฒ•์„ ๊ตฌ์ƒํ•ด๋ด…๋‹ˆ๋‹ค.
2) ๊ฐ’์„ ๊ฐ€์ ธ์˜ค๋Š” ๋ฐฉ๋ฒ•, ๊ณ„์‚ฐ ๋ฐฉ๋ฒ•์„ ๋‹ค์–‘ํ•˜๊ฒŒ ์ƒ๊ฐํ•ด๋ณด๊ณ  ์—ฌ๋Ÿฌ ๊ฐ€์ง€๋กœ ์ถœ๋ ฅํ•ด๋ด…์‹œ๋‹ค.

// ๋ฉ”๋‰ด ๋ฒ„ํŠผ์„ ๋ˆŒ๋ €์„ ๋•Œ, ๋ถ€๋“œ๋Ÿฝ๊ฒŒ ์ด๋™ํ•˜๋Š” ํšจ๊ณผ ์ฃผ๊ธฐ

// ๊ณ„์‚ฐ ์กฐ๊ฑด๊ณผ ์‹ ์ž…๋ ฅ
document.querySelectorAll("#parallax__nav li a").forEach( el => {      // ๋ชจ๋“  parallax__nav li a ์— ๋Œ€ํ•ด์„œ,
    el.addEventListener("click", e => {     // ๋ฉ”๋‰ด์˜ ๋งํฌ ๋ฒ„ํŠผ์„ ํด๋ฆญํ–ˆ์„ ๋•Œ,
        e.preventDefault();                 // ๋งํฌ ์ด๋™ ๋˜๋Š” ์ƒˆ๋กœ๊ณ ์นจ ๋ง‰์•„์ฃผ๊ธฐ

        // ๋ฌธ์„œ์—์„œ ์š”์†Œ์˜ ์†์„ฑ href ๋ฅผ ๋ถˆ๋Ÿฌ์˜ฌ ๋•Œ. ์Šคํฌ๋กค ์ด๋™์„ ์„ค์ •ํ•จ (๋ถ€๋“œ๋Ÿฝ๊ฒŒ ์Šคํฌ๋กค๋˜์–ด ๋„˜์–ด๊ฐ€๋„๋ก)
        document.querySelector(el.getAttribute("href")).scrollIntoView({behavior: "smooth"});
    });
});



// parallax__info ์— ๋“ค์–ด๊ฐ€๋Š” ๊ฐ’ ์ถœ๋ ฅํ•˜๊ธฐ

// ๊ณ„์‚ฐ ์กฐ๊ฑด๊ณผ ์‹ ์ž…๋ ฅ
const browser = window.innerHeight;
    
window.addEventListener("scroll", () => {           // ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์Šคํฌ๋กค ํ–ˆ์„ ๋•Œ,
    // let scrollTop = window.pageYOffset;                      // 3๊ฐ€์ง€ ์‹์€
    // let scrollTop = window.scrollY;                          // ๋ชจ๋‘ ๊ฐ™์€ ๊ฐ’์„ ๊ฐ€์ง„๋‹ค.
    // let scrollTop = document.documentElement.scrollTop;      // ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ง€์›ํ•˜๋Š” ๊ฒƒ์ด ๋‹ค๋ฅผ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์—, ์•„๋ž˜์™€ ๊ฐ™์ด ํ•ฉ์ณ์„œ ํ‘œํ˜„ํ•จ

    // scrollTop ๋ณ€์ˆ˜ ์•ˆ์— ๋ธŒ๋ผ์šฐ์ € ๊ธฐ์ค€์˜ ์„ธ๋กœ ์Šคํฌ๋กค ๊ฐ’์„ ์ €์žฅํ•˜์‹œ์˜ค.  |๋˜๋Š”|
    let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;

    // ๊ทธ๋ฆฌ๊ณ  scrollTop ๊ฐ’์„ parallax__info .scroll span ์•ˆ์— ์ถœ๋ ฅํ•˜์‹œ์˜ค.
    document.querySelector("#parallax__info .scroll span").innerText = Math.round(scrollTop);       // ์†Œ์ˆ˜์ ; ๋‚ด๋ฆผ Math.floor( ), ์˜ฌ๋ฆผ Math.ceil( ), ๋ฐ˜์˜ฌ๋ฆผ Math.round( )
    // script ๋งจ ์œ„์ชฝ์—   const scroll = document.querySelector("#parallax__info .scroll span");    ์ด๋ ‡๊ฒŒ scroll ์ƒ์ˆ˜ ์„ค์ • ํ›„,
    // scroll.innerText = Math.round(scrollTop);    ์ด๋ ‡๊ฒŒ ์ž…๋ ฅํ•ด๋„ ์ถœ๋ ฅ๋จ

    // offset ๊ฐ’ ์ถœ๋ ฅํ•˜๊ธฐ : for๋ฌธ์œผ๋กœ ๋ถˆ๋Ÿฌ์˜ค๋Š” ๋ฐฉ๋ฒ•

    // i ๊ฐ€ 1๋ถ€ํ„ฐ 9๊นŒ์ง€ ์ฆ๊ฐ€ํ•  ๋•Œ,
    for (let i=1; i<=9; i++) {
        document.querySelector(".offset" + i).innerText = document.getElementById("section" + i).offsetTop - Math.round(browser/3);
    }   // ์š”์†Œ (offset + i) ์•ˆ์— ์ถœ๋ ฅํ•˜์‹œ์˜ค. = ์•„์ด๋”” (section + i) ์š”์†Œ์˜ Y์ถ• ๊ฐ’(๋ฌธ์„œ ๊ธฐ์ค€)์—์„œ ๋ธŒ๋ผ์šฐ์ € ๋†’์ด๊ฐ’/3 ์„ ๋บ€ ๊ฐ’์„


    // ์ˆจ๊ฒจ์ ธ ์žˆ๋Š” ๋ฉ”๋‰ด๋ฐ” ๋‚˜ํƒ€๋‚ด๊ธฐ  01. scrollTop ๊ฐ’์ด 0๋ณด๋‹ค ํฐ ๊ฒฝ์šฐ์— ์ž‘๋™์‹œํ‚ค๊ธฐ
    // if(scrollTop > 0){      // scrollTop ๊ฐ’์ด 0๋ณด๋‹ค ํฌ๋ฉด,
    //     document.querySelector("#parallax__nav").classList.add("show");     // parallax__nav ์˜ ํด๋ž˜์Šค์— show ๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ 
    // } else {                                                                // ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด
    //     document.querySelector("#parallax__nav").classList.remove("show");  // parallax__nav ์˜ ํด๋ž˜์Šค์— show ๋ฅผ ์ œ๊ฑฐํ•˜์‹œ์˜ค.
    // }



    // ์ˆจ๊ฒจ์ ธ ์žˆ๋Š” top ๋ฒ„ํŠผ ๋‚˜ํƒ€๋‚ด๊ธฐ : scrollTop ๊ฐ’์ด (๋ฌธ์„œ ์ „์ฒด ๋†’์ด - ํ˜„์žฌ ๋ณด์—ฌ์ง€๋Š” ๋ธŒ๋ผ์šฐ์ € ๋†’์ด) ๋ณด๋‹ค ํฌ๊ฑฐ๋‚˜ ๊ฐ™์„ ๊ฒฝ์šฐ์— ์ž‘๋™์‹œํ‚ค๊ธฐ
    // scrollTop ๊ฐ’์ด (๋ฌธ์„œ ์ „์ฒด ๋†’์ด - ํ˜„์žฌ ๋ณด์—ฌ์ง€๋Š” ๋ธŒ๋ผ์šฐ์ € ๋†’์ด) ๋ณด๋‹ค ํฌ๊ฑฐ๋‚˜ ๊ฐ™๋‹ค๋Š” ๊ฒƒ์€ ์Šคํฌ๋กค์ด ๋ฌธ์„œ์˜ ๋์— ๋„๋‹ฌํ–ˆ๋‹ค๋Š” ์˜๋ฏธ

    if(scrollTop >= document.body.scrollHeight - window.innerHeight){       // scrollTop ๊ฐ’์ด (๋ฌธ์„œ ์ „์ฒด ๋†’์ด - ํ˜„์žฌ ๋ณด์—ฌ์ง€๋Š” ๋ธŒ๋ผ์šฐ์ € ๋†’์ด) ๊ฐ’๋ณด๋‹ค ํฌ๊ฑฐ๋‚˜ ๊ฐ™์„ ๋•Œ,
        document.querySelector("#parallax__top").classList.add("show");     // parallax__top ์˜ ํด๋ž˜์Šค์— show ๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ 
    } else {                                                                // ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด
        document.querySelector("#parallax__top").classList.remove("show");  // parallax__top ์˜ ํด๋ž˜์Šค์— show ๋ฅผ ์ œ๊ฑฐํ•˜์‹œ์˜ค.
    }
});



// top ๋ฒ„ํŠผ ๋ˆ„๋ฅด๋ฉด ์Šคํฌ๋กค์ด ๋งจ ์œ„๋กœ ์ด๋™ํ•˜๋„๋ก ์ž‘๋™์‹œํ‚ค๊ธฐ
document.querySelector("#parallax__top").addEventListener("click", () => {      // top ๋ฒ„ํŠผ์„ ํด๋ฆญํ–ˆ์„ ๋•Œ,

    window.scrollTo({left: 0, top: 0, behavior: "smooth"});
});     // ๋ธŒ๋ผ์šฐ์ €์˜ (left = x ์ขŒํ‘œ 0, top = y์ขŒํ‘œ 0) ์œ„์น˜๋กœ ์Šคํฌ๋กค์„ ์ด๋™์‹œํ‚ค๊ณ , ๋™์ž‘์€ "smooth" ๋ถ€๋“œ๋Ÿฝ๊ฒŒ ์Šคํฌ๋กค๋˜์–ด ๋„˜์–ด๊ฐ€๋„๋ก ์„ค์ •
// scrollTo() : (์ ˆ๋Œ€ ์ขŒํ‘œ) ์™ผ์ชฝ ์ƒ๋‹จ ๋ชจ์„œ๋ฆฌ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜๋Š” ์ „์ฒด ํฌ๊ธฐ์˜ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ๊ธฐ์ค€์œผ๋กœ, ์ง€์ •๋œ ์ขŒํ‘œ๋กœ ์Šคํฌ๋กค์„ ์ด๋™์‹œํ‚ด



// ์ˆจ๊ฒจ์ ธ ์žˆ๋Š” ๋ฉ”๋‰ด๋ฐ” ๋‚˜ํƒ€๋‚ด๊ธฐ  02. (ํ˜„์žฌ์˜ ์Šคํฌ๋กค ๊ฐ’ - ๊ณผ๊ฑฐ์˜ ์Šคํฌ๋กค ๊ฐ’) ์„ ์ด์šฉํ•˜์—ฌ, ์Šคํฌ๋กค์„ ์œ„๋กœ ์˜ฌ๋ฆฌ๋Š” ๊ฒฝ์šฐ์— ์ž‘๋™์‹œํ‚ค๊ธฐ

// ํ˜„์žฌ์˜ ์Šคํฌ๋กค ๊ฐ’์„ ์‹คํ–‰ํ•˜๋Š” ๋ณ€์ˆ˜
let nowScroll = true;       // ์‹คํ–‰ O
// let nowScroll = false;      // ์‹คํ–‰ X
// ํŠธ๋ฆฌ๊ฑฐ ๋ณ€์ˆ˜ : ํŠธ๋ฆฌ๊ฑฐ์˜ ๋ฐœ๋™ ์กฐ๊ฑด์„ ์ •์˜ํ•˜๋Š” ์šฉ๋„๋กœ ์‚ฌ์šฉ๋จ. ํ˜„์žฌ ๋ฐ ์ด์ „ ์‹คํ–‰์— ๋Œ€ํ•œ ์ •๋ณด์— ์ ‘๊ทผํ•จ
// trigger ๋Š” ํƒœ๊ทธ๊ฐ€ ์–ธ์ œ ์‹คํ–‰๋˜๋Š”๊ฐ€๋ฅผ ์ •ํ•˜๋Š” ํƒ€์ด๋ฐ์„ ์˜๋ฏธํ•จ (ํƒœ๊ทธ๋ฅผ ์ž‘๋™์‹œํ‚ค๋Š” ์ˆœ๊ฐ„์„ ๊ฒฐ์ •)

let lastScroll = 0;     // ๊ณผ๊ฑฐ์˜ ์Šคํฌ๋กค ๊ฐ’์„ ๋ณ€์ˆ˜๋กœ ์ง€์ •

function scrollProgress(){          // scrollProgress ํ•จ์ˆ˜๋Š”
    nowScroll = true;               // ์Šคํฌ๋กค์ด ์›€์ง์ผ ๋•Œ,

    setInterval(() => {             // setInterval ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜๋„๋ก ํ•จ (setInterval : ์ผ์ •ํ•œ ์‹œ๊ฐ„ ๊ฐ„๊ฒฉ์„ ๋‘๊ณ  ์ž‘์—…์„ ๋ฐ˜๋ณต ์‹คํ–‰ํ•  ๋•Œ ์‚ฌ์šฉ)
        if(nowScroll){              // ํ˜„์žฌ์˜ ์Šคํฌ๋กค ๊ฐ’์ด ~์ด๋ฉด
            nowScroll = false;      // ์Šคํฌ๋กค์ด ์›€์ง์˜€์„ ๋•Œ๋งŒ ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰์‹œํ‚ค๊ธฐ ์œ„ํ•จ
            hasScroll();
        }
    }, 300);     // 0.3์ดˆ ๊ฐ„๊ฒฉ (์Šคํฌ๋กคํ•  ๋•Œ๋งˆ๋‹ค ์ธ์‹ํ•˜๋ฉด ๋ฒ„๋ฒ…๊ฑฐ๋ฆฌ๋ฏ€๋กœ, ์ผ์ •ํ•œ ๊ฐ„๊ฒฉ์„ ๋‘๊ณ  ์‹คํ–‰๋  ์ˆ˜ ์žˆ๋„๋ก)
};

function hasScroll(){       // hasScroll ํ•จ์ˆ˜๋Š”
    let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;
    // scrollTop ๋ณ€์ˆ˜ ์•ˆ์— ๋ธŒ๋ผ์šฐ์ € ๊ธฐ์ค€์˜ ์„ธ๋กœ ์Šคํฌ๋กค ๊ฐ’์ด ์žˆ์„ ๋•Œ,

    // scrollTop ๊ฐ’์ด lastScroll ๊ฐ’๋ณด๋‹ค ์ž‘๋‹ค๋ฉด, ( = ์Šคํฌ๋กค์ด ์œ„๋กœ ์˜ฌ๋ผ๊ฐˆ ๋•Œ, )
    if(scrollTop < lastScroll){
        document.querySelector("#parallax__nav").classList.add("show");     // parallax__nav ์˜ ํด๋ž˜์Šค์— show ๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ 
    } else {                                                                // ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด
        document.querySelector("#parallax__nav").classList.remove("show");  // parallax__nav ์˜ ํด๋ž˜์Šค์— show ๋ฅผ ์ œ๊ฑฐํ•˜๋„๋ก ํ•จ
    }

    // ์ด์ „ ์Šคํฌ๋กค ๊ฐ’ = ํ˜„์žฌ ์Šคํฌ๋กค ๊ฐ’;
    lastScroll = scrollTop;
};

window.addEventListener("scroll", scrollProgress);          // ์Šคํฌ๋กค์ด ๋์„ ๋•Œ, scrollProgress ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•˜์‹œ์˜ค.




// ์žฌ๊ท€ํ•จ์ˆ˜: ์ž๊ธฐ ์ž์‹ ์„ ๋‹ค์‹œ ํ˜ธ์ถœํ•˜์—ฌ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋Š” ํ•จ์ˆ˜
// function scroll(){
//     alert("ok");
//     scroll();
// }

// scroll();            ์‹คํ–‰ํ•˜๋ฉด ๋ฌดํ•œ ๊ตด๋ ˆ์— ๋น ์ง


function scroll(){          // scroll ํ•จ์ˆ˜๋Š”
    let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;
    // scrollTop ๋ณ€์ˆ˜ ์•ˆ์— ๋ธŒ๋ผ์šฐ์ € ๊ธฐ์ค€์˜ ์„ธ๋กœ ์Šคํฌ๋กค ๊ฐ’์ด ์žˆ์„ ๋•Œ,

    // .contents__item(section ์˜์—ญ) ์ค‘์—์„œ
    document.querySelectorAll(".contents__item").forEach(item => {

        // scrollTop ๊ฐ’์ด { ์„น์…˜์˜ Y์ถ• ๊ฐ’(๋ฌธ์„œ ๊ธฐ์ค€) - ๋ธŒ๋ผ์šฐ์ €์˜ ๋†’์ด๊ฐ’ /3 } ๋ณด๋‹ค ํด ๋•Œ
        if(scrollTop > item.offsetTop - Math.round(browser/3)){            /* ์Šคํฌ๋กค์ด ๊ฐ ์„น์…˜ ์˜์—ญ์— ๋„๋‹ฌํ–ˆ์„ ๋•Œ ์ข€ ๋” ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ๋‚˜์˜ค๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด ๋ธŒ๋ผ์šฐ์ €์˜ ๋†’์ด๊ฐ’/3 ๋ฅผ ๋นผ์คŒ */
            item.classList.add("show");                                     /* item ์˜ ํด๋ž˜์Šค์— show ๋ฅผ ์ถ”๊ฐ€ํ•˜์‹œ์˜ค. */
        }
    });

    requestAnimationFrame(scroll);
    /* ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด ์ตœ์ ํ™”๋œ ํ•จ์ˆ˜: ์›€์ง์ž„์ด ๋ถ€๋“œ๋Ÿฝ๊ณ  ๋ฉ”๋ชจ๋ฆฌ๋„ ๋œ ์ฐจ์ง€ํ•จ, 1์ดˆ์— 60๋ฒˆ ์‹คํ–‰์‹œํ‚ด */
}

scroll();

03. ๊ฒฐ๊ณผ๋ณด๊ธฐ

728x90
๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€