티스토리 뷰

웹기술

[시네마틱 스크롤링] Cinematic Scrolling 특징과 간단한 예제

제로빈 2024. 11. 15. 10:50

시네마틱 스크롤링(Cinematic Scrolling)은 웹 페이지에서 스크롤을 통해 시각적 연출이 이루어지는 기법입니다. 주로 이미지, 텍스트 애니메이션, 시차 효과(parallax scrolling), 비디오 전환 등이 포함되며, 사용자가 마치 영화를 감상하는 듯한 경험을 하도록 도와줍니다. 특히, 브랜드 소개 페이지나 포트폴리오에 적합하며, 시각적 몰입감을 높여 사용자의 흥미를 유발하는 데 유리합니다. 주요 특징과 간단한 예제를 소개하겠습니다.

 

1. 시네마틱 스크롤링 특징

  • 인터랙티브 경험 제공: 스크롤에 따라 페이지 요소가 움직이고 변하면서 사용자의 참여를 유도합니다.
  • 시차 스크롤링: 배경 이미지와 전경 이미지가 다른 속도로 움직이며 입체감과 깊이감을 줍니다.
  • 스토리텔링에 적합: 특정 스토리를 순차적으로 전달하며 자연스럽게 콘텐츠를 탐색하게 합니다.
  • 시각적 집중 효과: 애니메이션과 전환 효과로 사용자의 시선을 끌고 특정 요소에 집중하게 합니다.

 

2. 예제

2.1. 프로젝트 폴더 구조

CinematicScrolling.
|   index.html
|   script.js
|   style.css
\---images
        image1.jpg
        image2.jpg
        image3.jpg
        image4.jpg
        image5.jpg

 

2.2. index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cinematic Scrolling with Overlay Effect</title>
  <link rel="stylesheet" href="style.css">
  
</head>
<body>

  <!-- 고정된 배경 이미지와 오버레이 -->
  <div class="bg-overlay"></div>
  <div class="bg-image" id="bg1" style="background-image: url('images/image1.jpg');"></div>
  <div class="bg-image" id="bg2" style="background-image: url('images/image2.jpg');"></div>
  <div class="bg-image" id="bg3" style="background-image: url('images/image3.jpg');"></div>
  <div class="bg-image" id="bg4" style="background-image: url('images/image4.jpg');"></div>
  <div class="bg-image" id="bg5" style="background-image: url('images/image5.jpg');"></div>

  <!-- 섹션과 텍스트 박스 -->
  <section id="section1">
    <div class="text-box">Welcome to Cinematic Scrolling</div>
  </section>
  <section id="section2">
    <div class="text-box">Experience the Scroll</div>
  </section>
  <section id="section3">
    <div class="text-box">A New Way to Interact</div>
  </section>
  <section id="section4">
    <div class="text-box">Feel the Cinematic Effect</div>
  </section>
  <section id="section5">
    <div class="text-box">Enjoy the Experience</div>
  </section>

  <script src="script.js"></script>

</body>
</html>

 

2.3. script.js

// 스크롤 이벤트 리스너 추가
window.addEventListener('scroll', () => {
  const sections = document.querySelectorAll('section');
  const bgImages = document.querySelectorAll('.bg-image');
  const scrollY = window.scrollY;

  sections.forEach((section, index) => {
	const box = section.querySelector('.text-box');
	if (scrollY > section.offsetTop - window.innerHeight / 1.5) {
	  section.classList.add('active');

	  // 모든 bg-image를 투명하게 설정 후 현재 인덱스에 맞는 이미지 표시
	  bgImages.forEach((img, imgIndex) => {
		img.style.opacity = imgIndex === index ? 1 : 0;
	  });
	} else {
	  section.classList.remove('active');
	}
  });
});

 

2.4. style.css

/* 기본 스타일 */
body, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: Arial, sans-serif;
}
section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2em;
  text-align: center;
  position: relative;
  z-index: 2;
}
/* 배경 이미지 스타일 */
.bg-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: contain; /* 이미지가 너무 크지 않게 */
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s ease;
}
/* 오버레이 스타일 */
.bg-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 어두운 반투명 오버레이 */
  z-index: -1;
  pointer-events: none;
}
.text-box {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.active .text-box {
  opacity: 1;
}

 

3. 실행 화면

  • 예제를 실행하면 자연스럽게 화면이 바꾸는 모습을 확인하실 수 있습니다.

 

감사합니다.

'웹기술' 카테고리의 다른 글

[다크모드] 다크 모드 소개 및 간단한 예제  (0) 2024.11.25
[CWV] Core Web Vitals 특징과 간단한 예제  (1) 2024.11.20
[JAM 스택] JAM Stack 특징과 간단한 예제  (2) 2024.11.14
[TFJS] TensorFlowJS 특징과 간단한 예제  (5) 2024.11.13
[WASM] WebAssembly 특징과 간단한 예제  (3) 2024.11.12
최근에 올라온 글
Total
Today
Yesterday