Projects Backgrounds

There is a special HTML section where you should put all your project backgrounds on all the pages. This is used for correct transition animations and hover effects.

  <!-- Project hover backgrounds-->
  <div class="project-backgrounds">
    <div class="project-backgrounds__background lazy-bg" data-src="img/assets/projects/bg-1.jpg"
      data-background-for="1"></div>
    <div class="project-backgrounds__background lazy-bg" data-src="img/assets/projects/bg-2.jpg"
      data-background-for="2"></div>
    <div class="project-backgrounds__background lazy-bg" data-src="img/assets/projects/bg-3.jpg"
      data-background-for="3"></div>
    <div class="project-backgrounds__background lazy-bg" data-src="img/assets/projects/bg-4.jpg"
      data-background-for="4"></div>
    <div class="project-backgrounds__background lazy-bg" data-src="img/assets/projects/bg-5.jpg"
      data-background-for="5"></div>
    <div class="project-backgrounds__background lazy-bg" data-src="img/assets/projects/bg-6.jpg"
      data-background-for="6"></div>
    <div class="project-backgrounds__background lazy-bg" data-src="img/assets/projects/bg-7.jpg"
      data-background-for="7"></div>
    <div class="project-backgrounds__overlay overlay overlay_dark"></div>
  </div>
  <!-- - Project hover backgrounds-->

You always have to specify and ID number in the attribute [data-background-for=”1″] Those are referenced on links throughout the template like this:

<a href="project-1.html" data-post-id="1" data-pjax-link="overlayMenu">..</a>

Those ID’s are used to tell plugin what page is being loaded after click on the link. This is needed to create those smooth seamless transitions between the pages.

So basically the image that you have in masthead on your projects pages should be the in .project-backgrounds with correct ID set.

<!-- In the masthead there is a background with source img/assets/projects/bg-3.jpg -->
<section class="section section-masthead section_pt" data-os-animation="data-os-animation">
  ...
  <div class="art-parallax__bg lazy-bg" data-src="img/assets/projects/bg-3.jpg"></div>
  ...
</section>
<!-- The same image img/assets/projects/bg-3.jpg -->
<!-- goes into project backgrounds container on all the pages -->
<div class="project-backgrounds">
  ...
  <div class="project-backgrounds__background lazy-bg" data-src="img/assets/projects/bg-3.jpg" data-background-for="3"></div>
  ...
</div>
<!-- And the same logic applies on hovers & transitions -->
<!-- in prev/next navigation section -->

<section class="section section-nav-projects container-fluid no-gutters">
  <div class="row no-gutters h-100">
    <!-- Link with ID 2 will show background with  -->
    <!-- attribute [data-background-for="2"] on hover  -->
    <a class="col-md-6 section-nav-projects__inner section-nav-projects__inner_prev" href="project-2.html" data-pjax-link="navProjects" data-post-id="2">
      <div class="section-nav-projects__label section-nav-projects__label_prev">Prev</div>
      <div class="section-nav-projects__arrow"><i class="material-icons">keyboard_arrow_left</i></div>
      <h3>Interior Design App</h3>
    </a>
    <!-- Link with ID 4 will show background with  -->
    <!-- attribute [data-background-for="4"] on hover  -->
    <a class="col-md-6 section-nav-projects__inner section-nav-projects__inner_next" href="project-4.html" data-pjax-link="navProjects" data-post-id="4">
      <div class="section-nav-projects__label section-nav-projects__label_next">Next</div>
      <h3>Enchanted Pond Side</h3>
      <div class="section-nav-projects__arrow"><i class="material-icons">keyboard_arrow_right</i></div>
    </a>
  </div>
  <div class="section-nav-projects__backgrounds">
    <!-- Transition image img/assets/projects/bg-2.jpg with ID 2  -->
    <div class="section-nav-projects__background section-nav-projects__background_prev lazy-bg"
      data-src="img/assets/projects/bg-2.jpg" data-background-for="2"></div>
    <!-- Transition image img/assets/projects/bg-4.jpg with ID 4  -->
    <div class="section-nav-projects__background section-nav-projects__background_next lazy-bg"
      data-src="img/assets/projects/bg-4.jpg" data-background-for="4"></div>
    <div class="overlay overlay_dark section-nav-projects__overlay"></div>
  </div>
</section>