2022-css-day_oh-snap VS sveltekit-css-hover-image-slider

Compare 2022-css-day_oh-snap vs sveltekit-css-hover-image-slider and see what are their differences.

2022-css-day_oh-snap

By argyleink
CSS Scrolling talks
Source Code
oh-snap.netlify.com
Suggest alternative
Edit details

sveltekit-css-hover-image-slider

SvelteKit CSS only :hover image slider (by rodneylab)
CSS NodeJS Optimization Sharp Svelte sveltekit future-css
Source Code
Suggest alternative
Edit details
InfluxDB - Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com
featured
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com
featured
2022-css-day_oh-snap sveltekit-css-hover-image-slider
1 2
28 2
- -
10.0 4.7
over 1 year ago 8 months ago
Astro Svelte
- BSD 3-clause "New" or "Revised" License
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.

2022-css-day_oh-snap

Posts with mentions or reviews of 2022-css-day_oh-snap. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2022-10-25.
  • Svelte CSS Image Slider: with Bouncy Overscroll
    5 projects | dev.to | 25 Oct 2022
    /* Based on Jhey Thompkins CodePen: https://codepen.io/jh3y/pen/mdxggmO * and Adam Argyle git repo: https://github.com/argyleink/2022-css-day_oh-snap */ .thumbnails { display: flex; overflow-x: auto; border-radius: var(--spacing-2); gap: var(--spacing-4); background: var(--colour-dark); overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: var(--spacing-4); scroll-padding: var(--spacing-4); } .thumbnails::-webkit-scrollbar { background: transparent; } .thumbnails::-webkit-scrollbar-thumb { background: var(--colour-alt); border-radius: var(--spacing-2); } .thumbnails::-webkit-scrollbar-track { background: var(--colour-dark); border-radius: var(--spacing-2); } .thumbnail { @media (width > 48rem) { outline: none; height: auto; display: grid; place-items: center; transition: flex 0.2s; flex: calc(0.2 + (var(--lerp, 0) * 0.8)); position: relative; } } .thumbnails > :not(.overscroller) { scroll-snap-align: center; scroll-snap-stop: always; } .thumbnail:nth-child(2) { scroll-snap-align: start; } .thumbnail:nth-last-child(2) { scroll-snap-align: end; } .overscroller { display: block; inline-size: 15vw; flex: 0 0 auto; } .thumbnail-item { width: 40vw; height: auto; aspect-ratio: 16 / 10; border-radius: var(--spacing-1); @media (width > 48rem) { display: inline-block; border-style: none; width: 125px; transition: transform 0.2s; transform-origin: 50% 100%; position: relative; transform: translateY(calc(var(--lerp) * -50%)); } @media (width > 64rem) { width: 144px; } @media (width > 80rem) { width: 196px; } } .thumbnail-item:hover { border: var(--spacing-px-2) solid var(--colour-light); } @media (width > 48rem) { .overscroller { display: none; } .thumbnails { position: absolute; top: 0; left: 0; overflow-x: unset; display: flex; align-items: center; justify-content: center; gap: var(--spacing-2); padding: var(--spacing-2); } } .thumbnails:hover, .thumbnails:focus-within { @media (width > 48rem) { --show: 1; height: var(--spacing-24); } } [aria-current='true'] .thumbnail-item { outline: var(--spacing-px-2) solid var(--colour-brand); } @media (width > 48rem) { .thumbnail .thumbnail-item { transition: outline 0.2s; outline: var(--colour-brand) var(--spacing-px) solid; } :is(.thumbnails:hover, .thumbnails:focus-within) .thumbnail-item { width: var(--max-width-full); } :is(.thumbnail:hover, .thumbnail:focus-visible) { --lerp: var(--lerp-0); z-index: 5; } .thumbnail:has(+ :is(.thumbnail:hover, .thumbnail:focus-visible)), :is(.thumbnail:hover, .thumbnail:focus-visible) + .thumbnail { --lerp: var(--lerp-1); z-index: 4; } .thumbnail:has(+ .thumbnail + :is(.thumbnail:hover, .thumbnail:focus-visible)), :is(.thumbnail:hover, .thumbnail:focus-visible) + .thumbnail + .thumbnail { --lerp: var(--lerp-2); z-index: 3; } .thumbnail:has(+ .thumbnail + .thumbnail + :is(.thumbnail:hover, .thumbnail:focus-visible)), :is(.thumbnail:hover, .thumbnail:focus-visible) + .thumbnail + .thumbnail + .thumbnail { --lerp: var(--lerp-3); z-index: 2; } .thumbnail:has(+ .thumbnail + .thumbnail + .thumbnail + :is(.thumbnail:hover, .thumbnail:focus-visible)), :is(.thumbnail:hover, .thumbnail:focus-visible) + .thumbnail + .thumbnail + .thumbnail + .thumbnail { --lerp: var(--lerp-4); z-index: 1; } } a { color: var(--colour-alt); } picture { display: flex; } img { background-position: center center; background-repeat: no-repeat; }

sveltekit-css-hover-image-slider

Posts with mentions or reviews of sveltekit-css-hover-image-slider. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2022-11-15.

What are some alternatives?

When comparing 2022-css-day_oh-snap and sveltekit-css-hover-image-slider you can also consider the following projects:

odyssey-theme - A modern business marketing website theme/starter built with Astro 🚀

sveltekit-image-plugin - SvelteKit demo code for using vite-imagetools to add cached, responsive, Next-Gen images to a SvelteKit site with no cumulative layout shift.

examples - A community-driven repository showcasing examples using Remix 💿

sveltekit-fontaine - SvelteKit Fontaine ✍🏽 how to eliminate or reduce font swap cumulative layout shift working with custom, self-hosted fonts in ❤️ SvelteKit.

go-unsplash - Go Client for the Unsplash API

fluent-svelte - A faithful implementation of Microsoft's Fluent Design System in Svelte.

2022-css-day_oh-snap vs odyssey-theme sveltekit-css-hover-image-slider vs sveltekit-image-plugin 2022-css-day_oh-snap vs examples sveltekit-css-hover-image-slider vs sveltekit-fontaine 2022-css-day_oh-snap vs go-unsplash sveltekit-css-hover-image-slider vs fluent-svelte sveltekit-css-hover-image-slider vs examples