.hyperdigital theme

Scrollytelling – media left

  1. Step 1 media

    Caption for step 1

    Step 1 of 3: Step 1

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

    Read more
  2. Step 2 media

    Caption for step 2

    Step 2 of 3: Step 2

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

  3. Step 3 media

    Caption for step 3

    Step 3 of 3: Step 3

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Scrollytelling – media right, last step is a video - animation: fade in from left

  1. Step 1 media

    Caption for step 1

    Step 1

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

    Read more
  2. Step 2 media

    Caption for step 2

    Step 2

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

  3. Caption for step 3

    Step 3

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Scrollytelling - steps connected by a curve - animation: fade in from right

  1. Step 1 media

    Caption for step 1

    Step 1 of 3: Step 1

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

    Read more
  2. Step 2 media

    Caption for step 2

    Step 2 of 3: Step 2

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

  3. Step 3 media

    Caption for step 3

    Step 3 of 3: Step 3

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Scrollytelling - zig-zag, dashed line - animation: fade in from bottom

  1. Step 1 media

    Caption for step 1

    Step 1 of 3: Step 1

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

    Read more
  2. Step 2 media

    Caption for step 2

    Step 2 of 3: Step 2

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

  3. Step 3 media

    Caption for step 3

    Step 3 of 3: Step 3

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Scrollytelling - straight line, dotted, custom colour - animation: fade in from top

  1. Step 1 media

    Caption for step 1

    Step 1 of 3: Step 1

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

    Read more
  2. Step 2 media

    Caption for step 2

    Step 2 of 3: Step 2

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

  3. Step 3 media

    Caption for step 3

    Step 3 of 3: Step 3

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Scrollytelling - a layout per step

  1. Step 1 media

    Caption for step 1

    Step 1 of 5: Step 1 - media-top

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

    Read more
  2. Step 2 media

    Caption for step 2

    Step 2 of 5: Step 2 - media-left

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

  3. Step 3 media

    Caption for step 3

    Step 3 of 5: Step 3 - media-right

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

  4. Step 1 media

    Caption for step 4

    Step 4 of 5: Step 4 - media-bottom

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

    Read more
  5. Step 2 media

    Caption for step 5

    Step 5 of 5: Step 5 - media-wide

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Scrollytelling - straight line, solid

  1. Step 1 media

    Caption for step 1

    Step 1 of 3: Step 1

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

    Read more
  2. Step 2 media

    Caption for step 2

    Step 2 of 3: Step 2

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

  3. Step 3 media

    Caption for step 3

    Step 3 of 3: Step 3

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Scrollytelling – media ratio 1:1, headline tag h2

  1. Step 1 media

    Caption for step 1

    Step 1 of 3: Step 1

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

    Read more
  2. Step 2 media

    Caption for step 2

    Step 2 of 3: Step 2

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

  3. Step 3 media

    Caption for step 3

    Step 3 of 3: Step 3

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Scrollytelling – media ratio 3:4, headline tag h4

  1. Step 1 media

    Caption for step 1

    Step 1 of 3: Step 1

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

    Read more
  2. Step 2 media

    Caption for step 2

    Step 2 of 3: Step 2

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

  3. Step 3 media

    Caption for step 3

    Step 3 of 3: Step 3

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Scrollytelling – headline tag h5

  1. Step 1 media

    Caption for step 1

    Step 1 of 3: Step 1

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

    Read more
  2. Step 2 media

    Caption for step 2

    Step 2 of 3: Step 2

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

  3. Step 3 media

    Caption for step 3

    Step 3 of 3: Step 3

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Back to top