flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add parallax effects on scroll (titles and photo)

Browse Source
This commit is contained in:
Félix Péault
2020-03-11 14:51:06 +01:00
parent dddd004b1b
commit 7b7cc50790
3 changed files with 83 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/animations/Photo.js
View File

@@ -1,7 +1,7 @@
import anime from 'animejs'
import ScrollOut from 'scroll-out'
import { animDuration, animDurationLong } from '../utils/store'
import { debounce } from '../utils/functions'
import { throttle, parallaxAnime } from '../utils/functions'
/*
@@ -12,7 +12,6 @@ export const animateIn = scope => {
const titleReveal = ScrollOut({
once: true,
targets: scope,
offset: window.offsetHeight / 3,
onShown (el) {
// Title reveal
anime({
@@ -29,7 +28,6 @@ export const animateIn = scope => {
const photoReveal = ScrollOut({
once: true,
targets: scope.querySelector('picture'),
offset: window.offsetHeight / 3,
onShown (el) {
// Title reveal
anime({
@@ -43,6 +41,23 @@ export const animateIn = scope => {
}
})
// Number parallax
//! TODO
// Number parallax on scroll
const numberParallax = ScrollOut({
targets: scope.querySelector('.photo__number'),
onShown (el) {
const translate = anime({
targets: el,
translateX: ['-50%', '-50%'],
translateY: ['-50%', '-20%'],
duration: 2000,
easing: 'linear',
autoplay: false
})
window.addEventListener('scroll', () => parallaxAnime(el, translate))
setTimeout(() => parallaxAnime(el, translate), 50)
},
onHidden () {
window.removeEventListener('scroll', parallaxAnime)
}
})
}

46
src/animations/index.js
View File

@@ -1,7 +1,7 @@
import anime from 'animejs'
import ScrollOut from 'scroll-out'
import { animDuration } from '../utils/store'
import { debounce } from '../utils/functions'
import { throttle, parallaxAnime } from '../utils/functions'
/*
@@ -13,7 +13,7 @@ export const animateIn = () => {
once: true,
targets: '#title-houses',
onShown (el) {
// Reveal
// Reveal each letter
anime({
targets: el.querySelectorAll('span'),
translateY: ['-70%', 0],
@@ -23,19 +23,18 @@ export const animateIn = () => {
})
// Parallax on scroll
const translate = anime.timeline({
const translate = anime({
targets: el,
translateX: ['7%', '-15%'],
easing: 'linear',
autoplay: false,
duration: animDuration
})
translate.add({
targets: el,
translateX: ['-3%', '-17%'],
easing: 'easeOutQuart',
duration: animDuration
})
window.addEventListener('scroll', debounce(event => {
translate.seek(translate.duration * (window.scrollY / 1000))
}), 50)
window.addEventListener('scroll', throttle(() => parallaxAnime(el, translate), 10))
setTimeout(() => parallaxAnime(el, translate), 50)
},
onHidden () {
window.removeEventListener('scroll', parallaxAnime)
}
})
@@ -59,7 +58,7 @@ export const animateIn = () => {
const introCarousel = ScrollOut({
once: true,
targets: '#intro-carousel',
onShown(el) {
onShown (el) {
anime({
targets: el,
opacity: [0, 1],
@@ -100,22 +99,19 @@ export const animateIn = () => {
})
// Parallax on scroll
const translate = anime.timeline({
const translate = anime({
targets: el,
translateX: ['5%', '-3%'],
easing: 'linear',
autoplay: false,
duration: animDuration
})
translate.add({
targets: el,
translateX: ['4%', '-4%'],
easing: 'easeOutQuart',
duration: animDuration
})
if (ctx.visible) {
window.addEventListener('scroll', debounce(event => {
translate.seek(translate.duration * (window.scrollY / 1000))
}), 35)
}
window.addEventListener('scroll', throttle(() => parallaxAnime(el, translate), 10))
setTimeout(() => parallaxAnime(el, translate), 50)
},
onHidden() {
window.removeEventListener('scroll', parallaxAnime)
}
})
}