🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Immersive Section Transition

A media element that animates to a full-screen block, before transitioning to the next section of content.

Copy: View demo

Dependencies

All components are based on CodyFrame.

How To

Use this component to create an immersive transition between two sections, where a media item is scaled up to take the viewport dimensions before moving to the next content element.

Here's how the component HTML looks like:

<div class="immerse-section-tr js-immerse-section-tr">
  <div class="immerse-section-tr__media js-immerse-section-tr__media">
    <div class="container max-width-sm">
      <figure class="immerse-section-tr__figure js-immerse-section-tr__figure">
        <!-- your asset element here - video/img -->
      </figure>
    </div>
  </div>

  <section class="immerse-section-tr__content bg-transparent padding-y-lg margin-top-lg js-immerse-section-tr__content">
    <!-- your content here -->
  </section>
</div>

When using this component, some restrictions apply:

  • the .immerse-section-tr element must contain only two children, the .immerse-section-tr__media and the .immerse-section-tr__content; additional content must be placed outside it;
  • the .immerse-section-tr__media cannot have a top padding and/or margin (it will be overwritten in JS); you can apply those top padding/margin directly to the .immerse-section-tr element.

Background Color #

The .immerse-section-tr__content element does not have a background-color applied (we use the .bg-transparent class to set its background to transparent).

The bg color effect is created using an overlay layer (::after and ::before pseudo-elements) that has a bg color equal to --color-bg.

If you want to apply a different bg color, the best approach would be to create a color theme (e.g., a dark theme), set --color-bg equal to the new color you want to apply and add the data-theme attribute to the .immerse-section-tr element.

You can find more info on creating color themes in CodyFrame on our Colors documentation page.

Figure Aspect Ratio #

We have been using two different media elements (with different aspect ratio) according to the viewport size:

<div class="immerse-section-tr padding-top-md js-immerse-section-tr">
  <div class="immerse-section-tr__media js-immerse-section-tr__media">
    <div class="container max-width-sm">
      <!-- asset visible on small devices -->
      <figure class="immerse-section-tr__figure immerse-section-tr__figure--3-4 [email protected] js-immerse-section-tr__figure">
        <video src="../../../app/assets/video/immersive-section-transition-video-1.mp4" autoplay loop muted playsInline></video>
      </figure>

      <!-- asset visible on bigger devices -->
      <figure class="immerse-section-tr__figure immerse-section-tr__figure--16-9 [email protected] js-immerse-section-tr__figure">
        <video src="../../../app/assets/video/immersive-section-transition-video-2.mp4" autoplay loop muted playsInline></video>
      </figure>
    </div>
  </div>

  <section class="immerse-section-tr__content bg-transparent padding-y-xl js-immerse-section-tr__content">
    <!-- your content here -->
  </section>
</div>

The first one has an aspect ratio of 3/4 (.immerse-section-tr__figure--3-4 class), while the second has an aspect ratio of 16/9 (.immerse-section-tr__figure--16-9 class). You can modify those aspect ratio values in the component css or use one of the media-wrapper utility classes available in CodyFrame.

Limits #

The immersive transition effect is not visible if the height of the asset element is bigger than the viewport height or if (viewport height - asset height) is bigger than 600px.

Additionally, the effect is disabled if the reduced motion setting is on.

🌄 Video credits:

Categories

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us