전체 글 (166) 썸네일형 리스트형 [퍼블리싱] HeureBleue: 스크롤 기반 갤러리 애니메이션 구현하기 구현 목표여러장의 이미지가 담긴 갤러리의 스케일을 조정하여 사용자가 스크롤을 내릴 때 갤러리가 점점 확대된다. 특히, 갤러리의 중앙 이미지가 강조되면서 시선을 중앙으로 집중시킬 것이. 즉, 갤러리 이미지를 중심으로 스크롤에 따라 확대, 이동, 축소 효과를 통해 사용자가 스크롤 경험을 통해 콘텐츠와 상호작용하도록 만드는 것이 목표이다. 구현 기능GSAP + ScrollTrigger로 스크롤 기반 애니메이션 제어ScrollTrigger의 onUpdate를 활용해 스크롤 진행도에 따라 갤러리와 이미지의 크기, 위치를 동적으로 조정.갤러리 요소의 스케일 및 위치 조정Lenis로 부드러운 스크롤 구현ScrollTrigger와 연동하여 자연스러운 애니메이션 구현. 결과물 구현 과정 1. HTML 레이아웃 설계 .. [퍼블리싱] Text Animation + Marquee 효과 구현하기 구현 목표스크롤 시 텍스트의 폰트가 변하고, 이미지가 좌우로 움직이는 애니메이션이 적용된 아래와 같은 웹 페이지를 구현할 것이다.주요 기능텍스트 애니메이션GSAP를 사용하여 텍스트의 font-weight가 스크롤 위치에 따라 변화하는 효과를 적용.마키(Marquee) 효과GSAP 및 ScrollTrigger 플러그인을 사용하여 이미지와 텍스트가 포함된 마키 구현. 스크롤 시 이미지와 텍스트가 수평으로 움직이며, 각 마키 컨테이너는 스크롤 위치에 따라 다르게 움직임. 구현 과정1. HTML 레이아웃 설계2. CSS 레이아웃 설계3. 기능 구현 - JavaScript 1. DOMContentLoader 이벤트리스너document.addEventListener("DOMContentLoaded", () => .. [퍼블리싱] Gregory Lalle Awwwards 스타일 구현하기, 마스킹 애니메이션 구현 목표스크롤 위치를 기반으로 프로젝트의 인덱스를 동적으로 추적하여, 이에 따라 챕터 제목을 실시간으로 동기화하고, 해당 프로젝트에 연관된 이미지들을 화면 우측에 표시하는 인터랙티브 웹을 구현한다. 사용자는 페이지를 스크롤할 때 다음과 같은 주요 기능을 경험할 수 있다. 스크롤 연동 이미지 변경챕터 제목과 Symbol의 동적 업데이트프로젝트 제목의 Mask 애니메이션프로젝트 번호는 스크롤 진행에 따라 마스킹 애니메이션이 적용됨스크롤 연동 진행바완성 화면 구현 과정 1. 기본 구조 설계HTMLCSS 2. 스크롤 위치 감지 및 동기화 [퍼블리싱] Horizontal Scroll Animation & 3D 느낌의 카드와 Text Animation 구현하기 const lenis = new Lenis(); lenis.on("scroll", ScrollTrigger.update); gsap.ticker.add((time) => { lenis.raf(time*1000); }) gsap.ticker.lagSmoothing(0);구현 목표 수평 스크롤 애니메이션과 함께 3D 효과를 결합하여 사용자가 마치 입체적인 공간을 탐험하는 듯한 몰입감을 주는 웹 경험을 구현해보겠다. 스크롤 이벤트에 따라 텍스트와 이미지가 동적으로 변화하며, 입체감을 더하는 3D 애니메이션을 활용해 시각적 즐거움을 극대화하겠다. 특히, .titles 요소는 수평 스크롤에 따라 화면을 가로지르며 이동하고, .images의 카드들은 Z축(깊이) 방향으로 이동하며.. [퍼블리싱] Horizontal Scroll & Parallax Animation 구현하기, IntersectionObserver이란? 구현 목표아래 이미지처럼 스크롤 시 가로로 새로운 섹션들들이 나타나는 Hotizontal Scroll Animation을 구현할 것이다. 각 섹션에는 고유한 TITLE과 배경 이미지가 포함되어 있으며, 사용자가 스크롤하여 섹션이 뷰포트의 40%이상 보이는 순간 해당 섹션의 타이틀이 화면 상단에 나타나도록 설정할 것이다.또한, 각 섹션의 배경 이미지에는 Parallax 효과를 적용하여 자연스러운 시각적 깊이감을 더할 것이다.Parallax 효과란?시각적인 깊이와 입체감을 표현하기 위해 서로 다른 레이어가 다른 속도로 움직이는 기법Parallax는 라는 단어는 '시차'를 의미함. 환경 셋팅바닐라 환경에서 작업을 진행하며, VS Code 에디터를 사용하 HTML, CSS, JavaScript 파일을 생성합니.. 3D Animation scroll Web 유튜브에서 스크롤에 따라 3D 모델이 회전하고 특 시점에서는 바코드 효과음 소리가 나면서 3D 모델이 사라지는 웹을 소개하는 영상을 보았다. 3D 모델을 웹에 적용하는 것에 흥미를 느끼는 나로서는 어떻게 이런 인터랙션을 구현한 것인지 궁금했다. 다행히 영상에서 구현 코드를 함께 소개해주어 면밀히 파헤쳐 보기로 하였다. 1. html,css로 기본 구조 잡기section별로 범위를 나누었고, 요소들을 대부분 가운데 정렬하였다. 반응형 웹으로 구현하였다.이번에 배운 점은 반응형 웹을 구현하는데 px보다는 em 단위를 쓰는게 훨씬 편하다는 점이다.font-size도 px보다는 vw로 하는 것을 추천.z-index는 position:static(기본값)일 때는 적용되지 않는다.position: absolute,.. Three.js 라이브러리 Three.js는 웹 페이지에 3D 객체를 구현할 수 있게 해주는 JavaScript 라이브러리다. WebGL 기반의 3D 렌더링을 지원하며 다양한 애니메이션을 지원한다.더보기+ WebGL이란?WebGL은 웹 브라우저에서 2D/3D 그래픽을 렌더링하기 위한 JavaScript API이며 HTML의 Canvas에서 실행된다.그러나, WebGL은 매우 로우레벨이라 직접 사용하기 복잡하다. 그래서 Three.js 같은 라이브러리가 WebGL은 쉽게 사용할 수 있게 해준다.Three.js와 WebGL의 관계를 비유하면 WebGL은 엔진, Three.js는 자동차. -> WebGL이 실제 그래픽을 처리하고 Three.js는 이를 쉽게 사용할 수 있게 해주는 인터페이스를 제공한다. Three.js를 활용하기 위해.. gsap, lenis+gsap 같이 사용하기 gsap는 웹에서 애니메이션을 구현하는 가장 강력한 JavaScript 라이브러리 중 하나이다. 1. Vanilla Web 개발 환경에서의 라이브러리 가져오기2. Vanilla JavaScript를 이용한 기본 사용법 Box 3. lenis + gsap 같이 사용할 때 Box 1 Box 2 Box 3 lenis만 사용할 경우에는 requestAnimationFrame을 사용하여 부드러운 스크롤 환경을 제공하였는데 gsap와 lenis를 함께 사용하는 경우에서는 gsap의 ticker가 requestAnimationFrame의 역할을 더 최적화된 방식으로 대신 수행한다.gsap의 ticker를 사용하는 이유는: 동기화 -> gsap의 모든 애니메이션과 같은 타.. 이전 1 2 3 4 ··· 21 다음
