Apple Watch

one_kยท2022๋…„ 11์›” 19์ผ
0

ํฌํŠธํด๋ฆฌ์˜ค

๋ชฉ๋ก ๋ณด๊ธฐ
4/6
post-thumbnail

๐Ÿ›  ์• ํ”Œ์›Œ์น˜

  • ์‚ฌ์ดํŠธ๋ช… : ์• ํ”Œ์›Œ์น˜
  • ์ œ์ž‘๊ธฐ๊ฐ„ : 22.11.02 ~ 22.11.05 (4์ผ ์†Œ์š”)
  • ์‚ฌ์šฉ์–ธ์–ด : html, css
  • ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ : jQuery, gsap
  • ๋ถ„๋ฅ˜ : pc์ ์‘ํ˜•, ๋ฆฌ๋‰ด์–ผ

๐Ÿ“Œ Review!!

1. ๋งˆ์šฐ์Šค์—๋”ฐ๋ผ ์›€์ง์ด๋Š” ์• ํ”Œ์›Œ์น˜

๐Ÿ”Ž ์ฝ”๋“œ๋ถ„์„

$('.sc-visual').mousemove(function(e){
  width = $(this).outerWidth()/2;
  x = (e.clientX - width)/7
  gsap.to('.image-area',{
    x:x
  })
})

๐Ÿ’ฃ ๋ฌธ์ œ์ 

๋งˆ์šฐ์Šค์—๋”ฐ๋ผ ์ด๋ฏธ์ง€๊ฐ€ ๋„ˆ๋ฌด ๋งŽ์ด ์›€์ง์—ฌ์„œ ์ž์—ฐ์Šค๋Ÿฝ์ง€ ๋ชปํ–ˆ๋‹ค..

๐Ÿ’Š ํ•ด๊ฒฐ๋ฐฉ๋ฒ•

width๊ฐ’์„ ๊ฐ€์ ธ์˜ฌ ๋•Œ outerWidth()์— 2๋ฅผ ๋‚˜๋ˆ ์ค˜์•ผ ์‹œ์ž‘์ด ์ค‘๊ฐ„์ ์—์„œ ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•  ์ˆ˜ ์žˆ๊ณ ,
x์ขŒํ‘œ๋Š” clientX์—์„œ width๊ฐ’์„ ๋นผ์ฃผ๋ฉด ๋งˆ์šฐ์Šค๊ฐ€ ์ขŒ์šฐ๋กœ ์ด๋™์‹œ ์ค‘๊ฐ„์ง€์ ์—์„œ ์ด๋ฏธ์ง€๊ฐ€ width๊ฐ’๋งŒํผ
์›€์ง์ด๋Š”๊ฑธ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค.
์ด๋•Œ ๋‚˜๋ˆ„๋Š” ์ˆ˜์น˜๊ฐ€ ๋†’์„์ˆ˜๋ก ํญ์ด ์ข์•„์ ธ์„œ ์ด๋ฏธ์ง€๊ฐ€ ์กฐ๊ธˆ์”ฉ ์›€์ง์ด๊ฒŒ ๋œ๋‹ค.

2. gsap.timeline์œผ๋กœ ์ค€ ํ…์ŠคํŠธ ๋ชจ์…˜

๐Ÿ”Ž ์ฝ”๋“œ๋ถ„์„

const aboutAni = gsap.timeline({
    scrollTrigger:{
      trigger: ".sc-about",
      start: "top top",
      end: "+=2000%",
      scrub: 5,
      pin: true,
    },
  })
  aboutAni
  .addLabel('a')
  .to('.sc-about .txt-box1 .txt2.normal span',{yPercent:-100},'a')
  .to('.sc-about .txt-box1 .txt2.revers span',{yPercent:100},'a')
  .to('.sc-about .txt-box1 .txt3.normal span',{yPercent:-100},'a')
  .to('.sc-about .txt-box1 .txt3.revers span',{yPercent:100},'a')
  .to('.sc-about .txt-box1 p',{opacity:1, stagger:0.3}) 
  .to('.sc-about .txt-box1 p',{opacity:0})  
  .to('.sc-about .txt-box2',{'visibility': 'visible', opacity:1})
  .to('.sc-about .txt-box2 span',{opacity:1,yPercent:-100,stagger:0.2})
  .to('.sc-about .txt-box2 span',{opacity:0.1})
  .addLabel('b')
  .to('.sc-about .watch-area',{yPercent: -100, opacity:1})
  .to('.sc-about .watch-area .watch-box',{yPercent: -100, scale: 1, opacity:1,duration:2}, 'b+=1')
  .to('.sc-about .watch-area .screen-item',{opacity:1,stagger:7}, 'b+=2')
  .to('.sc-about .watch-area .title1 strong span',{yPercent: -100,opacity:1,stagger: 2, duration:2}, 'b+=3')
  .to('.sc-about .watch-area .title1 strong span',{opacity:0}, 'b+=9')
  .to('.sc-about .watch-area .title2 strong span',{yPercent: -100,opacity:1,stagger: 2, duration:2}, 'b+=10')
  .to('.sc-about .watch-area .title2 strong span',{opacity:0}, 'b+=16')
  .to('.sc-about .watch-area .title3 strong span',{yPercent: -100,opacity:1,stagger: 2, duration:2}, 'b+=17')
  .to('.sc-about .watch-area .title3 strong span',{opacity:0}, 'b+=23')
  .to('.sc-about .watch-area .watch-box',{yPercent: -100, opacity:0}, 'b+=24')

gsap.timeline์€ ์ˆœ์ฐจ์ ์œผ๋กœ ์ด๋ฒคํŠธ๋ฅผ ์ ์šฉ๋  ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“ค์–ด์ค€๋‹ค.
addLabel๋ฉ”์„œ๋“œ๋Š” ํ•˜๋‚˜๋กœ ๋ฌถ์„ ์ˆ˜ ์žˆ๊ณ  ์‹œ๊ฐ„์ฐจ๋กœ ๋‹ค๋ฅธ ๋ชจ์…˜์ด ๋‚˜ํƒ€๋‚˜๊ฒŒ ์กฐ์ ˆํ•  ์ˆ˜ ์žˆ๋‹ค.
scrub: ์Šคํฌ๋กค์‹œ์—๋„ ๊ฐ™์ด ๋”ฐ๋ผ ์›€์ง์ด๊ณ  ์ˆ˜์น˜๊ฐ€ ๋†’์„์ˆ˜๋ก ๋ถ€๋“œ๋Ÿฝ๊ฒŒ ์ ์šฉ๋œ๋‹ค.
pin: trigger์˜์—ญ์—์„œ ๊ณ ์ •์‹œ์ผœ์ฃผ๋Š” ์—ญํ• ์„ ํ•œ๋‹ค.

3. ๊ณตํ†ต element์š”์†Œ์— ๋ชจ์…˜์„ ์ค„๋• eachํ•จ์ˆ˜

๐Ÿ”Ž ์ฝ”๋“œ๋ถ„์„

<section class="sc-quik-look">
  <h2 class="headline">ํ•œ๋ˆˆ์— ๋ณด๊ธฐ</h2>
  <div class="group-look ultra">
    <div class="img-area">
      <p class="logo"><img src="./assets/images/logo-watch-ultra.png" alt="์• ํ”Œ์›Œ์น˜ ์šธํŠธ๋ผ ๋กœ๊ณ "></p>
      <p class="watch-img"><img src="./assets/images/img-watch-ultra.png" alt="์• ํ”Œ์›Œ์น˜ ์šธํŠธ๋ผ ์ด๋ฏธ์ง€"></p>
    </div>
    <div class="feature-area">
      <div class="feature-box">
        <strong class="title">๊ฐ•๋ ฅํ•œ<br />๊ฑด๊ฐ• ๊ธฐ๋Šฅ.</strong>
        <ul class="feature-list">
          <li class="feature-item temperature">
            <em>์ƒˆ๋กญ๊ฒŒ ์„ ๋ณด์ด๋Š” โ€˜์†๋ชฉ ์˜จ๋„ ๊ฐ์ง€โ€™ ๊ธฐ๋Šฅ.</em>
            <p>ํ˜์‹ ์ ์ธ ์ƒˆ ์„ผ์„œ๊ฐ€ ๋‹น์‹ ์ด ์ž๋Š” ๋™์•ˆ ์†๋ชฉ ์˜จ๋„๋ฅผ ์ถ”์ ํ•ด์ค๋‹ˆ๋‹ค.</p>
          </li>
          <li class="feature-item sleep">
            <em>์ˆ˜๋ฉด ์ถ”์ .</em>
            <p>๋‹น์‹ ์˜ ์ˆ˜๋ฉด ์ƒํƒœ๋ฅผ ๊ธฐ๋กํ•ด์ค๋‹ˆ๋‹ค. โ€˜REM ์ˆ˜๋ฉดโ€™, โ€˜์ฝ”์–ด ์ˆ˜๋ฉดโ€™ ๊ทธ๋ฆฌ๊ณ  โ€˜๊นŠ์€ ์ˆ˜๋ฉดโ€™์— ๊ฐ๊ฐ ์–ผ๋งˆ๋‚˜ ๋จธ๋ฌด๋Š”์ง€๋ฅผ ํŒŒ์•…ํ•˜๊ณ , ์–ธ์ œ ์ž ์„ ๊นฌ ๊ฒƒ์œผ๋กœ ๋ณด์ด๋Š”์ง€ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.</p>
          </li>
          <li class="feature-item ecg">
            <em>์‹ฌ์ „๋„.</em>
            <p>โ€˜์‹ฌ์ „๋„โ€™ ์•ฑ์€ ์ „๊ธฐ ์‹ฌ๋ฐ• ์„ผ์„œ๋ฅผ ์‚ฌ์šฉํ•ด ์‹ฌ๋ฐ•์ˆ˜์™€ ๋ฐ•๋™์„ ๊ธฐ๋กํ•œ ๋‹ค์Œ, ๋ถˆ๊ทœ์น™ํ•œ ์‹ฌ์žฅ ๋ฐ•๋™์˜ ์ผ์ข…์ธ ์‹ฌ์žฅ์„ธ๋™์— ํ•ด๋‹นํ•˜๋Š”์ง€๋ฅผ ํŒ๋ณ„ํ•ด ์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.</p>
          </li>
          <li class="feature-item heart">
            <em>๋ถˆ๊ทœ์น™ํ•œ ์‹ฌ์žฅ ๋ฐ•๋™ ์•Œ๋ฆผ.</em>
            <p>๋น„์ •์ƒ์ ์œผ๋กœ ๋†’๊ฑฐ๋‚˜ ๋‚ฎ์€ ์‹ฌ๋ฐ•์ˆ˜ ๋ฐ ๋ถˆ๊ทœ์น™ํ•œ ์‹ฌ์žฅ ๋ฐ•๋™์ด ๋ณด์ด๋ฉด ์•Œ๋ฆผ์„ ๋ณด๋‚ด์ค๋‹ˆ๋‹ค.</p>
          </li>
          <li class="feature-item oxygen">
            <em>ํ˜ˆ์ค‘ ์‚ฐ์†Œ.</em>
            <p>ํ˜ˆ์ค‘ ์‚ฐ์†Œ ํฌํ™”๋„๋ฅผ ์ธก์ •ํ•ด ๋‹น์‹ ์˜ ์ „๋ฐ˜์ ์ธ ๊ฑด๊ฐ• ์ƒํƒœ๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ์ค‘์š”ํ•œ ์ง€ํ‘œ์— ๋Œ€ํ•œ ํ†ต์ฐฐ์„ ์–ป์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.</p>
          </li>
        </ul>
      </div>
      <div class="feature-box">
        <strong class="title">ํ˜์‹ ์ ์ธ<br />์•ˆ์ „ ๊ธฐ๋Šฅ.</strong>
        <ul class="feature-list">
          <li class="feature-item sos">
            <em>์ƒˆ๋กญ๊ฒŒ ์„ ๋ณด์ด๋Š” โ€˜์ถฉ๋Œ ๊ฐ์ง€โ€™ ๊ธฐ๋Šฅ.</em>
            <p>์ƒˆ๋กœ ์ถ”๊ฐ€๋œ ์„ผ์„œ์™€ ๋จธ์‹  ๋Ÿฌ๋‹ ์•Œ๊ณ ๋ฆฌ์ฆ˜์ด ์‹ฌ๊ฐํ•œ ์ž๋™์ฐจ ์ถฉ๋Œ ๋ฐœ์ƒ ์‹œ ์ด๋ฅผ ๊ฐ์ง€ํ•˜์—ฌ ์ž๋™์œผ๋กœ ์‘๊ธ‰ ์„œ๋น„์Šค์— ์—ฐ๋ฝํ•ฉ๋‹ˆ๋‹ค. Apple Watch Ultra๊ฐ€ ์‘๊ธ‰์˜๋ฃŒ ์ƒ๋‹ด์›์—๊ฒŒ ๋‹น์‹ ์˜ ์œ„์น˜๋ฅผ ์•Œ๋ ค์ฃผ๊ณ  ๊ธด๊ธ‰ ์—ฐ๋ฝ์ฒ˜์— ์•Œ๋ฆผ๊นŒ์ง€ ์ „์†กํ•ด์ฃผ์ฃ .ํ˜์‹ ์ ์ธ ์ƒˆ ์„ผ์„œ๊ฐ€ ๋‹น์‹ ์ด ์ž๋Š” ๋™์•ˆ ์†๋ชฉ ์˜จ๋„๋ฅผ ์ถ”์ ํ•ด์ค๋‹ˆ๋‹ค.</p>
          </li>
          <li class="feature-item fall">
            <em>๋„˜์–ด์ง ๊ฐ์ง€.</em>
            <p>์ง‘์— ์žˆ์„ ๋•Œ๋“  ๋ฐ–์œผ๋กœ ๋ชจํ—˜์„ ๋– ๋‚ฌ์„ ๋•Œ๋“ , ๋„˜์–ด์ง์ด ๊ฐ์ง€๋˜๊ณ  ๋‹น์‹ ์ด ์‘๋‹ตํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ ์‘๊ธ‰ ์„œ๋น„์Šค์— ์ž๋™์œผ๋กœ ์ „ํ™”๋ฅผ ๊ฑธ์–ด์ค๋‹ˆ๋‹ค.</p>
          </li>
          <li class="feature-item emergency">
            <em>๊ธด๊ธ‰ ๊ตฌ์กฐ ์š”์ฒญ.</em>
            <p>์ธก๋ฉด ๋ฒ„ํŠผ์„ ๊ธธ๊ฒŒ ๋ˆ„๋ฅด๋ฉด ์‘๊ธ‰ ์„œ๋น„์Šค์— ์ „ํ™”๋ฅผ ๊ฑธ์–ด ๋‹น์‹ ์˜ ์œ„์น˜๋ฅผ ์•Œ๋ ค์ค๋‹ˆ๋‹ค. ๊ฒŒ๋‹ค๊ฐ€ ํ•œ๋™์•ˆ์€ ๋‹น์‹ ์˜ ์œ„์น˜๊ฐ€ ๋ฐ”๋€” ๋•Œ๋งˆ๋‹ค ๊ธด๊ธ‰ ์—ฐ๋ฝ์ฒ˜๋กœ ์—…๋ฐ์ดํŠธ ์‚ฌํ•ญ์„ ์ „๋‹ฌํ•˜์ฃ .</p>
          </li>
        </ul>
      </div>
      <div class="feature-box">
        <strong class="title">์…€๋ฃฐ๋Ÿฌ๋กœ<br />์Šค๋งˆํŠธํ•œ ์†Œํ†ต.</strong>
        <ul class="feature-list">
          <li class="feature-item call">
            <em>์ „ํ™” ๋ฐ ๋ฌธ์ž ์†ก์ˆ˜์‹ .</em>
            <p>์…€๋ฃฐ๋Ÿฌ ๊ธฐ๋Šฅ์€ ๋ชจ๋“  ๋ชจ๋ธ์— ๊ธฐ๋ณธ์œผ๋กœ ํƒ‘์žฌ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋™ํ†ต์‹ ์‚ฌ์— ๊ฐ€์ž…ํ•˜๋ฉด ์ตœ๋Œ€ 18์‹œ๊ฐ„์˜ ์˜จ์ข…์ผ ๊ฐ€๋Š” ๋ฐฐํ„ฐ๋ฆฌ ์‚ฌ์šฉ ์‹œ๊ฐ„ ๋™์•ˆ LTE๋กœ ์†Œํ†ตํ•  ์ˆ˜ ์žˆ์ฃ .</p>
          </li>
          <li class="feature-item music">
            <em>์Œ์•….</em>
            <p>์‚ฐ ์ •์ƒ, ํ˜น์€ ํ—ฌ์Šค์žฅ, ์–ด๋””์— ์žˆ๋“ ์ง€ ์ข‹์•„ํ•˜๋Š” ์Œ์•…๊ณผ ํŒŸ์บ์ŠคํŠธ๋ฅผ ์ŠคํŠธ๋ฆฌ๋ฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.</p>
          </li>
          <li class="feature-item map">
            <em>์ง€๋„.</em>
            <p>์–ธ์ œ ๋ฐฉํ–ฅ์„ ํ‹€์–ด์•ผ ํ•˜๋Š”์ง€ ์†๋ชฉ์—์„œ ๋ฐ”๋กœ ๊ธธ ์•ˆ๋‚ด๋ฅผ ๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.</p>
          </li>
          <li class="feature-item wallet">
            <em>์ง€๊ฐ‘.</em>
            <p>์‹œ๊ณ„๋ฅผ ํ™ˆ ํ‚ค, ์ž๋™์ฐจ ํ‚ค ๋˜๋Š” ํƒ‘์Šน๊ถŒ์„ ๋Œ€์‹ ํ•˜๋Š” ์šฉ๋„๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.</p>
          </li>
          <li class="feature-item siri">
            <em>Siri.</em>
            <p>๊ธธ ์•ˆ๋‚ด, ๋‚ ์”จ ํ™•์ธ, ๋…ธ๋ž˜ ์žฌ์ƒ ๋“ฑ Apple Watch์—์„œ ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฑฐ์˜ ๋ชจ๋“  ์ผ๋“ค์„ Siri์—๊ฒŒ ๋ถ€ํƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.</p>
          </li>
          <li class="feature-item store">
            <em>App Store.</em>
            <p>Apple Watch์˜ App Store์—์„œ ๊ฑฐ์˜ ๋ชจ๋“  ์Šคํฌ์ธ ๋‚˜ ํ™œ๋™์— ํ•„์š”ํ•œ ์•ฑ์„ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. iPhone์„ ๊บผ๋‚ด์ง€ ์•Š๊ณ ๋„ ์†๋ชฉ์—์„œ ๋‹ค์–‘ํ•œ ์•ฑ์„ ์‹œ๊ณ„์— ๋ฐ”๋กœ ๋‹ค์šด๋กœ๋“œํ•  ์ˆ˜ ์žˆ์ฃ .</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>
// sc-quik-look ์•„์ดํ…œ ์• ๋‹ˆ๋ฉ”์ด์…˜
$('.sc-quik-look .feature-list').each(function(i, el){
  child = $(this).find('.feature-item');
  gsap.from(child,0.7,{
    scrollTrigger:{
      trigger: el,
      start: "top 80%",
      end: "bottom 60%",
    },
    stagger: 0.2,
    opacity: 0,
    yPercent: 20,
  })
})

๊ณตํ†ต๋˜๋Š” element์š”์†Œ๋Š” each()ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•ด ๋ชจ์…˜์„ ์ข€ ๋” ์‰ฝ๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค.
jQuery each()ํ•จ์ˆ˜๋Š” object ์™€ ๋ฐฐ์—ด ๋ชจ๋‘์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ผ๋ฐ˜์ ์ธ ๋ฐ˜๋ณต ํ•จ์ˆ˜์ด๋ฉฐ,
์ฒซ๋ฒˆ์งธ ๋งค๊ฐœ๋ณ€์ˆ˜๋Š” ๊ฐ์ฒด๋‚˜ ๋ฐฐ์—ด์„ ๋ฐ›๊ณ  ๋‘๋ฒˆ์งธ ๋งค๊ฐœ๋ณ€์ˆ˜๋Š” ์ฝœ๋ฐฑํ•จ์ˆ˜๋ฅผ ๋ฐ›๋Š”๋‹ค.
์ฝœ๋ฐฑํ•จ์ˆ˜์˜ ์ธ์ž๋กœ๋Š” index์™€ ๊ฐ’์„ ๋ฐ›์•„์˜ฌ์ˆ˜์žˆ๋‹ค.

4. ํ…์ŠคํŠธ ๊ทธ๋ผ๋ฐ์ด์…˜ ํšจ๊ณผ

๐Ÿ”Ž ์ฝ”๋“œ๋ถ„์„

.sc-about .watch-area .title-box .title span {
  display: block;
  font-size: 70px;
  font-weight: bold;
  line-height: 1.4;
  white-space: nowrap;
  background: linear-gradient(to right, #A5FECB, #20BDFF, #5433FF);
  color: transparent;
  -webkit-background-clip: text;
  transform: translateY(100%);
  opacity: 0;
}

์• ํ”Œ์‚ฌ์ดํŠธ์—์„œ ์ฝ”๋“œ๋ฅผ ๋ณด๊ณ  ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค!
background์— ๊ทธ๋ผ๋ฐ์ด์…˜์„ ๋„ฃ์–ด์ฃผ๊ณ ,
color๋Š” transparent;๋กœ ํˆฌ๋ช…ํ•˜๊ฒŒ ๋งŒ๋“ค์–ด์ค€๋‹ค.
๋งˆ์ง€๋ง‰์œผ๋กœ -webkit-background-clip์€ background๋ฅผ ์–ด๋””๊นŒ์ง€ ์ ์šฉ์‹œํ‚ค๋Š”์ง€์— ๋Œ€ํ•œ ๊ฒƒ์ด๋‹ค.
๊ฐ’์œผ๋กœ text๋ฅผ์ฃผ๋ฉด ํ…์ŠคํŠธ๋งŒ ์ ์šฉ์‹œํ‚จ๋‹ค๋Š” ๋œป์ด๋‹ค.
ํฌ์ธํŠธ ์ฃผ๊ธฐ ์ข‹์€ ํšจ๊ณผ์ธ ๊ฒƒ ๊ฐ™๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€