<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"> <transition name="fade"> <h1 v-if="showHeading" class="heading">Marc Leopold Photography</h1> </transition> <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 { showHeading: false, 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', 'an image of the essential', 'a solitary instance', 'an eternal instance', 'I imagine myself', ], } }, 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.showHeading = true } }, 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.nextTagline() }, 700) window.setTimeout(() => { this.setNextIndex() }, 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: .5rem; @media (min-width: $bp__layout) { padding: $padding $padding $padding $site-menu__header-width + $padding; font-size: 1rem; } } .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: 1rem 0 0; @media (min-width: $bp__layout) { padding: 2rem 3rem 1rem; } } .heading { color: $color__neutral-900; font-size: $heading-height; @include font-title(400); text-align: center; } .tagline { color: $color__neutral-600; font-size: $tagline-height; text-align: right; @include font-cursive; } .fade { $timing: .7; &-enter-active { transition: opacity 5s * $timing .5s ease-in; } &-leave-active { transition: opacity 2s * $timing ease-out; } &-enter, &-leave-to { opacity: 0; } } </style>