reponsive_scroll_page
스크롤을 활용한 인터렉티브한 사이트 제작
사용자는 이제 스크롤을 내리는 것 조차 귀찮아 한다.
아마도 밑에 보일 듯 말듯한 내용들은 빠른 스크롤 또는 사이트를 아에 나가버리기까지 한다.
아마도 우리가 흔히 아는 '스압'이라는 용어가 생겨 날때부터 예상된것 일 수 도 있다.
스크롤압박이라는 용어는 사용자에게 매우 불친절한 사이트나 사이트의 내용을 말하며 기피하게 된다.
나마저도 스크롤이 있다면 제일 먼저 피하거나 맨 밑으로 내린다.
그래서 개발자들은 PWA로 단일 페이지 형태로 앱을 만들기 시작했으며 스크롤이 없는 사이트를 만들기 시작했다. 그러나 스크롤이 없다는 건 그만큼 내용이 없다는것..
우리는 보여주고 싶은게 많은 관종집단이 아니던가?
그래서 스크롤을 내리는 행위 자체를 사용자경험으로 전환시켜주는 방법을 소개하고자 한다.
사용자 경험 극대화하기
사용자는 내용이 올라가는 듯한 컨텐츠를 증오한다.
그럼 내용이 올라오는 것이 아니라 슬라이드처럼 없어지게 만들면 어떨까?
동영상이면 스크롤을 내릴때 양옆으로 사라지게 만들고 이미지나 바탕화면도 그렇게 만드는 것이다.
마치 당신을 환영합니다 라고 반기는 것 처럼, 아니면 영화가 시작되기 전 스크린이 내려오는 것처럼 만들면 어떨까? 이러한 것들을 기존의 스크롤을 내리던 기능(마우스 휠돌리기, 터치스크린 쓸어내리기)으로 구현할 수 있다. 그렇게 되면 사용자는 기존의 경험(스크롤을 내리던 행위)을 바탕으로 전혀 새로운 경험을 할 수 있게 된다!
적용방법
적용방법은 간단하다.
- 커튼으로 사용할 div태그를 만들고
- 해당 div태그에 해당 컨텐트(이미지, 비디오, 기타 넣고 싶은 것들..)
- 커튼은 포지션을 절대값 속성으로 두고 설정한다음
- 커튼 아래의 본 내용들을 작성하면 끝 -
- 양쪽으로 열리는 화면을 만들기 위해서 div태그를 2개 사용하여 붙였다.
- 또한 사선을 만들기 위해서 polygon 속성을 사용하였으며 이를 쉽게 해주는 사이트를 이용했다.
- 커튼을 동작하기위해서 getElementById로 선택자를 선택한다음
- addEvent로 스크롤할때 마다 가져오거나 넣을 값을 설정한다.
- 여기서는 각 커튼의 선택자의 style 속성 중 left값을 스크롤을 내린 만큼의 px로 설정하여 움직였다.
따로 외부 APIs모듈을 사용하거나 기타 패키지파일을 설치 안해도 되서 이해하고 적용시키기 쉬운 프로젝트였다.
코드보기
HTML
html에 스크립트 태그를 달아 자바스크립트를 사용하였다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>responsive_page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<div class="side" id="side1">
<video src="./src/bg.mp4" type="video/mp4" autoplay loop muted></video>
</div>
<div class="side" id="side2">
<video src="./src/bg.mp4" type="video/mp4" autoplay loop muted></video>
</div>
</section>
<div class="content">
<h2>Split Video on Page Scroll</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis eius sint excepturi ut asperiores animi aliquid magnam exercitationem, perferendis eaque quia magni. Perferendis voluptatum, voluptatibus labore illum quasi libero eum.
Placeat laboriosam excepturi esse cum deleniti aperiam quisquam possimus nisi id autem beatae saepe molestias debitis voluptatibus quibusdam est incidunt, perferendis odio doloribus, minima ipsum, quae dolor. Modi, inventore enim?
Qui expedita aliquam error numquam nulla repudiandae corporis ipsam assumenda quod ex! Quia quo quasi inventore minus non totam, rerum nihil at iure, veniam aspernatur fugiat facere itaque incidunt sit?
Placeat ipsam soluta temporibus iste cum at esse veniam assumenda aperiam officia neque, commodi deserunt, aut aliquid. Non, deserunt inventore! Temporibus quis, dolor quaerat excepturi mollitia maiores. Velit, esse ratione?
Officiis sed quod laborum nam neque et quos perspiciatis labore laudantium ullam, consectetur recusandae alias nihil illo odit eligendi in asperiores numquam voluptas ad aperiam? Pariatur harum voluptas ratione itaque. Placeat ipsam soluta temporibus iste cum at esse veniam assumenda aperiam officia neque, commodi deserunt, aut aliquid. Non, deserunt inventore! Temporibus quis, dolor quaerat excepturi mollitia maiores. Velit, esse ratione?
Officiis sed quod laborum nam neque et quos perspiciatis labore laudantium ullam, consectetur recusandae alias nihil illo odit eligendi in asperiores numquam voluptas ad aperiam? Pariatur harum voluptas ratione itaque.</p>
</div>
<script>
let side1 = document.getElementById('side1');
let side2 = document.getElementById('side2');
window.addEventListener('scroll', function(){
side1.style.left = -window.pageYOffset + 'px';
side2.style.left = window.pageYOffset + 'px';
})
</script>
</body>
</html>CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background: #222;
min-height: 300vh;
}
section {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
section .side {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
section .side#side1 {
clip-path: polygon(0 0, 0 100%, 100% 100%);
}
section .side#side2 {
clip-path: polygon(0 0, 100% 0, 100% 100%);
}
section .side video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.content {
color: #fff;
padding: 50px;
margin-top: 150vh;
}
.content h2 {
font-size: 3em;
}
.content p {
font-size: 1.2em;
}사이트 바로가기
참고 사이트
AllTimeDevelop