\ubbf8\ub9ac\ubcf4\uae30<\/a><\/p>\n Note<\/strong>: \uc774 \ucf54\ub4dc\ub294 \uc7a0\uc7ac\uc801\uc778 \ubc84\uadf8\uac00 \uc788\ub2e4. \uc791\uc131\ud6c4 \uc5b4\ub5a4 \ubc84\uadf8\uac00 \ubc1c\uc0dd\ud560\uc218 \uc788\uc744\uc9c0 \uc608\uc0c1\ud574\ubcf4\uc790<\/p>\n<\/blockquote>\n Note<\/strong>: \uccab\ubc88\uc9f8 \uc139\uc158\uc5d0 \ub3c4\ub2ec\uc2dc \uc560\ub2c8\uba54\uc774\ud2b8\uac00 \uc2e4\ud589\ub41c\ub2e4. \ubc18\ubcf5\ubb38 \ub0b4\uc5d0\uc11c \uc21c\ud68c\ud558\ub294 this \uc758 \uac70\ub9ac\ub97c \ube44\uad50\ud558\uace0 \uc788\uc73c\ubbc0\ub85c \uc870\uac74 \ucd94\uac00\uc2dc \ub2e4\uc74c \uc139\uc158\uc758 \uac70\ub9ac\ub97c \ube44\uad50\ud558\uc5ec \uc560\ub2c8\uba54\uc774\ud2b8\uac00 \uc2e4\ud589\ub41c\ub2e4.<\/p>\n<\/blockquote>\n \uc644\uc131\ud654\uba74<\/a><\/p>\n Note<\/strong>: section2\uc758 \uad6c\uc870\ub97c \uc218\uc815\ud55c\ub2e4.<\/p>\n<\/blockquote>\n Note<\/strong>: css\ub97c \ucd94\uac00\ud55c\ub2e4.<\/p>\n<\/blockquote>\n :::note 1\ub2e8\uacc4\uc758 \ucf54\ub4dc\ub294 \ud06c\uac8c 4\uac00\uc9c0\uc758 \ubc84\uadf8\uac00 \ubc1c\uc0dd\ud560\uc218 \uc788\ub2e4.<\/p>\n \ub9c8\uc2a4\ud06c\ud6a8\uacfc\ub97c \uad6c\ud604\ud574\ubcf4\uc790<\/p>\n<\/blockquote>\n \ubbf8\ub9ac\ubcf4\uae30<\/a><\/p>\n Note<\/strong>: 1. Note<\/strong>: \uc870\uac74\ubb38\uc744 \ucd94\uac00\ud55c\ub2e4.<\/p>\n<\/blockquote>\n \ud654\uba74\uc548\uc758 \ud654\uba74\uc774 \uc2a4\ud06c\ub864 \ub418\ub294 \ud6a8\uacfc\ub97c \ub9cc\ub4e4\uc5b4\ubcf4\uc790<\/p>\n<\/blockquote>\n Note<\/strong>: \uc544\ub798\uc758 \uc774\ubbf8\uc9c0 \ud30c\uc77c\uc744 \ub2e4\uc6b4\ub85c\ub4dc \ud55c\ub2e4 \ubbf8\ub9ac\ubcf4\uae30<\/a><\/p>\n Note<\/strong>: \ucc3d\ud06c\uae30 \ubcc0\uacbd\uc2dc \uc2a4\ud06c\ub864\uac12\uc744 \uc7ac\uacc4\uc0b0\ud558\ub294 \ud568\uc218 \ucd94\uac00 function pipScroll() \ub0b4\uc5d0 \uc791\uc131\ud55c\ub2e4.<\/p>\n<\/blockquote>\n \uc5ec\ub7ec \uc139\uc158\uc5d0\uc11c \uc0ac\uc6a9\ud560\uc218 \uc0ac\uc6a9\ud560\uc218 \uc788\ub3c4\ub85d \ud568\uc218\ub97c \uc218\uc815\ud55c\ub2e4.<\/p>\n<\/blockquote>\n \ubbf8\ub9ac\ubcf4\uae30<\/a><\/p>\n \uc139\uc158\ucd94\uac00<\/p>\n .section4 \uc120\ud0dd\uc790\uc5d0 .section5\ub97c \ucd94\uac00<\/p>\n \uc704\uc758 \ucf54\ub4dc\ub294 \ud654\uba74\uc5d0\ub294 \ubcf4\uc774\uc9c0 \uc54a\uc9c0\ub9cc \ubc84\uadf8\uac00 \uc788\ub2e4. \ubbf8\ub9ac\ubcf4\uae30<\/a><\/p>\n \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub294 gsap \uc744 \uc0ac\uc6a9<\/p>\n 1. \uc2a4\ud06c\ub864 \ud6a8\uacfc\ub97c \ub9cc\ub4e4\uc5b4\ubcf4\uc790 1.1. 1\ub2e8\uacc4-\uc139\uc1581 1.1.1. \uc88c\uc6b0\uc774\ub3d9 – css \uba54\uc11c\ub4dc \ud65c\uc6a9 \uc608\uc81c \ubbf8\ub9ac\ubcf4\uae30 Note: \uc774 \ucf54\ub4dc\ub294 \uc7a0\uc7ac\uc801\uc778 \ubc84\uadf8\uac00 \uc788\ub2e4. \uc791\uc131\ud6c4 \uc5b4\ub5a4 \ubc84\uadf8\uac00 \ubc1c\uc0dd\ud560\uc218 \uc788\uc744\uc9c0 \uc608\uc0c1\ud574\ubcf4\uc790 HTML <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" \/> <meta name="viewport" content="width=device-width, initial-scale=1.0" \/> <title>Document<\/title> <link rel="stylesheet" href="css\/jq-01.css" \/> <script src="https:\/\/code.jquery.com\/jquery-3.7.1.min.js"><\/script> <script src="js\/jq-01.js" defer><\/script> <\/head> <body> <section class="section1"> <h2>section1<\/h2> … \ub354 \uc77d\uae30<\/a><\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[],"class_list":["post-861","post","type-post","status-publish","format-standard","hentry","category-html-css-ui"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/861","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=861"}],"version-history":[{"count":0,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/861\/revisions"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=861"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=861"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
HTML<\/h4>\n
<!DOCTYPE html>\n<html lang="ko">\n <head>\n <meta charset="UTF-8" \/>\n <meta name="viewport" content="width=device-width, initial-scale=1.0" \/>\n <title>Document<\/title>\n <link rel="stylesheet" href="css\/jq-01.css" \/>\n <script src="https:\/\/code.jquery.com\/jquery-3.7.1.min.js"><\/script>\n <script src="js\/jq-01.js" defer><\/script>\n <\/head>\n\n <body>\n <section class="section1">\n <h2>section1<\/h2>\n <div class="container">\n <div class="box box1 bg2"><\/div>\n <div class="box box2 bg3"><\/div>\n <\/div>\n <\/section>\n <section class="section2">\n <h2>section2<\/h2>\n <div class="box box1 bg4"><\/div>\n <div class="box box2 bg5"><\/div>\n <\/section>\n <section class="section3">\n <h2>section3<\/h2>\n <div class="box box1 bg2"><\/div>\n <div class="box box2 bg1"><\/div>\n <\/section>\n <section class="section4">\n <h2>section4<\/h2>\n <div class="box box1 bg2"><\/div>\n <div class="box box2 bg1"><\/div>\n <\/section>\n <section class="section5">\n <h2>section5<\/h2>\n <div class="box box1 bg2"><\/div>\n <div class="box box2 bg3"><\/div>\n <\/section>\n <\/body>\n<\/html>\n<\/code><\/pre>\nCSS<\/h4>\n
* {\n margin: 0;\n padding: 0;\n}\n:root {\n --bg1: #285dfb;\n --bg2: #537dfb;\n --bg3: #7e9efc;\n --bg4: #a9befd;\n --bg5: #d4dffe;\n}\n.bg1 {\n background-color: var(--bg1);\n color: var(--bg5);\n}\n.bg2 {\n background-color: var(--bg2);\n color: var(--bg4);\n}\n.bg3 {\n background-color: var(--bg3);\n color: var(--bg3);\n}\n.bg4 {\n background-color: var(--bg4);\n color: var(--bg2);\n}\n.bg5 {\n background-color: var(--bg5);\n color: var(--bg1);\n}\nsection {\n overflow: hidden;\n text-align: center;\n width: 100%;\n height: 100vh;\n}\n\nsection h2 {\n padding: 12vw 6vw;\n}\n<\/code><\/pre>\n.box {\n display: inline-block; \/* clamp (\ucd5c\uc18c,\uae30\ubcf8,\ucd5c\ub300)\ucd5c\uc18c, \ucd5c\ub300\uac00 \uba85\ud655\ud55c \uacbd\uc6b0 \uc0ac\uc6a9\uac00\ub2a5 *\/\n width: clamp(100px, 30%, 100%);\n height: 300px;\n transition: all 2s;\n}\n.box1 {\n transform: translateX(-200%);\n}\n.box2 {\n transform: translateX(200%);\n}\n.box.in {\n transform: translateX(-200%);\n}\n<\/code><\/pre>\nJS<\/h4>\n
$(window).on('scroll', () => {\n let winSCT;\n const sections = $('section');\n winSCT = $(window).scrollTop();\n sections.each(function (idx, o) {\n $(o).addClass(`bg${idx + 1}`);\n const tg = $(this);\n const tgtop = tg.offset().top;\n if (winSCT > tgtop) {\n tg.find('.box').css('transform', 'translateX(0%)');\n } else if (winSCT > tgtop) {\n tg.find('.box').css('transform', 'translateX(0%)');\n } else if (winSCT > tgtop) {\n tg.find('.box').css('transform', 'translateX(0%)');\n }\n });\n});\n<\/code><\/pre>\n\n
1.2. 2\ub2e8\uacc4-\uc139\uc1582<\/h3>\n
1.2.1. \uc0c1\ud558\uc774\ub3d9 \uc2dc\uac04\ucc28-animate() \uba54\uc11c\ub4dc \ud65c\uc6a9<\/h4>\n
\uc608\uc81c<\/h4>\n
HTML<\/h4>\n
<section class="section2">\n <h2>section2<\/h2>\n <div class="gallery">\n <div class="box bg3"><\/div>\n <div class="box bg4"><\/div>\n <div class="box bg5"><\/div>\n <\/div>\n<\/section>\n<\/code><\/pre>\n\n
CSS<\/h4>\n
.section1 .box {\n display: inline-block;\n \/* \ucd5c\uc18c, \ucd5c\ub300\uac00 \uba85\ud655\ud55c \uacbd\uc6b0 \uc0ac\uc6a9\uac00\ub2a5 *\/\n width: clamp(100px, 30%, 100%);\n height: 300px;\n transition: all 2s;\n}\n\n.section1 .box1 {\n transform: translateX(-200%);\n}\n\n.section1 .box2 {\n transform: translateX(200%);\n}\n\n.section1 .box.in {\n transform: translateX(-200%);\n}\n\n.section2 {\n position: relative;\n}\n.section2 .gallery {\n position: relative;\n}\n.section2 .gallery .box {\n width: 15vw;\n height: 200px;\n position: absolute;\n opacity: 0;\n top: 100vw;\n}\n\n.section2 .bg3 {\n left: 10vw;\n}\n\n.section2 .bg4 {\n left: 40vw;\n}\n\n.section2 .bg5 {\n right: 10vw;\n}\n<\/code><\/pre>\n\n
JQ<\/h4>\n
const sections = $('section');\nlet speed = Math.floor(sections.outerHeight() * 0.2);\nlet topArr = [];\nlet winSCT;\n\nsections.each((idx, section) => {\n $(section).addClass(`bg${idx + 1}`);\n const sectionTop = $(section).offset().top;\n topArr.push(sectionTop);\n});\n\n$(window).on('scroll', () => {\n winSCT = $(window).scrollTop();\n if (winSCT > topArr[0] winSCT < topArr[1] - speed) {\n sections.eq(0).find('.box').css('transform', 'translateX(0%)');\n }\n if (winSCT > topArr[1] winSCT < topArr[2]) {\n sections.eq(1).find('.bg3').stop().delay(0).animate({ top: '5vw', opacity: 1 }, 500, 'swing');\n sections.eq(1).find('.bg4').stop().delay(100).animate({ top: '0vw', opacity: 1 }, 800, 'swing');\n sections.eq(1).find('.bg5').stop().delay(200).animate({ top: '-5vw', opacity: 1 }, 1100, 'swing');\n }\n});\n<\/code><\/pre>\n\n
\n
\n
\n
\n
\n:::<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n1.3. 3\ub2e8\uacc4-\uc139\uc1583<\/h3>\n
1.3.1. \ub9ac\ube4c\ud6a8\uacfc-addClass() \uba54\uc11c\ub4dc \ud65c\uc6a9<\/h4>\n
\n
\uc608\uc81c<\/h4>\n
HTML<\/h4>\n
<section class="section3">\n <div class="item">\n <h2>section3<\/h2>\n <figure>\n <img src="http:\/\/qwerew.cafe24.com\/images\/1.jpg" alt="" \/>\n <figcaption>yum yum<\/figcaption>\n <\/figure>\n <\/div>\n <div class="item">\n <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe est nostrum amet eligendi quas fugit libero cumque deserunt voluptate placeat dolorum culpa praesentium reiciendis, aliquid ad illum laborum, harum ratione.<\/p>\n <\/div>\n<\/section>\n<\/code><\/pre>\nCSS<\/h4>\n
.section3 {\n display: flex;\n color: #333;\n gap: 2rem;\n}\n\n.section3 .item:nth-child(1) {\n flex-basis: 60%;\n}\n\n.section3 .item:nth-child(2) {\n flex-basis: 40%;\n align-self: center;\n}\n\n.section3 figure {\n position: relative;\n box-shadow: -1rem 1rem 3rem -2rem rgba(0, 0, 0, 0.5);\n}\n\n.section3 figure:before {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background: var(--bg1);\n transition: clip-path 0.8s cubic-bezier(0.18, 0.89, 0.32, 1.28);\n}\n\n.section3 figure img {\n width: 100%;\n display: block;\n clip-path: inset(0 100% 0 0);\n \/* duration 0.6 delay 0.3 *\/\n transition: clip-path 0.6s 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);\n}\n\n.section3 figure figcaption {\n position: absolute;\n top: 20px;\n right: 20px;\n padding: 10px;\n font-weight: bold;\n text-transform: uppercase;\n color: #fff;\n background: var(--bg1);\n mix-blend-mode: difference;\n transition: clip-path 0.3s 0.9s cubic-bezier(0.18, 0.89, 0.32, 1.28);\n}\n\n.section3 figure::before,\n.section3 figure figcaption {\n clip-path: inset(0 0 0 100%);\n}\n\n.section3.is-animated figure::before,\n.section3.is-animated figure img,\n.section3.is-animated figure figcaption {\n clip-path: inset(0);\n}\n<\/code><\/pre>\n\n
clip-path: inset(0 100% 0 0);<\/code> inset() \ud568\uc218\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc694\uc18c\uc758 \ubcf4\uc774\ub294 \ubd80\ubd84\uc744 \uc124\uc815. inset() \ud568\uc218\ub294 \uc0ac\uac01\ud615 \ud615\ud0dc\uc758 \ud074\ub9ac\ud551 \uc601\uc5ed\uc744 \ub9cc\ub4e4\uba70, \uc778\uc218\ub294 \uac01\uac01 \uc0c1\ub2e8, \uc624\ub978\ucabd, \ud558\ub2e8, \uc67c\ucabd \ubcc0\uc5d0\uc11c \uc5bc\ub9c8\ub098 \uc548\ucabd\uc73c\ub85c \ub4e4\uc5b4\uac00\ub294\uc9c0\ub97c \ub098\ud0c0\ub0c4. \uacb0\uacfc\uc801\uc73c\ub85c \uc0c1\ub2e8\uc5d0\uc11c\ub294 \ub0b4\ubd80\ub85c \ub4e4\uc5b4\uac00\uc9c0 \uc54a\uace0(0), \uc624\ub978\ucabd\uc5d0\uc11c\ub294 \uc694\uc18c \ub108\ube44 \uc804\uccb4\ub9cc\ud07c \ub0b4\ubd80\ub85c \ub4e4\uc5b4\uac04\ub2e4(100%).
\n2. \ucc38\uc870\ub9c1\ud06c \ud074\ub9bd\ud328\uc2a4\uc0dd\uc131\uae30<\/a>
\n3. \ucc38\uc870\ub9c1\ud06c MDN<\/a>
\n4. .section3<\/code> \uc5d0 .is-animated<\/code> \ud074\ub798\uc2a4\uac00 \ucd94\uac00\ub418\uba74 clip-path\uc758 \uc88c\ud45c\ub97c \ubcc0\uacbd\ud55c\ub2e4.<\/p>\n<\/blockquote>\nJQ<\/h4>\n
...\uc0dd\ub7b5\nif (winSCT > topArr[2] && winSCT < topArr[3]-speed) {\n sections.eq(2).addClass('is-animated');\n}\n<\/code><\/pre>\n\n
1.4. 4\ub2e8\uacc4-\uc139\uc1584<\/h3>\n
1.4.1. PIP\uc2a4\ud06c\ub864<\/h4>\n
\n
\uc608\uc81c<\/h4>\n
\n
\n\uc644\uc131\ud654\uba74<\/a><\/p>\n<\/blockquote>\nHTML<\/h4>\n
<section class="section4">\n <h2>section4<\/h2>\n <div class="container">\n <div class="item left pa">\n <div class="mockup pc">\n <div class="mask"><img src="image\/project1_pc.png" alt="" class="screen" \/><\/div>\n <img src="image\/desktop.png" alt="" class="device" \/>\n <\/div>\n <div class="mockup mobile">\n <div class="mask"><img src="image\/project1_mobile.png" alt="" class="screen" \/><\/div>\n <img src="image\/mobile.png" alt="" class="device" \/>\n <\/div>\n <\/div>\n <div class="item right bg1 pa"><\/div>\n <\/div>\n<\/section>\n<\/code><\/pre>\nCSS<\/h4>\n
.section4 .container {\n display: flex;\n position: relative;\n}\n.pa {\n position: absolute;\n top: 0;\n}\n\n.item {\n height: 30vw;\n}\n.left {\n width: 60vw;\n transition: left 1s ease-in-out;\n left: -100%;\n}\n.right {\n width: 40vw;\n right: 0;\n}\n.is-animated .left {\n left: 0;\n}\n.left .mockup img,\n.left .mockup .mask {\n position: absolute;\n top: 0;\n left: 0;\n}\n.left .mockup.pc {\n margin-left: clamp(5%, 100px, 10%);\n position: relative;\n width: 60%;\n height: 100%;\n}\n\n.left .mockup.pc .mask {\n z-index: 3;\n width: 32.3vw;\n height: 61.8%;\n overflow: hidden;\n top: 6%;\n left: 5.2%;\n}\n.left .mockup.pc img.screen {\n z-index: 1;\n width: 100%;\n}\n.left .mockup.pc img.device {\n z-index: 2;\n width: 100%;\n}\n\/* mobile *\/\n.left .mockup.mobile {\n z-index: 99;\n position: relative;\n top: -76%;\n left: 58%;\n width: 20%;\n height: 60%;\n}\n\n.left .mockup.mobile .mask {\n z-index: 999;\n width: 10.5vw;\n height: 100%;\n overflow: hidden;\n top: 10.8%;\n left: 7%;\n border-radius: 16px 16px 0 0;\n}\n.left .mockup.mobile img.screen {\n z-index: 3;\n width: 100%;\n}\n.left .mockup.mobile img.device {\n z-index: 4;\n width: 100%;\n}\n<\/code><\/pre>\nJQ<\/h4>\n
$(() => {\n const sections = $('section');\n let speed = Math.floor(sections.outerHeight() * 0.3);\n let topArr = [];\n let winSCT;\n\n sections.each((idx, section) => {\n $(section).addClass(`bg${idx + 1}`);\n const sectionTop = $(section).offset().top;\n topArr.push(sectionTop);\n });\n\n \/* \uc2a4\ud06c\ub864\ud568\uc218 *\/\n $(window).on('scroll', () => {\n winSCT = $(window).scrollTop();\n if (winSCT > topArr[0] && winSCT < topArr[1] - speed) {\n sections.eq(0).find('.box').css('transform', 'translateX(0%)');\n }\n\n if (winSCT > topArr[1] && winSCT < topArr[2] - speed) {\n sections.eq(1).find('.bg3').stop().delay(100).animate({ top: 0, opacity: 1 }, 500, 'swing');\n sections.eq(1).find('.bg4').stop().delay(200).animate({ top: -100, opacity: 1 }, 800, 'swing');\n sections.eq(1).find('.bg5').stop().delay(300).animate({ top: -200, opacity: 1 }, 1100, 'swing');\n }\n\n if (winSCT > topArr[2] && winSCT < topArr[3] - speed) {\n console.log(winSCT > topArr[2] && winSCT < topArr[3]);\n sections.eq(2).addClass('is-animated');\n }\n if (winSCT > topArr[3] && winSCT < topArr[4]) {\n sections.eq(3).addClass('is-animated');\n }\n });\n pipScroll();\n function pipScroll() {\n const section = sections.eq(3);\n const devices = ['.mockup.pc', '.mockup.mobile'];\n\n $.each(devices, function (i, deviceEl) {\n const device = section.find(deviceEl);\n const screen = device.find('.mask>img');\n const mask = device.find('.mask');\n const heightDifference = screen.innerHeight() - mask.innerHeight();\n console.log(device.innerHeight());\n console.log(screen.innerHeight());\n\n device.on({\n mouseenter: function () {\n if (section.hasClass('is-animated')) {\n screen.stop().animate({ top: -heightDifference }, 1000);\n }\n },\n mouseleave: function () {\n if (section.hasClass('is-animated')) {\n screen.stop().animate({ top: 0 }, 1000);\n }\n },\n });\n });\n }\n}); \/\/jQuery\n<\/code><\/pre>\n\n
\/\/ \uc708\ub3c4\uc6b0 \ud06c\uae30\uac00 \ubcc0\uacbd\ub420 \ub54c heightDifference\ub97c \ub2e4\uc2dc \uacc4\uc0b0.\nfunction pipScroll() {\n...\uc0dd\ub7b5\n$(window).on('resize', function () {\n $.each(devices, function (i, deviceEl) {\n let device = section.find(deviceEl);\n let screen = device.find('.mask>img');\n let mask = device.find('.mask');\n let heightDifference = screen.innerHeight() - mask.innerHeight();\n\n \/\/ heightDifference\ub97c \ub2e4\uc2dc \uc124\uc815.\n device.data('heightDifference', heightDifference);\n console.log(heightDifference);\n });\n });\n }\n})\/\/jQuery\n<\/code><\/pre>\n1.4.2. PIP\uc2a4\ud06c\ub864 \ubc1c\uc804\ud615<\/h4>\n
\n
\uc608\uc81c<\/h4>\n
HTML<\/h4>\n
<section class="section5">\n <div class="container">\n <div class="item left">\n <div class="mockup pc">\n <div class="mask">\n <img src="image\/project1_pc.png" alt="" class="screen" \/>\n <\/div>\n <img src="image\/desktop.png" alt="" class="device" \/>\n <\/div>\n \n <div class="mockup mobile">\n <div class="mask"><img src="image\/project1_mobile.png" alt="" class="screen" \/><\/div>\n <img src="image\/mobile.png" alt="" class="device" \/>\n <\/div>\n \n <\/div>\n \n <div class="item right bg1"><\/div>\n <\/div>\n \n<\/section>\n<\/code><\/pre>\nCSS<\/h4>\n
.section5,\n.section4 {\n position: relative;\n}\n.section5 .container,\n.section4 .container {\n position: relative; \/* absolute\ub97c \uc81c\uc5b4\ud558\ub294 relative \ub294 \uaf2d \ud06c\uae30\ub97c \ub123\uc744\uac83 *\/\n width: 100%;\n height: 100%;\n}\n.section5 .item,\n.section4 .item {\n position: absolute;\n top: 0;\n height: 30vw;\n}\n.section5 .item.left,\n.section4 .item.left {\n width: 60%; \/* *\/\n transition: left 1s ease-in-out;\n left: -100%;\n}\n.section5.is-animated .item.left,\n.section4.is-animated .item.left {\n left: 0%;\n transition: left 2s ease-in-out;\n}\n\n.section5 .item.right,\n.section4 .item.right {\n width: 40%;\n right: 0;\n}\n.section5 .mockup.pc .mask,\n.section4 .mockup.pc .mask {\n z-index: 8;\n width: 32.3vw;\n height: 61.8%;\n overflow: hidden;\n left: 5.2%;\n top: 6%;\n}\n<\/code><\/pre>\nJS<\/h4>\n
const win = $(window);\nconst sections = $('section');\nlet speed = Math.floor(win.height() * 0.5);\nlet topArr = [];\nlet winSCT;\nconsole.log(speed);\n\/\/sections.offsetTop\nsections.each(function (i, o) {\n const sectionTop = $(o).offset().top;\n topArr.push(sectionTop);\n});\nwin.on('scroll', () => {\n winSCT = win.scrollTop();\n if (winSCT > topArr[0] && winSCT < topArr[1]) {\n sections.eq(0).addClass('is-animated').siblings().removeClass('is-animated');\n }\n if (winSCT > topArr[1] - speed && winSCT < topArr[2]) {\n sections.eq(1).addClass('is-animated').siblings().removeClass('is-animated');\n }\n if (winSCT > topArr[2] - speed && winSCT < topArr[3]) {\n sections.eq(2).addClass('is-animated').siblings().removeClass('is-animated');\n }\n if (winSCT > topArr[3] - speed && winSCT < topArr[4]) {\n sections.eq(3).addClass('is-animated').siblings().removeClass('is-animated');\n pipScroll();\n console.log(topArr[4], winSCT);\n }\n if (winSCT > topArr[4] - speed) {\n sections.eq(4).addClass('is-animated').siblings().removeClass('is-animated');\n pipScroll();\n }\n});\n\nfunction pipScroll() {\n const devices = ['.mockup.pc', '.mockup.mobile'];\n $.each(devices, function (i, deviceEl) {\n const device = $(deviceEl);\n const screen = device.find('.screen');\n const mask = device.find('.mask');\n const hightDifference = screen.innerHeight() - mask.innerHeight();\n console.log('hightDifference', hightDifference);\n device.on({\n mouseenter: function () {\n screen.stop().animate({ top: -hightDifference }, 1000);\n },\n mouseleave: function () {\n screen.stop().animate({ top: 0 }, 1000);\n },\n });\n });\n}\nwin.on('resize', function () {\n pipScroll();\n});\n<\/code><\/pre>\n\n
['.mockup.pc', '.mockup.mobile']<\/code> \uc5d0\ub294 \ub2e8\uc77c \uc694\uc18c\uac00 \ud560\ub2f9 \ub418\uc5c8\uc73c\ubbc0\ub85c\ub450\uac1c\uc758 mockup.pc \uac00 \ucd94\uac00 \ub420 \uacbd\uc6b0 \uac01\uac01 \ub3d9\uc791\ud558\uc9c0 \uc54a\ub294\ub2e4. \uc774\uac83\uc744 \uc81c\uc774\ucffc\ub9ac \uac1d\uccb4\ub85c \ubcc0\uacbd\ud558\uba74 \uc5ec\ub7ec\uac1c \uc694\uc18c\ub97c \uc54c\uc544\uc11c \ubc18\ubcf5 \ucc98\ub9ac \ud558\uae30 \ub54c\ubb38\uc5d0 \uac01\uac01 \ub2e4\ub978 \uc774\ubca4\ud2b8\ub97c \ucc98\ub9ac\ud560\uc218 \uc788\ub2e4. \uc544\ub798\ucc98\ub7fc \uc218\uc815\ud558\uc790<\/p>\n<\/blockquote>\n function pipScroll() {\n \/\/const devices = ['.mockup.pc', '.mockup.mobile'];\n const devices = $('.mockup.pc, .mockup.mobile');\n \/\/$.each(devices, function (i, deviceEl) {\n devices.each(function (i, deviceEl) {\n let device = $(this);\n let screen = device.find('.mask>img');\n<\/code><\/pre>\n1.5. \uac00\ub85c \uc2a4\ud06c\ub864 \ud6a8\uacfc<\/h3>\n
\uc608\uc81c<\/h4>\n
HTML<\/h4>\n
<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" \/>\n <meta http-equiv="X-UA-Compatible" content="IE=edge" \/>\n <meta name="viewport" content="width=device-width, initial-scale=1.0" \/>\n <title><\/title>\n <\/head>\n\n <body>\n <main class="container">\n <section id="section1" class="item">\n <h2 class="num">01<\/h2>\n <\/section>\n <section id="section2" class="item">\n <h2 class="num">02<\/h2>\n <\/section>\n <section id="section3" class="item">\n <h2 class="num">03<\/h2>\n <\/section>\n <section id="section4" class="item">\n <h2 class="num">04<\/h2>\n <\/section>\n <section id="section5" class="item">\n <h2 class="num">05<\/h2>\n <\/section>\n <section id="section6" class="item">\n <h2 class="num">06<\/h2>\n <\/section>\n <section id="section7" class="item">\n <h2 class="num">07<\/h2>\n <\/section>\n <section id="section8" class="item">\n <h2 class="num">08<\/h2>\n <\/section>\n <section id="section9" class="item">\n <h2 class="num">09<\/h2>\n <\/section>\n <\/main>\n <\/body>\n<\/html>\n<\/code><\/pre>\nCSS<\/h4>\n
.container {\n position: fixed;\n left: 0;\n top: 0;\n display: flex;\n}\n.item {\n width: 100vw;\n height: 100vh;\n position: relative;\n}\n#section1 {\n background-color: #111;\n}\n#section2 {\n background-color: #222;\n}\n#section3 {\n background-color: #333;\n}\n#section4 {\n background-color: #444;\n}\n#section5 {\n background-color: #555;\n}\n#section6 {\n background-color: #666;\n}\n#section7 {\n background-color: #777;\n}\n#section8 {\n background-color: #888;\n}\n#section9 {\n background-color: #999;\n}\n\n.num {\n position: absolute;\n bottom: 20px;\n right: 20px;\n color: #fff;\n font-size: 20vw;\n z-index: 10000;\n}\n<\/code><\/pre>\nJS<\/h4>\n
<script src="https:\/\/unpkg.com\/gsap@3\/dist\/gsap.min.js"><\/script><\/code><\/p>\nconst cont = document.querySelector('.container');\nconst item = document.querySelector('.item');\n\nfunction scroll() {\n let scrollTop = window.scrollY;\n let offsetLeft = cont.offsetWidth;\n document.body.style.height = offsetLeft + 'px';\n\n let viewWidth = offsetLeft - window.innerWidth;\n let viewHeight = offsetLeft - window.innerHeight;\n let goLeft = scrollTop * (viewWidth \/ viewHeight);\n\n gsap.to(cont, { left: -goLeft });\n\n requestAnimationFrame(scroll);\n}\nscroll();\n\nwindow.addEventListener('resize', scroll);\n<\/code><\/pre>\nJQ<\/h4>\n
const cont = $('.container');\nfunction scroll() {\n let scrollTop = $(window).scrollTop();\n let offsetLeft = cont.outerWidth();\n $('body').css('height', offsetLeft + 'px');\n\n let viewWidth = offsetLeft - $(window).innerWidth();\n let viewHeight = offsetLeft - $(window).innerHeight();\n let goLeft = scrollTop * (viewWidth \/ viewHeight);\n\n cont.css('left', -goLeft);\n console.log(scrollTop, offsetLeft, viewWidth, goLeft, viewHeight);\n}\nscroll();\n$(window).on({\n resize: function () {\n scroll();\n },\n scroll: function () {\n scroll();\n },\n});\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"