Reducing the JS load where we can...

Hero Carousel

This carousel is CSS-only!

Swipe ←
to learn more about it...
The latest browsers should have
nav arrows and indicator dots,
and swiping should snap to the next/previous slide.
Older browsers still work,
but as a simple slider.

If necessary, you could feature-detect
and add that functionality via polyfill.

Tabbed Content

These tabs, heavily inspried by the good work at Chrome.dev CSS Carousel Gallery, use a combination of Anchor Positioning, Scroll Snap and Scroll Markers to create a CSS-only tabbed content panel.

In supporting browsers, as you click each tab, the content panels should slide left or right, as appropriate. This is all CSS, no JS involved.

Maxime porro veritatis consequuntur blanditiis distinctio voluptate sint hic architecto, praesentium obcaecati! Voluptatibus porro ratione debitis, natus error quasi provident fugiat ut, hic eum quibusdam veniam dolore a. Veniam, dolore?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum, corporis alias. Eius optio iure, consectetur saepe itaque sed provident velit accusamus esse cum magni pariatur facere quisquam nulla placeat! Deleniti!

Saepe adipisci quibusdam nihil doloremque veritatis sunt ex, voluptatibus obcaecati? Dolor inventore natus distinctio delectus voluptatem saepe officia laboriosam corporis asperiores quo! Sint ipsum incidunt accusamus possimus rerum vitae mollitia.

Minima nam reprehenderit cum nihil error sed ipsam libero, exercitationem non in aperiam praesentium dicta expedita dolorem eveniet natus architecto molestiae velit voluptate doloremque dolores tempora totam porro officia. Architecto.

Omnis soluta labore libero dolorum earum, dolor, commodi cum beatae harum minus reiciendis dolores maxime, facere sapiente perferendis! Qui, laboriosam. Commodi tenetur veritatis culpa corrupti impedit magnam vitae nobis quidem!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos optio expedita animi laudantium quasi sapiente, dolorum quo perferendis officia velit nemo reiciendis nostrum nihil ullam sed pariatur provident. Harum, itaque.

Odit, reiciendis blanditiis ut minus modi quis soluta odio aliquid alias facere ab non veritatis magnam, deleniti mollitia error esse iusto adipisci numquam velit? Reiciendis rerum aperiam ut cum perspiciatis?

Animated Looping Carousel

The scrolling marquee below is also 100% CSS-only. It does require duplicate HTML (the slide UL), but uses the same images in both ULs, so the only penalty is a slightly increased document size.

Parallax

In the latest browsers,

This section should have a CSS-only parallax background.

In older browsers, it should just be a static background.

Accordion

How does this component work?

This section uses the HTML details and summary elements, which are natively supported in modern browsers. When a user clicks on a summary, the corresponding details are revealed or hidden.

Do I need JS for this functionality?

No, this is pure HTML and CSS. The details and summary elements work without JS, making them a great choice for content that doesn't need to be initially visible.

Are these elements accessible?

Yes, the details and summary elements are inherently accessible, as they provide keyboard navigation and screen reader support out of the box. However, it's always a good idea to test your implementation to ensure it meets your accessibility standards.

Can I force an option to be initially open?

Yes, just add an open attribute to the details element you want to be expanded by default.

For example:

<details open>

Can I force only one to be open at a time?

Yes, by simply adding a same name attribute with the same value to multiple details elements, similarly to how you would a radio button group.

For example:

<details name="faq">
    <summary>FAQ 1</summary>
</details>
<details name="faq">
    <summary>FAQ 2</summary>
</details>

Fly-In Content

Scroll down the page a little more.

The content blocks below should each have a CSS-only fly-in animation as they enter the viewport.

Image of a train rounding a curved, stone bridge

In supporting browsers, this content section should each have a CSS-only fly-in animation, coming in from the right, as it enters the viewport.

Image of a driving toward the camera with a majestic mountain range in the distance

In supporting browsers, this image and text should each have a CSS-only fly-in animation, coming in from the left, as it enters the viewport.

Image of a curved beach with rugged hills behind the beach and an arched tunnel through the rocks over the water

In supporting browsers, this image and text should each have a CSS-only fly-in animation, animating upward, as it enters the viewport.

Modal

Click the button below.

You should get a modal overlay with a backdrop.

Click the close button when you're done.