tagline transitions
This commit is contained in:
ManjaroOne666
parent
c328f35990
commit
4801c5702f
140
pages/index.vue
140
pages/index.vue
|
|
@ -1,11 +1,23 @@
|
||||||
<template>
|
<template>
|
||||||
<ContentPage heading="The Index Page Heading">
|
<section class="home">
|
||||||
|
<div class="background background-img">
|
||||||
<BackgroundImageLoader slot="background"
|
<BackgroundImageLoader slot="background"
|
||||||
:image-url="currentImageUrl"
|
:image-url="currentImageUrl"
|
||||||
@imageLoaded="handleImageLoaded"
|
@imageLoaded="handleImageLoaded"
|
||||||
@imageLoadError="handleImageLoadError"
|
@imageLoadError="handleImageLoadError"
|
||||||
/>
|
/>
|
||||||
</ContentPage>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -32,6 +44,16 @@ export default {
|
||||||
'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/image-1.png',
|
'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/image-1.png',
|
||||||
'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/slider-4.jpeg',
|
'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',
|
||||||
|
],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -42,12 +64,17 @@ export default {
|
||||||
url = this.bgImages[this.currentImageIndex]
|
url = this.bgImages[this.currentImageIndex]
|
||||||
}
|
}
|
||||||
return url
|
return url
|
||||||
|
},
|
||||||
|
|
||||||
|
tagLine () {
|
||||||
|
return this.currentTaglineIndex > -1 ? this.taglines[this.currentTaglineIndex] : ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted () {
|
mounted () {
|
||||||
if (this.bgImages.length > 1) {
|
if (this.bgImages.length > 1) {
|
||||||
this.setNextIndex()
|
this.setNextIndex()
|
||||||
|
this.nextTagline()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -57,9 +84,15 @@ export default {
|
||||||
this.currentImageIndex < this.bgImages.length - 1 ? this.currentImageIndex + 1 : 0
|
this.currentImageIndex < this.bgImages.length - 1 ? this.currentImageIndex + 1 : 0
|
||||||
},
|
},
|
||||||
|
|
||||||
|
nextTagline () {
|
||||||
|
this.currentTaglineIndex =
|
||||||
|
this.currentTaglineIndex < this.taglines.length - 1 ? this.currentTaglineIndex + 1 : 0
|
||||||
|
},
|
||||||
|
|
||||||
handleImageLoaded () {
|
handleImageLoaded () {
|
||||||
window.setTimeout(() => {
|
window.setTimeout(() => {
|
||||||
this.setNextIndex()
|
this.setNextIndex()
|
||||||
|
this.nextTagline()
|
||||||
}, 6000)
|
}, 6000)
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -71,4 +104,107 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<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>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue