Загрузка видео...

Не удалось загрузить видео

На главную

Created an infinite scroll for #Angular 🔍 Very limited code 🏎️ No racing conditions 🔄 Keep loading until screen is full 📏 Load on scroll, resize 🚀 No fixed row height needed 📋 Works with any iterable list Want me to create a free article or video? Share or comment.🚀🥰

14,934 просмотров • 2 лет назад •via X (Twitter)

Комментарии: 10

Фото профиля Renato Carneiro
Renato Carneiro2 лет назад

“It keeps loading more data until the screen is filled”. Does your library listen to unused viewport height or also works with parent container elements?

Фото профиля Brecht Billiet
Brecht Billiet2 лет назад

Great question mate! It uses the IntersectionObserver class. Whenever #trigger is in the viewport, it needs to load more data. This approach works with all different heights of rows, and even with collapsable rows.

Фото профиля Raphael Gruber
Raphael Gruber2 лет назад

@pick_simplified Why the choose in between. I would appreciate an article AND a video 💪😂

Фото профиля Brecht Billiet
Brecht Billiet2 лет назад

@pick_simplified That sounds like an idea 😂💪🚀

Фото профиля Gaurav Bhojwani
Gaurav Bhojwani2 лет назад

Are you using IntersectionObserver behind the scenes ?

Фото профиля Brecht Billiet
Brecht Billiet2 лет назад

I am! 🤓

Фото профиля Gergo
Gergo2 лет назад

Again :)

Фото профиля CharlieDev
CharlieDev2 лет назад

Please do article or the video or both 🙏🏻🙏🏻🙏🏻🙏🏻

Фото профиля André Pinto
André Pinto2 лет назад

Next level challenge is to have sticky like grouped (eg. contacts list) and drag on one point, scroll and drop it far away in the list/table 🚀

Фото профиля André Pinto
André Pinto2 лет назад

Another challenge: - Choose the parent (window or any element) by an id/ref/class or Directive - Choose what is the content scrolled that has to be listened to by a Directive or other as well

Похожие видео

CSS Trick! ⚡️ You can use scroll-driven animation with background-attachment to create a dynamic glowing card scroller without JS 🔥 section { animation:vibe; animation-timeline:--list; } @​keyframes vibe { to{--hue:320;}} .glow {background: hsl(var(--hue) 80% 50%);} Here's how! 🤙 You can use the background-attachment trick used in other glow card demos 😎 article { background-attachment: fixed; } The difference here is that you aren't going to update the fixed background position with your pointer this time. It can remain fixed. The magic part is that as you scroll, the background will leave the card that's leaving and enter the card that's entering ✨ For the extra background glow, you can use a fixed pseudo element on the list container itself 💪 Once that's in place, you're only task is to change the color of the background as you scroll 🤔 Create a custom property declaration for the --hue @​property --base { inherits: true; syntax: ' '; initial-value: 0; } Then create an animation that updates this value @​keyframes accent { to { --hue: 320; }} The last piece is hooking it up to scroll and there is a little trick in here 👀 First, you need an inline scroll-timeline on the list ul { scroll-timeline: --list inline; } Then you can use timeline-scope to hoist that scroll-timeline up so a parent can use it. You then animate the custom property on this element and let the value cascade down to the places that need it 🔥 section { timeline-scope: --list; animation: accent both linear; animation-timeline: --list; } For example, the glow uses the --hue this way [data-glow] { background-image: radial-gradient( 150px 150px at 50% 50%, hsl(var(--hue) 100% 70% / 0.25), transparent ); } Lastly, scroll-snap is optional of course but plays nice with the scroll-driven animation demos ✨ The key for that is ul { scroll-snap-type: x mandatory; } li { scroll-snap-align: center; } That's it! Pretty fun trick to play with! 🤓 Any questions, let me know! Should we add it to the video walkthrough list? CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

116,625 просмотров • 2 лет назад

Apple's product pages have that scroll effect. The camera flies through a 3D world. Products float. Scenes transition. No cuts. One continuous flight driven by your scroll wheel. Here is what one costs to build in 2026. Big storytelling agencies (Noomo, WithLore, Utsubo): $15,000 to $100,000. Three to six months. A team of designers, 3D artists, and WebGL developers. Awwwards-tier flagship from a senior freelancer: $8,000 minimum. Three.js multi-scene site with GSAP scroll: $3,500 to $8,000. That is if you can find a Three.js specialist. They charge $75 to $150 an hour. There are fewer of them than there are brands that want the site. Now meet scroll-world. A free, open-source agent skill for Claude Code and Codex that generates the entire thing from a prompt. Describe your brand. Describe the scenes. "A coffee brand. Start outside the farm. Fly into the roasting facility. Pass through the packaging. Land in the cafe." It generates the isometric stills. It generates the camera flights. It generates the connector clips between scenes from the actual boundary frames of both neighbors, so every seam is pixel-identical. No flicker. No cut. One continuous flight. Then it wires the chain into a portable vanilla JS scroll engine that drops into plain HTML, Next.js, or Vue. One prompt. Hours. Not months. 6,096 stars on GitHub in 25 days. 724 forks. MIT license. Built by cyw, founder and CTO of Hermai AI, out of San Francisco. Here is what scroll-world does: - Interviews you on brand, scenes, art direction, and budget before spending a cent - Generates the isometric stills through GPT Image 2 - Generates the camera flights through Seedance on Monid - Renders a native 9:16 portrait chain for mobile, not a crop - Ships a vanilla JS scrub engine with blob-seek, lazy load, and seam crossfade - Installs into Claude Code as a plugin or Codex through the Vercel skills CLI - Framework-agnostic Here is what scroll-world costs to install: Zero. Forever. Generation burns credits. A 6-scene 1080p chain on Monid pay-per-clip lands around $27, printed before the run starts. Big storytelling agency: $15,000 to $100,000. scroll-world: $27. Awwwards WebGL flagship: $8,000. scroll-world: $27. Three.js contractor for a month: $12,000. scroll-world: this afternoon. Your brand. Your world. Your scroll. 100% Open Source. (Link in the comments)

Nav Toor

365,432 просмотров • 2 месяцев назад