1. 애플 웹사이트
인프런에서 신기한 강의를 발견함. 애플 공식웹에서 구현한 기능, 즉 스크롤 값에 따라서 글자와 사진이 커졌다 줄어들었다 사라졌다하는 기능을 가르치는 강의를 발견했다.
구매한지는 4개월이상 된거 같은데 자바스크립트 기초 문법좀 더 다지고, 알고리즘 공부하느라고 최근에 듣기 시작했다. 근데, 너무 재밌다.
어려운건 없다. 알고리즘 공부를 해서 그런가 웬만한 로직과 문법은 이해가 된다. 다만, 접근법이 참 신기해서 배울점이 많다.
그래서 하나하나 세세하게 구현하는 과정을 서술하지는 않을 것이다. 배우던 도중에 새로알게된 사실이나, 알고있었지만 나중에 유용하게 사용될것 같은 지식만 간단하게 설명하고 넘어가려고 한다.
2. HTML
global / local nav로 네이밍을 했다.
움직이는 그림을 하나로 관리할 수 있게 scroll-section 이라는 클래스로 통합하였다.
또한, 각각의 웹사이트내에서 움직이는 그림이 4가지 영역으로 나뉘어져 있다. 따라서 section에 숫자를 부여하고 id를 할당하여 4개를 개별적으로 관리할 수 있게 만들었다.
1
2
3
4
<section class="scroll-section" id="scroll-section-0"></section>
<section class="scroll-section" id="scroll-section-1"></section>
<section class="scroll-section" id="scroll-section-2"></section>
<section class="scroll-section" id="scroll-section-3"></section>
글자가 올라가지 않고 사진에 붙어있는 글자에 sticky-elem이라고 네이밍함.
sticky elem도 각자 가져와서 써야하므로 a,b,c,d class를 지정해서 세분화함.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<section class="scroll-section" id="scroll-section-0">
<h1>AirMug Pro</h1>
<div class="sticky-elem main-message a">
<p>하와이 용암에서 추출한 <br />천연 주황빛깔의 최고급 세라믹</p>
</div>
<div class="sticky-elem main-message b">
<p>
음료의 맛을 200% 살려주는 <br />
맛 강화 기능
</p>
</div>
<div class="sticky-elem main-message c">
<p>
잡고있는듯 아닌 듯한 <br />
인체공학적 손잡이
</p>
</div>
<div class="sticky-elem main-message d">
<p>
말그대로 보면 볼 수록 빠져드는 <br />
은은한 매력
</p>
</div>
</section>
- 보통 div로 감싸는 경우는 말그대로 하나로 묶어서 쉽게 정렬하기 위함이기도 하고, 한꺼번에 변화를 적용하기 위함이기도 하다.
사실 html은 별거 없다. 다음은 css를 살펴보자!