Hero: Somatuline 

<header id="hero" class="hero hero--has-image   hero---background hero---gradient parallax">

    <div class="hero__background parallax-background" style="background-image: url('/img/somatuline-hero.jpg'); background-position: % %;"></div>

    <div class="hero__background hero__background--mobile parallax-background" style="background-image: url(''); background-position: % %;"></div>

    <section class="hero__upper">
        <div class="hero__main">
            <div>
                <h1 class="heading heading--large ">
                    Somatuline heading example
                </h1>
            </div>

            <div class="hero__content">
                <p>Somatuline® Depot is the 1st and only FDA-approved treatment for adults both to slow the growth of gastrointestinal and pancreatic neuroendocrine tumors (GEP‑NETs) that have spread or cannot be removed by surgery...and treat carcinoid
                    syndrome to reduce the need for the use of short-acting somatostatin medicine. It is not known if Somatuline Depot is safe and effective in children.</p>
            </div>
        </div>
        <div class="hero__icon">
            <div>
                <img src="/img/take-charg3.png">
            </div>
        </div>
    </section>
</header>
  • Content: 
    .hero {
  display: flex;
  flex-direction: column;
  position: relative;
  color: white;
  padding-top: calc(60px + #{$base-spacing});
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;

  &--has-min-height .hero__upper {
    min-height: 500px;
  }

  @media (min-width: $medium-screen) {
    padding-top: calc(120px + #{$base-spacing});

    &--tall {
      padding-top: calc(250px + #{$base-spacing});
    }
  }
  
  &--full-height {
    min-height: 100vh;

    .isi-is-present & {
      min-height: calc(100vh - 170px);
    }
  }

  &__background {
    position: absolute;
    bottom: 0;
    left: 0;
    background-size: cover !important;
    background-position: center;
    height: 100%;
    width: 100%;
    z-index: 1;

    &--mobile {
      display: none;
      @media (max-width: $medium-screen) {
        z-index: 3;
        display: block;
      }
    }
  }

  &::before {
    content: "";
    background-image: linear-gradient(to left, rgba(57, 51, 84, 0.3), #04032a);
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    opacity: 0.8;
  }

  @media (max-width: 768px) {
    &::before {
      background-image: linear-gradient(to bottom, rgba(0,0,0,0.0) 10%, rgba(57, 51, 84, 0.3) 15%, #04032a 100%);
    }
  }

  &--light-gradient {
      &::before {
        background-image: linear-gradient(to left, rgba(255, 255, 255, 0.3), #fff);
        opacity: 0.8;
        mix-blend-mode: normal;
      }

      @media (max-width: 768px) {
        &::before {
          background-image: linear-gradient(to bottom, rgba(255,255,255,0.0) 10%, rgba(255, 255, 255, 0.3) 15%, #fff 100%);
        }
      }

    color: black;
  }

  &--dark-gradient {
    .heading {
      color: white;
    } 
  }

  &--black-gradient {
    &::before {
      background-image: linear-gradient(to left, rgba(0, 0, 0, 0.3), #000);
      opacity: 0.8;
    }
  }

  &--no-image {
    &::before {
      display: none;
    }
    color: black;

    .hero__main,
    .hero__heading,
    .hero__content {
      width: 100%;
      max-width: none;
    }

    .hero__heading {
      margin-top: 2rem !important;
    }

    @media (max-width: $medium-screen) {
      padding-top: 60px;
    }
  }

  &--dark-background {
    color: white;

    @include themify($themes) {
      background-color: themed('ctaGradient');
    }
  }

  &__upper {
    @include poly-padding--large;

    width: 100%;
    max-width: $container-width;
    margin: auto;
    z-index: 10;
    filter: blur(0);
    display: flex;
    flex-wrap: wrap-reverse;
  }

  &__main {
    width: 650px;
    max-width: 100%;
    margin: auto 0;
  }

  &__content {
    margin: $base-spacing/2 0 $base-spacing;
    width: 450px;
    max-width: 100%;

    p {
      font-size: 14px;
      font-weight: 400;
    }
  }

  &__legal {
    margin: $base-spacing/2 0 $base-spacing;

    p {
      font-size: 13px;
      letter-spacing: normal;
      font-weight: 400;
    }
  }

  &__heading {
    font-weight: 900;
    line-height: 1.18;
    width: 450px;
    max-width: 100%;
  }

  &__lower {
    z-index: 10;
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    background-image: linear-gradient(to bottom, rgba(57, 51, 84, 0), rgba(6, 1, 44, 0.8));
    min-height: 1px; // Required to work properly in IE11

    .browser--ie11 & {
      position: absolute;
      bottom: 0;
    }
  }

  &__icon {
    max-width: 360px;
    min-width: 260px;
    padding: $base-spacing 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.highlight {
  @include poly-padding--large;

  display: flex;
  flex-direction: column;
  color: white;
  background-color: #003c68;
  flex-basis: 25%;
  font-family: 'Biryani', sans-serif;
  transition: background-color 0.3s;
  margin-left: auto;
  color: white;

  p {
    letter-spacing: normal;
  }

  @include themify($themes) {
    background-color: themed('highlightColor');

    &:hover {
      background-color: themed('ctaColor');
    }
  }

  &__heading {
    font-family: 'Biryani', sans-serif;
    font-size: 12px;
    font-weight: 200;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: 3.4px;
    text-transform: uppercase;
    color: white;
  }

  &__text {
    font-size: 20px;
    font-weight: 900;
    line-height: 1.3;
    color: white;
  }

  &__cta {
    font-weight: 900;
    font-size: 12px;
    color: white;
  }
}

.latest-updates {
  @include poly-padding--large;

  display: flex;
  align-items: center;
  justify-content: space-between;

  @media (max-width: #{$medium-screen - 1}) {
    flex-direction: column;
    width: 100%;

    @include themify($themes) {
      background-color: themed('highlightColor');
    }
  }

  &__title {
    font-family: 'Biryani', sans-serif;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.2;
    width: 200px;

    @media (max-width: #{$medium-screen - 1}) {
      width: 100%;
      font-size: 25px;
      margin-bottom: 1rem;
    }
  }

  &__posts {
    display: flex;

    @media (max-width: #{$medium-screen - 1}) {
      flex-direction: column;
      width: 100%;
    }
  }

  &__post {
    display: flex;
    padding: $base-spacing;
    color: $white;

    @media (max-width: #{$medium-screen - 1}) {
      width: 100%;
      padding: 0 0 1.5rem;
    }

    &__image {
      max-width: 75px;
      margin-right: $base-spacing;

      @media (max-width: #{$medium-screen - 1}) {
        max-height: 50px;
        overflow: hidden;
      }

      img  {
        max-width: 75px; // for some reason IE11 needs this
      }
    }

    &__label {
      p {
        font-size: 14px;
      }

      span {
        font-family: $biryani;
        font-size: 12px;
        font-weight: 200;
        letter-spacing: 3.4px;
        color: #81cfe2;
        text-transform: uppercase;
      }
    }
  }
}

.fade-out {
  transform: translateY(10%); // scale(0.975);
  opacity: 0;
  filter: blur(10px);
}

header.hero section.hero__upper div.hero__main h1.heading.heading--large.has-pre-heading {
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
}
  • URL: /components/raw/hero/_hero.scss
  • Filesystem Path: src/components/global/hero/_hero.scss
  • Size: 6.2 KB
  • Content: 
    /* hero */
import $ from 'jQuery'
import TweenMax from 'TweenMax'
import ScrollMagic from 'ScrollMagic'
import 'animation.gsap'
import 'debug.addIndicators'

$.fn.parallax = function () {
  return $(this).each(function () {
    let plxBackground = $(this).children('.parallax-background')
    let plxWindow = $(this)
    let plxWindowTopToPageTop = $(plxWindow).offset().top
    let windowTopToPageTop = $(window).scrollTop()
    let plxWindowTopToWindowTop = plxWindowTopToPageTop - windowTopToPageTop
    let plxSpeed = 0.10

    plxBackground.css({
      'transform': 'translate3d(0px, ' + -(plxWindowTopToWindowTop * plxSpeed) + 'px' + ', 0px)'
    })
  })
}

$(window).scroll(function (e) {
  $('.parallax').parallax()
})

function calcOffset() {
  let mastheadHeight = $('.masthead').outerHeight()
  let offset = mastheadHeight

  let stickyHeight = $('#stickycta').outerHeight()
  offset =  Number(offset) +  Number(stickyHeight)

  $('.hero').css('padding-top', offset + 'px')
}

$(document).ready(function () {
  let controller = new ScrollMagic.Controller()
  let windowWidth = $(window).outerWidth()
  let sticktyCTA = $('#stickycta')
  let mobileSize = 769
  let testResize = false

  if (windowWidth < mobileSize && sticktyCTA.length) {
    calcOffset() 
  }

  // build tween
  let fade = TweenMax.to('.hero--has-image .hero__upper', 1, {className: '+=fade-out'})
  // let blur = TweenMax.to('.hero__upper', 1, {css: {filter: 'blur(10px)'}})

  // build scene
  var fades = new ScrollMagic.Scene({
    triggerElement: '.hero__lower',
    duration: 300, /* How many pixels to scroll / animate */
    offset: -100 /* offset the trigger 150px below #scene's top */
  })
    .setTween([fade])

  let navToggle = new ScrollMagic.Scene({
    triggerElement: '.page-main',
    triggerHook: 'onLeave',
    offset: -120
  })

  if (!$('.hero--has-image').length) {
    $('.masthead--corporate').addClass('masthead--white')
  } else {
    navToggle.setClassToggle('.masthead--corporate', 'masthead--white').addTo(controller)
  }

  // fades.addTo(controller)

  $(window).resize(function() {
    testResize = true
  });

  setInterval(function() {
      if ( testResize ) {
        testResize = false
        if (windowWidth < mobileSize && sticktyCTA.length) {
          calcOffset() 
        }
      }
  }, 100);
})
  • URL: /components/raw/hero/hero.js
  • Filesystem Path: src/components/global/hero/hero.js
  • Size: 2.3 KB