연습문제
- 다음과 같은 HTML 문서와 JavaScript 프로그램을 작성하라.
- 특정 위치까지 화면이 스크롤되면 지정한 컨텐츠를 화면에 표시
풀이
1. 브라우저가 스크롤되면
2. 스크롤된 위치를 기반으로 "지정한 위치"를 구한다.
3. .section 요소의 img 요소들 중에서
4. 위에서 계산한 "지정한 위치"보다 위로 올라간 이미지 요소는 화면에 나타나도록 하고
5. 위에서 계산한 "지정한 위치"보다 아래에 있는 이미지 요소는 화면에 나타나도록 한다.
● HTML
<body>
<div class="page"><h2>READY!</h2></div>
<section class="section">
<img src="https://t1.daumcdn.net/movie/d055c2d8c1a37dbaaa968f43dbacecbdd2a2b90b" alt="Photo">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae metus ligula.
In eget tristique tortor, et laoreet ipsum. Nulla venenatis id est at luctus.
Curabitur imperdiet semper leo, vel volutpat sem luctus volutpat.
Aenean quis ex eu sapien pretium tincidunt quis blandit mi.
Vivamus sed odio accumsan, eleifend est vel, auctor lorem.
Fusce luctus scelerisque lorem, vel dignissim mi. Donec quis quam arcu.
Aliquam in ultricies neque, tincidunt porta lorem.
</p>
</section>
<section class="section">
<img src="https://t1.daumcdn.net/cfile/12110210A87E371BD1" alt="Photo">
<p>
Morbi ut ultrices mi, nec luctus erat. Maecenas sed tempus sem, eu imperdiet mi.
Nunc eget mi euismod, placerat lectus sit amet, mattis mauris.
Nullam ultrices elit ex, congue elementum est sagittis nec.
Nulla venenatis ipsum ut ligula venenatis, non efficitur metus pulvinar.
Aliquam porttitor porta lectus, ac dapibus tellus eleifend et.
Quisque dui mi, lobortis id dolor hendrerit, volutpat fermentum sem.
Integer convallis quis quam vel mattis. Fusce tristique justo vitae mauris bibendum tincidunt.
</p>
</section>
<section class="section">
<img src="https://t1.daumcdn.net/movie/b96d95aba5ff446ff81427bada040d95281c5647" alt="Photo">
<p>
Sed viverra velit non odio rutrum, eget molestie enim rhoncus. Fusce ultricies mauris non ante aliquam feugiat.
Aenean rutrum ipsum ultrices metus tempus egestas. Sed ultricies odio et enim hendrerit iaculis.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Etiam mollis ipsum at urna aliquet, ut accumsan leo imperdiet.
Vivamus ac viverra erat, ultrices rutrum urna. Nunc maximus mi id tincidunt efficitur.
Integer pellentesque est sed sapien ullamcorper.
</p>
</section>
<section class="section">
<img src="https://t1.daumcdn.net/movie/aea72afb2b5620d8e51d62b7c1e5e87d210f06dd" alt="Photo">
<p>
Ut condimentum risus nisi. Praesent a sapien lorem. Fusce et mauris id enim ullamcorper semper.
Aenean scelerisque ante non porttitor semper. Donec fringilla lobortis ultricies.
Integer auctor mauris et libero convallis, non porttitor ex tincidunt. Quisque et purus justo.
Vestibulum placerat ipsum auctor, viverra nisl sit amet, egestas dolor.
In hac habitasse platea dictumst.
Curabitur at lectus viverra, posuere ipsum id, commodo lacus.
Pellentesque accumsan consequat quam in fringilla.
</p>
</section>
<section class="section">
<img src="https://t1.daumcdn.net/movie/09ccef3cbc124b5a994c9aaf949854311554859490824" alt="Photo" data-direction="top">
<p>
Pellentesque vitae risus nec dolor pulvinar ornare sed eget leo.
Morbi ut blandit nisi, et pellentesque leo. Praesent id consectetur est, quis lobortis nulla.
Maecenas vestibulum risus dui, vitae gravida elit malesuada vel.
Duis id mauris faucibus, suscipit dui a, commodo ante.
Cras scelerisque blandit arcu at consectetur.
Curabitur volutpat sem a sapien ultricies, at volutpat dui condimentum.
Etiam purus elit, vestibulum rutrum orci auctor, aliquam sollicitudin enim.
Aenean vitae congue tellus.
</p>
</section>
<section class="section">
<img src="https://t1.daumcdn.net/movie/16fddeeae2c44170c9d5cc2f69b6b73f8c84dd13" alt="Photo" data-direction="bottom">
<p>
Proin sit amet rutrum mauris. Morbi tempus, neque a sagittis efficitur, est nisi scelerisque metus,
sit amet viverra risus ipsum ut ante. Nulla consequat ut lacus non lobortis.
Nam in nulla nec ex eleifend auctor nec in neque. Nam nec tristique purus.
Nulla sollicitudin a mauris at imperdiet. Maecenas eleifend metus eu tincidunt convallis.
Ut tempus libero suscipit, gravida nunc non, sodales mauris.
Sed ut laoreet dui, eu sagittis nibh. Phasellus convallis ante at sagittis commodo.
</p>
</section>
<div class="page"><h2>DONE</h2></div>
</body>
● CSS
<style>
body {
/* 가로 스크롤바만 나오지 않도록 설정 */
overflow-x: hidden;
}
.page {
height: 100vh;
/* vh 단위: 뷰포트 높이의 1%에 해당하는 크기
→ 따라서 100vh는 뷰포트의 높이를 말한다.
→ 단, vh 단위는 IE9 이상의 버전에서 지원하므로 IE8 이하 버전에서는 동작하지 않는다. */
/* h2 요소가 .page 요소의 영역을 기준으로 배치되도록 */
position: relative;
}
.page > h2 {
/* .page 요소의 영역을 기준으로 중앙에 배치 */
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: 10em;
font-weight: 900;
letter-spacing: -2px;
}
.section {
margin: 100px auto;
width: 1080px;
}
.section::after { content: ""; display: block; clear: both; }
.section > img {
float: left;
display: block;
width: 50%;
/* 문서가 로드되면 이미지 요소는 살짝 옆으로 옮겨서 숨겨둔다. */
transform: translateX(-50px);
opacity: 0;
transition-duration: 400ms;
}
.section > p {
float: right;
margin: 0;
width: 44%;
font-size: 20px;
line-height: 1.6;
/* 양쪽 정렬 */
text-align: justify;
/* 문자를 단어 단위로, 글자 단위로 쪼갤 것인지 결정한다. */
word-break: break-all;
}
/* .section 요소들 중에서 짝수 번째에 나오는 요소들의 이미지는 오른쪽에 배치되도록 */
/* :nth-child 선택자는 항상 부모 요소를 기준으로 생각해야 한다. */
.section:nth-child(odd) > img { float: right; transform: translateX(50px); }
.section:nth-child(odd) > p { float: left; }
/* data-direction 속성이 "top"으로 설정된 이미지는 위에서 아래로 나타나도록 */
.section > img[data-direction="top"] {
transform: translateY(-50px);
}
/* data-direction 속성이 "bottom"으로 설정된 이미지는 아래에서 위로 나타나도록 */
.section > img[data-direction="bottom"] {
transform: translateY(50px);
}
/* 이미지가 화면에 나타나도록 설정할 때 지정할 스타일
→ 이미지가 화면에 나타날 때는 요소가 본래 위치로 이동하도록 한다. */
.section > img.on {
transform: translate(0, 0);
opacity: 1;
}
</style>
● script
<script src="https://code.jquery.com/jquery.min.js"></script>
<script>
$(function () {
// 1. 브라우저가 스크롤되면
// 2. 스크롤된 위치를 기반으로 "지정한 위치"를 구한다.
// 3. .section 요소의 img 요소들 중에서
// 4. 위에서 계산한 "지정한 위치"보다 위로 올라간 이미지 요소는 화면에 나타나도록 하고
// 5. 위에서 계산한 "지정한 위치"보다 아래에 있는 이미지 요소는 화면에 나타나도록 한다.
//---------------------------------------------------------------------------------
// 프로그램에서 참조하는 요소를 미리 탐색
var $images = $(".section > img");
// 1. 브라우저가 스크롤되면
$(window).on("scroll", function () {
// 2. 스크롤된 위치를 기반으로 "지정한 위치"를 구한다.
// → (스크롤된 높이) + (뷰포트의 높이의 60%)
var posTop = $(window).scrollTop() + $(window).height() * 0.5;
// 3. .section 요소의 img 요소들 중에서
$images.each(function () {
// 4. 위에서 계산한 "지정한 위치"보다 위로 올라간 이미지 요소는 화면에 나타나도록 하고
if (posTop > $(this).offset().top)
$(this).addClass("on");
// 5. 위에서 계산한 "지정한 위치"보다 아래에 있는 이미지 요소는 화면에 나타나도록 한다.
else
$(this).removeClass("on");
});
}); // window.onscroll
}); // document.onready
</script>