beyond More pages

From “6 Things You No Longer Need JavaScript For” by Coding2GO

Six CSS features that replace JavaScript

Six jobs once left to JavaScript, now done in CSS alone.

Open the interactive page →Make a page from any YouTube video

Six CSS tricks, in order

Opening: carousels without JavaScript — The video opens on a carousel title card and then shows a CSS-only carousel built with modern CSS. 0:21
CSS-only carousel styling — Scroll-button and scroll-marker rules in style.css are shown beside a live browser demo of the carousel. 0:56
Scroll-driven page progress — A fixed progress bar is driven by scroll using animation-timeline: scroll() and a page-progress keyframe. 2:21
Sponsor: Porkbun — A sponsored segment promotes Porkbun domain names, including .app and .dev offers. 3:11
Reveal cards on scroll — A fade-in keyframe is attached to cards with animation-timeline: view() and an animation-range value. 4:16
Smart positioning for popovers — Anchor names, position-area and position-try-fallbacks place a popover menu next to its toggle button. 6:31
Animated details disclosure — An FAQ uses interpolate-size and details-content rules to animate open and close transitions. 7:41
Random CSS values — Random CSS values drive the position, scale, colour and timing of floating particles. 9:36

Clues on screen

Scroll-marker group rule — Code for .carousel::scroll-marker-group and scroll-button selectors in style.css.
Popover placed by fallback — A popover appears below the Toggle Popover button in the browser demo.

Words behind the tricks

Term: animation-timeline: scroll() · What the video says: Ties a CSS animation's progress to the page scroll position.
Term: animation-timeline: view() · What the video says: Ties a CSS animation's progress to an element's visibility in the viewport.
Term: position-try-fallbacks · What the video says: Lists alternative positions a positioned element tries when its preferred spot does not fit.

More pages like this

Lessons and exam prep → · All pages from Coding2GO →