Component Browser
BrowseBuild
Home/Browse/Header 141

Header 141

ImageButtons26 nodes · 25 styles
Header 141

Description

A hero section with centered content above an animated horizontal image slider featuring overlapping cards that scroll across the viewport.

Detailed Analysis

This header component uses center-aligned content at the top with a bold headline, supporting paragraph, and horizontally centered dual CTA buttons. Below sits an animated horizontal carousel showcasing multiple image cards in a stacked, overlapping arrangement. The images appear with varying depths and slight rotations, creating a dynamic card stack effect. As the carousel animates horizontally, partial images on the edges indicate continuous motion. The centered layout creates a balanced, symmetrical composition.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

animated herocentered headerimage sliderhorizontal carouselscrolling imagesoverlapping cardscard stackdynamic heroscroll animationcentered layoutdual CTAmotion designgallery slider

Raw Data (spacer)

{
  "meta": {
    "droppedLinks": 0,
    "dynBindRemovedCount": 0,
    "unlinkedSymbolCount": 0,
    "paginationRemovedCount": 0,
    "dynListBindRemovedCount": 0
  },
  "type": "@webflow/XscpData",
  "payload": {
    "ix1": [],
    "ix2": {
      "events": [
        {
          "id": "e-3459",
          "name": "",
          "action": {
            "id": "",
            "config": {
              "actionListId": "a-707",
              "affectedElements": {}
            },
            "instant": true,
            "actionTypeId": "GENERAL_CONTINUOUS_ACTION"
          },
          "config": [
            {
              "smoothing": 50,
              "addEndOffset": false,
              "startsExiting": false,
              "addOffsetValue": 50,
              "addStartOffset": false,
              "endOffsetValue": 50,
              "startsEntering": true,
              "continuousParameterGroupId": "a-707-p"
            }
          ],
          "target": {
            "id": "6540ac58fa7ea7efe569683a|d204a01d-cc01-8e2a-c835-6166664dfca2",
            "appliesTo": "ELEMENT",
            "styleBlockIds": []
          },
          "targets": [
            {
              "id": "6540ac58fa7ea7efe569683a|d204a01d-cc01-8e2a-c835-6166664dfca2",
              "appliesTo": "ELEMENT",
              "styleBlockIds": []
            }
          ],
          "createdOn": 1708610317965,
          "eventTypeId": "SCROLLING_IN_VIEW",
          "mediaQueries": [
            "main",
            "medium"
          ],
          "animationType": "custom"
        },
        {
          "id": "e-3460",
          "name": "",
          "action": {
            "id": "",
            "config": {
              "actionListId": "a-708",
              "affectedElements": {}
            },
            "instant": true,
            "actionTypeId": "GENERAL_CONTINUOUS_ACTION"
          },
          "config": [
            {
              "smoothing": 50,
              "addEndOffset": false,
              
... (truncated)