Rubenz

# 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.

# Markup

<!-- 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 an ID number in the attribute data-background-for="1". These are referenced on links throughout the template like this:

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

These IDs are used to tell the plugin what page is being loaded after clicking on the link. This is needed to create those smooth seamless transitions between the pages.

So basically, the image that you have in the masthead on your projects pages should be in .project-backgrounds with the 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>

← Smooth Scroll →