marc-leopold/pages/index.vue

<template>
  <section class="home">
    <div class="background background-img">
      <BackgroundImageLoader slot="background"
                             :image-url="currentImageUrl"
                             @imageLoaded="handleImageLoaded"
                             @imageLoadError="handleImageLoadError"
      />
      <div class="background background-overlay"></div>
    </div>
    <div class="content">
      <h1 class="heading">Marc Leopold Photography</h1>
      <transition name="fade" mode="out-in">
        <p class="tagline"
           :key="currentTaglineIndex">
          {{ taglines[currentTaglineIndex] }}
        </p>
      </transition>
    </div>
  </section>
</template>

<script>
import ContentPage from '@/components/ContentPage'
import BackgroundImageLoader from '@/components/BackgroundImageLoader'

export default {
  name: 'HomePage',

  components: {
    ContentPage,
    BackgroundImageLoader
  },

  data() {
    return {
      currentImageIndex: -1,
      bgImages: [
        'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/slider.jpg',
        'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/slider-2.jpeg',
        'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/slider-3.jpeg',
        'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/4-edit-3.jpg',
        'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/4-edit.jpg',
        'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/image-1.png',
        'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/slider-4.jpeg',
      ],
      currentTaglineIndex: -1,
      taglines: [
        'the essence of the image',
        'tagline two',
        'tagline three',
        'tagline four',
        'tagline fove',
        'tagline soix',
        'tagline servienne',
      ],
    }
  },

  computed: {
    currentImageUrl () {
      let url = null
      if (this.currentImageIndex > -1) {
        url = this.bgImages[this.currentImageIndex]
      }
      return url
    },

    tagLine () {
      return this.currentTaglineIndex > -1 ? this.taglines[this.currentTaglineIndex] : ''
    }
  },

  mounted () {
    if (this.bgImages.length > 1) {
      this.setNextIndex()
      this.nextTagline()
    }
  },

  methods: {
    setNextIndex () {
      this.currentImageIndex =
        this.currentImageIndex < this.bgImages.length - 1 ? this.currentImageIndex + 1 : 0
    },

    nextTagline () {
      this.currentTaglineIndex =
        this.currentTaglineIndex < this.taglines.length - 1 ? this.currentTaglineIndex + 1 : 0
    },

    handleImageLoaded () {
      window.setTimeout(() => {
        this.setNextIndex()
        this.nextTagline()
      }, 6000)
    },

    handleImageLoadError () {
      this.setNextIndex()
    },
  }
}
</script>

<style scoped lang="scss">
$heading-height: 4em;
$tagline-height: 2.5em;
$padding: 1rem;

.home {
  position: relative;
  width: 100%;
  height: 100%;

  padding: $site-menu__header-height + $padding $padding $padding;

  font-size: 1rem;

  @media (min-width: $bp__layout) {
    padding: $padding $padding $padding $site-menu__header-width + $padding;
  }
}

.background {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.background-img {
  z-index: -1;
}

.background-overlay {
  $color: $color__neutral-100;
  // $color: red;

  background-color: rgba($color, .4);
  background: linear-gradient(
    to bottom left,
    rgba($color, .1),
    rgba($color, .5)
  ),
  linear-gradient(
    to bottom,
    rgba($color, .9),
    rgba($color, .7) $heading-height * 1.5,
    rgba($color, .4) $heading-height * 3,
    rgba($color, 0) $heading-height * 6,
    rgba($color, 0)
  ),
  linear-gradient(
    to top,
    rgba($color, .6),
    rgba($color, 0) $tagline-height * 4,
    rgba($color, 0)
  ),
  linear-gradient(
    to right,
    rgba($color, .4),
    rgba($color, 0) 10%,
    rgba($color, 0) 90%,
    rgba($color, .4)
  );
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 2rem 3rem 1rem;

}

.heading {
  color: #fff;
  font-size: $heading-height;
  @include font-title(400);
  text-align: center;
}

.tagline {
  color: #fff;
  font-size: $tagline-height;
  text-align: right;
  @include font-cursive;
}

.fade {
  $timing: .7;
  &-enter-active {
    transition: opacity 4s * $timing 1.5s * $timing ease-in;
  }

  &-leave-active {
    transition: opacity 2s * $timing ease-out .2s;
  }

  &-enter, &-leave-to {
    opacity: 0;
  }
}
</style>