rayelliott
/
marc-leopold
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update taglines/tagline transitions

This commit is contained in:
ManjaroOne666 2019-01-22 17:38:41 +00:00
parent 4801c5702f
commit 6d12a3e0bc
1 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
pages/index.vue
View File

@ -47,12 +47,10 @@ export default {
currentTaglineIndex: -1, currentTaglineIndex: -1,
taglines: [ taglines: [
'the essence of the image', 'the essence of the image',
'tagline two', 'an image of the essential',
'tagline three', 'a solitary instance',
'tagline four', 'an eternal instance',
'tagline fove', 'I imagine myself',
'tagline soix',
'tagline servienne',
], ],
} }
}, },
@ -74,7 +72,7 @@ export default {
mounted () { mounted () {
if (this.bgImages.length > 1) { if (this.bgImages.length > 1) {
this.setNextIndex() this.setNextIndex()
this.nextTagline() // this.nextTagline()
} }
}, },
@ -91,8 +89,10 @@ export default {
handleImageLoaded () { handleImageLoaded () {
window.setTimeout(() => { window.setTimeout(() => {
this.setNextIndex()
this.nextTagline() this.nextTagline()
}, 700)
window.setTimeout(() => {
this.setNextIndex()
}, 6000) }, 6000)
}, },
@ -115,10 +115,11 @@ $padding: 1rem;
padding: $site-menu__header-height + $padding $padding $padding; padding: $site-menu__header-height + $padding $padding $padding;
font-size: 1rem; font-size: .5rem;
@media (min-width: $bp__layout) { @media (min-width: $bp__layout) {
padding: $padding $padding $padding $site-menu__header-width + $padding; padding: $padding $padding $padding $site-menu__header-width + $padding;
font-size: 1rem;
} }
} }
@ -175,8 +176,12 @@ $padding: 1rem;
width: 100%; width: 100%;
max-width: 80rem; max-width: 80rem;
margin: 0 auto; margin: 0 auto;
padding: 2rem 3rem 1rem;
padding: 1rem 0 0;
@media (min-width: $bp__layout) {
padding: 2rem 3rem 1rem;
}
} }
.heading { .heading {
@ -196,11 +201,11 @@ $padding: 1rem;
.fade { .fade {
$timing: .7; $timing: .7;
&-enter-active { &-enter-active {
transition: opacity 4s * $timing 1.5s * $timing ease-in; transition: opacity 5s * $timing .5s ease-in;
} }
&-leave-active { &-leave-active {
transition: opacity 2s * $timing ease-out .2s; transition: opacity 2s * $timing ease-out;
} }
&-enter, &-leave-to { &-enter, &-leave-to {