Academy of Natural Sciences

Page Header Impact 

<div id="impact-header" class="c-impact-header">
    <h1 class="u-sr-only">Impact</h1>
    <ul class="c-impact-header__slides">

        <li class="c-impact-header__slide">
            <div class="c-impact-header__slide-media">
                <video muted playsinline>
                    <source src="/video/impact/Plant_comp.mp4" type="video/mp4">
                </video>

            </div>
            <div class="c-impact-header__slide-content">
                <div class="c-impact-header__slide-content-inner">
                    <p class="c-impact-header__slide-title">We are a force for</p>
                    <p class="u-sr-only">sustainability</p>
                    <p class="c-impact-header__slide-text" aria-hidden="true">sustainability</p>
                </div>
            </div>
        </li>

        <li class="c-impact-header__slide">
            <div class="c-impact-header__slide-media">
                <video muted playsinline>
                    <source src="/video/impact/snake_comp.mp4" type="video/mp4">
                </video>

            </div>
            <div class="c-impact-header__slide-content">
                <div class="c-impact-header__slide-content-inner">
                    <p class="c-impact-header__slide-title">We are a force for</p>
                    <p class="u-sr-only">biodiversity</p>
                    <p class="c-impact-header__slide-text" aria-hidden="true">biodiversity</p>
                </div>
            </div>
        </li>

        <li class="c-impact-header__slide">
            <div class="c-impact-header__slide-media">
                <video muted playsinline>
                    <source src="/video/impact/caterpillar_comp.mp4" type="video/mp4">
                </video>

            </div>
            <div class="c-impact-header__slide-content">
                <div class="c-impact-header__slide-content-inner">
                    <p class="c-impact-header__slide-title">We are a force for</p>
                    <p class="u-sr-only">environmental education</p>
                    <p class="c-impact-header__slide-text" aria-hidden="true">environmental education</p>
                </div>
            </div>
        </li>

        <li class="c-impact-header__slide">
            <div class="c-impact-header__slide-media">
                <video muted playsinline>
                    <source src="/video/impact/lobster_comp.mp4" type="video/mp4">
                </video>

            </div>
            <div class="c-impact-header__slide-content">
                <div class="c-impact-header__slide-content-inner">
                    <p class="c-impact-header__slide-title">We are a force for</p>
                    <p class="u-sr-only">clean water</p>
                    <p class="c-impact-header__slide-text" aria-hidden="true">clean water</p>
                </div>
            </div>
        </li>

        <li class="c-impact-header__slide">
            <div class="c-impact-header__slide-media">
                <video muted playsinline>
                    <source src="/video/impact/birds_comp.mp4" type="video/mp4">
                </video>

            </div>
            <div class="c-impact-header__slide-content">
                <div class="c-impact-header__slide-content-inner">
                    <p class="c-impact-header__slide-title">We are a force for</p>
                    <p class="u-sr-only">nature</p>
                    <p class="c-impact-header__slide-text" aria-hidden="true">nature</p>
                </div>
            </div>
        </li>

    </ul>
    <div class="c-impact-header__controls">
        <div class="o-container c-impact-header__controls-wrapper">
            <div class="c-impact-header__controls-inner">
                <div class="c-impact-header__control-item">
                    <button class="c-impact-header__control-button">
                        <span class="c-impact-header__control-icon is-playing">
                            <span class="u-sr-only">Pause animations</span>
                            <svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path class="u-ct-stroke" d="M9 0.0341797L9 13.8789" stroke="#C34737" stroke-width="2" />
                                <path class="u-ct-stroke" d="M1 0.0341797L0.999999 13.8789" stroke="#C34737" stroke-width="2" />
                            </svg>

                        </span>
                        <span class="c-impact-header__control-icon is-paused">
                            <span class="u-sr-only">Play animations</span>
                            <svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path class="u-ct-stroke" d="M1 15V1L12 8L1 15Z" stroke="#C34737" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>

                        </span>
                    </button>
                </div>
                <p class="c-impact-header__control-message f-text--credit">Videos do not contain audio</p>
            </div>
        </div>
    </div>
</div>
 
<div id="impact-header" class="c-impact-header">
  <h1 class="u-sr-only">{{ title }}</h1>
  <ul class="c-impact-header__slides">
    {% for item in items %}
      <li class="c-impact-header__slide">
        <div class="c-impact-header__slide-media">
          <video muted playsinline>
            <source src="{{ item.videoUrl }}" type="video/mp4">
          </video>
          {% if item.video_description %}
            <div class="u-sr-only">
              {{ item.video_description|raw }}
            </div>
          {% endif %}
        </div>
        <div class="c-impact-header__slide-content">
          <div class="c-impact-header__slide-content-inner">
            <p class="c-impact-header__slide-title">We are a force for</p>
            <p class="u-sr-only">{{ item.title }}</p>
            <p class="c-impact-header__slide-text" aria-hidden="true">{{ item.title }}</p>
          </div>
        </div>
      </li>
    {% endfor %}
  </ul>
  <div class="c-impact-header__controls">
    <div class="o-container c-impact-header__controls-wrapper">
      <div class="c-impact-header__controls-inner">
        <div class="c-impact-header__control-item">
          <button class="c-impact-header__control-button">
            <span class="c-impact-header__control-icon is-playing">
              <span class="u-sr-only">Pause animations</span>
              {% include "03-icons/pause" %}
            </span>
            <span class="c-impact-header__control-icon is-paused">
              <span class="u-sr-only">Play animations</span>
              {% include "03-icons/play" %}
            </span>
          </button>
        </div>
        <p class="c-impact-header__control-message f-text--credit">Videos do not contain audio</p>
      </div>
    </div>
  </div>
</div>
 
{
  "pageColorTheme": "plum",
  "title": "Impact",
  "items": [
    {
      "videoUrl": "/video/impact/Plant_comp.mp4",
      "title": "sustainability"
    },
    {
      "videoUrl": "/video/impact/snake_comp.mp4",
      "title": "biodiversity"
    },
    {
      "videoUrl": "/video/impact/caterpillar_comp.mp4",
      "title": "environmental education"
    },
    {
      "videoUrl": "/video/impact/lobster_comp.mp4",
      "title": "clean water"
    },
    {
      "videoUrl": "/video/impact/birds_comp.mp4",
      "title": "nature"
    }
  ]
}
  • Content: 
    .c-impact-header {
  position: relative;
  margin-top: -3.2rem;
  margin-bottom: 30rem;
  @include break($sm) {
    margin-bottom: 6.4rem;
  }
}

.c-impact-header__slides {
  position: relative;
  height: 56.25vw;
  max-height: calc(100vh - 13.8rem);
}

.c-impact-header__slide {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0s;

  &.is-ready {
    visibility: visible;
  }

  &.can-animate {
    opacity: 1;
  }
}

.c-impact-header__slide-media {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.c-impact-header__slide-content {
  position: absolute;
  top: 30%;
  left: 0;
  width: 100%;
}

.c-impact-header__slide-content-inner {
  margin: 0 auto;
  text-align: center;
  width: 90%;
  max-width: 90rem;
}

.c-impact-header__slide-title {
  margin-bottom: 1rem;
  font-size: 2.4rem;
  line-height: 1.3;

  @include break($xs) {
    font-size: 3.2rem;
  }

  @include break($sm) {
    font-size: 4.8rem;
    margin-bottom: 2.4rem;
  }

  @include break($md) {
    font-size: 6.4rem;
  }
}

.c-impact-header__slide-text {
  font-size: 3.2rem;
  font-weight: $f-bold;
  color: var(--ct-dark);
  line-height: 1.2;

  @include break($xs) {
    font-size: 3.2rem;
  }

  @include break($sm) {
    font-size: 6.4rem;
  }

  @include break($md) {
    font-size: 9.4rem;
  }
}

.c-impact-header__controls {
  margin-top: -0.8rem;

  @include break($sm) {
    position: absolute;
    left: 0;
    bottom: 0;
    padding-bottom: 2.4rem;
    width: 100%;
  }
}

.c-impact-header__controls-inner {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;

  @include break($sm) {
    display: block;
    text-align: right;
  }
}

.c-impact-header__control-button {
  width: 4.4rem;
  height: 4.4rem;
  position: relative;
  color: var(--ct-txt);
  position: relative;

  @include break($sm) {
    margin-bottom: 1.2rem;
    color: var(--ct-text-on-dark);
  }

  &:before {
    content: '';
    display: block;
    background-color: transparent;
    border: 0.1rem solid var(--ct-txt);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    width: 2.2rem;
    height: 2.2rem;

    @include break($sm) {
      width: 4.4rem;
      height: 4.4rem;
      background-color: var(--ct-dark);
      border: 0;
    }
  }
}

.c-impact-header__control-icon {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;

  @include break($sm) {
    top: 48%;
  }

  &.is-playing {
    display: none;

    svg {
      width: 0.6rem;
      height: auto;

      @include break($sm) {
        width: 1rem;
      }
    }
  }

  &.is-paused {
    display: block;
    left: 53%;

    svg {
      width: 0.6rem;
      height: auto;

      @include break($sm) {
        width: 1.3rem;
      }
    }
  }

  .c-impact-header.is-playing & {
    &.is-playing {
      display: block;
    }

    &.is-paused {
      display: none;
    }
  }
}

.c-impact-header__slide-text {
  .word,
  .char {
    display: inline-block;
  }

  .char {
    opacity: 0;
    transform: translate3d(0, 1.6rem, 0);
    transition: all 0.18s ease-in-out;
    transition-delay: calc(0.2s + (0.05s * var(--char-index)));

    .c-impact-header__slide.can-animate-text & {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
}

.c-impact-header__slide-media video {
  margin-top: 14rem;
  transform: scale(1);
  @include break($sm) {
    margin-top: 0rem;
  }
}
  • URL: /components/raw/page-header-impact/page-header-impact.scss
  • Filesystem Path: patterns\06-components\page-header-impact\page-header-impact.scss
  • Size: 3.9 KB

No notes defined.