Working with Full Width and Height Hero Images and Videos

Adding a Menu Button

PHP for the Genesis Framework for WordPress:

/* Frontpage Scroll Menu Section
--------------------------------------------- */

add_action( 'get_header', 'bubdev_add_scroll_button' );
/**
 * Scroll Menu Section
 */
function bubdev_add_scroll_button() {

  if ( is_front_page() ) {

    add_action( 'genesis_before_content', 'bubdev_scroll_button');
    function bubdev_scroll_button() {

      $icon = BBE_URL . '/media/icons/ic-menu-hamburger.svg' ?>

      <section class="bub-before-content">
        <div class="bub-scroll-button">
          <img src="<?php echo $icon ?>">
        </div>
      </section>
    <?php
    }
  }
}

CSS:

/* Scroll Button Section
--------------------------------------------- */

.bub-before-content {
  position: absolute;
    top: 0;
    right: 15px;
  width: 100%;
  z-index: 9;
}

.admin-bar .bub-before-content {
  top: 32px;
}

.bub-scroll-button {
  background: rgba(0,0,0,.2);
  cursor: pointer;
  display: table;
  margin: 0 0 0 auto;
  padding: 14px 22px;
}

.bub-scroll-button img {
  width: 47px;
}

Adding a Scroll Indicator

A couple of CSS animations for the scroll indicator.

Bouncing Down Arrow

CSS only:

/* Down Arrow */
arrow {
  -webkit-animation: arrowBounce 1.5s infinite;
          animation: arrowBounce 1.5s infinite;
}

@-webkit-keyframes arrowBounce {
  
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
  60% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
}

@keyframes arrowBounce {
  
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
  60% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
}

Flying Down Arrow

CSS only:

.arrow {
  -webkit-animation: arrowBounce 1s infinite ease-in-out;
          animation: arrowBounce 1s infinite ease-in-out;
}

@-webkit-keyframes arrowBounce {
  
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  60% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
}

@keyframes arrowBounce {
  
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
}

Scroll below Hero Image on Click

/* Scroll Below Hero Image on Click
--------------------------------------------- */

/**
 * Click to Scroll to Position
 *
 * @borrows bubSiteSettings.mobileMenuMaxWidth
 */
$(function() {
  
  $( '.arrow' ).on( 'click', function() {

    // Set scroll top position and take into account the mobile menu.
    var scrollTopPosition = window.innerWidth > bubSiteSettings.mobileMenuMaxWidth ? 
      window.innerHeight - 55 : window.innerHeight;
  
    $( 'html, body' ).animate({
      scrollTop: scrollTopPosition
    }, 400);
  })
  .css({
    'cursor': 'pointer', 
    '-webkit-user-select': 'none',
    '-moz-user-select': 'none',
    '-ms-user-select': 'none',
    'user-select': 'none'
  });
});

Fade Hero Image to Black on Scroll

/* Fade Hero Image to Black on Scroll
--------------------------------------------- */

$(function() {
  
  // Initial opacity value;
  var opacity = 0; 

  // Element to fade.
  var $fadingElement = $( '.bubfl-row-hero-image .fl-row-content-wrap' );

  // Position at which opacity is 1.
  var fadeStart = 0;

  $( window ).on( 'scroll', function() {

    // Position at which opacity is 0.
    var fadeUntil = window.innerHeight;
    
    // Current scroll position.
    var offset = $( document ).scrollTop();

    if ( offset <= fadeStart ) {
      opacity = 1;
    } 
    else if ( offset <= fadeUntil ) {
      opacity = 1 - offset / fadeUntil;
    }
    $fadingElement.css( 'opacity' , opacity );
  });
});