Kinsey

# On-scroll Next Page Transition

# Markup

<section 
  class="container-fluid section section-nav-projects section-fullheight text-center bg-portfolio-2" 
  data-arts-fixed-reveal="true" 
  data-arts-fixed-reveal-from="-33vh" 
  data-arts-fixed-reveal-disabled-at="max-width: 767px" 
  data-arts-prefetch-enabled="true" 
  data-arts-theme-text="light"
  >
  <!-- content -->
  <div class="section-nav-projects__inner container section-fullheight__inner">
    <!-- header -->
    <header class="section-nav-projects__header">
      <a
        class="section-nav-projects__link pointer-events-none js-arts-cursor-no-highlight"
        href="014-portfolio-details-masthead-boxed-horizontal.html"
        data-pjax-link="autoScrollNext"
        >
        <!-- helping labels -->
        <div class="section-nav-projects__subheading small mb-1">
          <span class="section-nav-projects__label section-nav-projects__label_next">Next Project</span>
          <span class="section-nav-projects__label section-nav-projects__label_scroll">Keep Scrolling</span>
        </div>
        <!-- - helping labels -->
        <h2
          class="section-nav-projects__heading h1 my-0 section-nav-projects__progress-underline underline js-transition-heading arts-split-text js-arts-split-text"
          data-arts-split-text="lines,words,chars"
          >Zero Audio Speaker
        </h2>
      </a>
    </header>
    <!-- - header-->
    <!-- next image-->
    <div class="section-nav-projects__next-image mt-xsmall mx-auto js-transition-img">
      ...
    </div>
    <!-- - next image-->
  </div>
  <!-- - content -->
  <!-- spacing element -->
  <div class="section-nav-projects__spacer d-md-block d-none"></div>
  <!-- - spacing element-->
</section>

# Attributes

You can find how [data-arts-fixed-reveal] attributes work in the related article: Fixed reveal.

  • data-arts-prefetch-enabled=[ true | false ] – when AJAX navigation is turned on, we can prefetch the contents of the next portfolio project and store it in cache. This should improve the loading time during AJAX transition.

# Elements

  • .section-nav-projects – outer section.
  • .section-nav-projects__link – element with the next page URL. Should have [data-pjax-link="autoScrollNext"] attribute for the seamless image & heading transition.
  • .section-nav-projects__label_next – indicator element with the normal state.
  • .section-nav-projects__label_scroll – indicator element which will appear on animation start.
  • .section-nav-projects__spacer – spacer element. Increasing its height will increase the distance needed to scroll to begin the transition to the next page.

# Showcase

  • 📄 Portfolio pages 013 – 024.

← Fixed Reveal →