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

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

67
src/utils/functions.js
View File

@@ -1,6 +1,16 @@
import { apiEndpoints } from './store'
/*
** Get thumbnail from API
*/
export const getThumbnail = (id, width, height, type = 'crop', quality = 75) => {
const ratio = 1.5
height = !height ? Math.round(width / ratio) : height
return `${apiEndpoints.rest}/assets/${id}?w=${width}&h=${height}&f=${type}&q=${quality}`
}
/*
** Debounce function with a delay
** (For scrolling or other resource demanding behaviors)
@@ -43,8 +53,26 @@ export const lettersToSpan = string => {
/*
** Format date from an input date
** Random String Generator
*/
export const randomString = (length = 6, type = 'A') => {
type = type && type.toLowerCase()
let str = ''
let i = 0
const min = type == 'a' ? 10 : 0
const max = type == 'n' ? 10 : 62
for (; i++ < length;) {
let r = Math.random() * (max - min) + min << 0
str += String.fromCharCode(r += r > 9 ? r < 36 ? 55 : 61 : 48)
}
return str
}
/*
** Date related
*/
// Format date from an input date
export const formatDate = (originDate, format) => {
let output
const date = new Date(originDate)
@@ -70,10 +98,7 @@ export const formatDate = (originDate, format) => {
return output
}
/*
** Relative time from an input date
*/
// Relative time from an input date
export const relativeTime = (originDate, limit = 0) => {
const date = new Date(originDate)
const diff = Number(new Date()) - date
@@ -133,29 +158,19 @@ export const relativeTime = (originDate, limit = 0) => {
}
/*
** Random String Generator
** Controls Anime.js parallax
*/
export const randomString = (length = 6, type = 'A') => {
type = type && type.toLowerCase()
let str = ''
let i = 0
const min = type == 'a' ? 10 : 0
const max = type == 'n' ? 10 : 62
for (; i++ < length;) {
let r = Math.random() * (max - min) + min << 0
str += String.fromCharCode(r += r > 9 ? r < 36 ? 55 : 61 : 48)
export const parallaxAnime = (element, anime) => {
const bound = element.getBoundingClientRect()
const windowHeight = window.innerHeight
if (bound.top < windowHeight && bound.bottom > 0) {
anime.seek(anime.duration * ((windowHeight - bound.top) / (windowHeight + bound.height)).toFixed(3))
} else {
if (bound.top >= windowHeight) {
anime.seek(0)
} else if (bound.bottom <= 0) {
anime.seek(anime.duration)
}
return str
}
/*
** Get thumbnail from API
*/
export const getThumbnail = (id, width, height, type = 'crop', quality = 75) => {
const ratio = 1.5
height = !height ? Math.round(width / ratio) : height
return `${apiEndpoints.rest}/assets/${id}?w=${width}&h=${height}&f=${type}&q=${quality}`
}