🎉 Black Friday deal! 30% 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.

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 aspect-ratio utility classes available in CodyFrame.

Effect disabled #

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