Buch & Berger

  • Angebot
  • Agentur
  • Blog
  • Kontakt
  • Search

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 );
  });
});

 

Bearbeitet: 2019-10-13
Veröffentlicht: 2017-02-09
Rubrik: Developer Notes

Stefan Buchberger

Über den Autor

Stefan Buchberger beschäftigt sich seit vielen Jahren mit der Präsentation, Verbreitung und Kommunikation von Inhalten. Er war vor allem als Buchverleger aktiv.

Heute gilt seine Aufmerksamkeit einer nachhaltigeren Form der Webentwicklung, welche die Inhalte zurück in den Fokus rückt.

Seitenleiste

Neue Beiträge

SiteGround: Renewal Reminders

Sobald sich die Vertragslaufzeit für einen SiteGround-Service (z.B. Hosting oder Domain) ihrem Ende nähert, erhalten …

Wartungsbericht: Begriffe erklärt

Unsere Wartungskunden erhalten regelmäßig einen individuellen Wartungsbericht für ihre Websites. Einige Begriffe, die wir darin …

Internationale Literaturdialoge

Das Projekt Internationale Literaturdialoge möchte innovative Kooperationsprojekte österreichischer Literaten mit Kreativen im Ausland ins Leben …
Mann skizziert Projekt auf Tafel

Wege zur Website: Nach Maß und von der Stange

Websites entstehen individuell und nach Maß oder auf Basis bestehender Vorlagen. Vielfach aber: sowohl als …
Boy singing in microphone

Testimonials: Das sagen unsere Kunden

Im Mittelpunkt eines Projekts steht für uns selbstverständlich die Zufriedenheit des Auftraggebers. Wir freuen uns …

Newsletter

Unser Newsletter mit Tipps und Angeboten erscheint wenige Male im Jahr. Infos zu Versand und Verarbeitung erhalten Sie in unserer Datenschutzerklärung.

    nav-social-menu

    • LinkedIn
    • RSS
  • Impressum
  • Datenschutz
Top ▲
Top ▲
Finde

Zeige alle ...

Generic filters