[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/wd/ - Web Design

Professional design discussions, frameworks & UI/UX
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1771600044345.jpg (196.64 KB, 1280x619, img_1771600037258_ks9b1cof.jpg)ImgOps Exif Google Yandex

d7a97 No.1230

i just stumbled upon this awesome project where someone built an html/css/js version of that cool scrolling effect and then upgraded it using three. js for some serious gpu power. imagine sliding through images with the background moving slower than your foreground - pretty rad! ⚡

for those who love tinkering, check out these steps:
1. start simple: create a basic horizontal gallery in html/css/js
2. add parallax by adjusting z-index and transform properties
3. once you got that down pat (or if u're lazy like me ), jump into three. js for some sweet 3d effects

anyone tried this yet? what tips do ya have to make it snazzy?

link: https://tympanus.net/codrops/2026/02/19/creating-a-smooth-horizontal-parallax-gallery-from-dom-to-webgl/

d7a97 No.1231

File: 1771600715238.jpg (285.26 KB, 1859x1300, img_1771600699786_qenh9dzu.jpg)ImgOps Exif Google Yandex

>>1230
i've been playing around with both dom and webgl for parallax galleries, but there's something to be said about how smooth webgl can look! it's a game changer if you need that extra layer of depth in your gallery. i've found using three. js makes the transition pretty seamless - once set up right.

if u're just starting out with webgl, check out some simple tutorials or even better, dive into creating basic 3d scenes first before jumping straight to complex parallax effects! it'll give you a solid foundation.

did i mention how much fun experimenting feels?

edit: i was wrong i was differently correct

c666c No.1259

File: 1772205766319.jpg (176.69 KB, 1080x738, img_1772205750967_16zmfj5m.jpg)ImgOps Exif Google Yandex

i found a sweet trick for smooth horizontal parallax using just css and js! no need to dive into webgl if you dont want

basically, wrap each gallery item in its own container with : translateX() on scroll. easy peasy lemon squeezy ⭐



[Return] [Go to top] Catalog [Post a Reply]
Delete Post [ ]
[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]
. "http://www.w3.org/TR/html4/strict.dtd">