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

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)
}
})
}