Experiminerings
Del Maphcase
- Eleventy v3 alpha
- WebC templates
- Web components for interactivity
- Open Props css custom properties
Experiments
-
Circle Text Hover
Circled text that's visible on hover.
-
DVD Screensaver
The classic DVD screensaver made as a web component.
-
Fit To Width Text
Fit to width-text using css only.
-
Interactive video
Interactive video testing with a web component.
-
Marquee
Marquee setup for Thempo Theam.
-
Mesh gradients
Animated css mesh gradients for stylish backgrounds.
-
Responsive tables
Responsive tables using table-saw by Zach Leatherman.
-
Shader thingy
A WebGL fragment shader renderer web component.
-
Sharing
Share pages on socials and optionally use native share options.
-
SVG Logo
Creating the maphcase logo in SVG by hand, as far as possible
-
View/scroll timeline
Some testungs with scroll and view timeline animations.
View transitions and speculation rules
This site utilizes the View Transitions API. The logo in the header has a view-transition-name
. When you navigate to a page with the same view-transition-name
defined on the logo, the logo will animate. (it's defined in the css for the a
element that contains the logo)
View Transitions work by fetching the new page, rendering it and then animating 'screenshots' of the elements on the current page and on the new page. The screenshots are then animated from the old 'state' to the new. This might not go so smoothly when the request for the new page takes a while, it may appear the site is 'hanging'. This is where the Speculation Rules API comes in handy.
On some pages you can find a script tag of type speculationrules
. It contains a json object describing what to prefetch and what to prerender. I'm still testing things out, but this should improve loading times for follow up requests and thus improve cross-page view transitions.