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

Add parallax and reveal effects + performances on transitions

Browse Source
This commit is contained in:
Félix Péault
2020-02-17 22:38:51 +01:00
parent 0174ba08f2
commit 615182d6fb
12 changed files with 168 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/molecules/InteractiveGlobe.svelte
View File

@@ -1,3 +1,8 @@
<script>
// Idea: https://codepen.io/edankwan/pen/emqgpr
// Idea 2: ThreeJS globe: https://github.com/vasturiano/globe.gl
</script>
<div class="globe">
<div class="wrap">
<img src="/img/globe.png" alt="">

42
src/molecules/Photo.svelte
View File

@@ -1,8 +1,11 @@
<script>
import { onMount } from 'svelte'
import { site, currentLocation } from '../store'
import * as fn from '../functions'
// Dependencies
import AOS from 'aos'
import * as basicScroll from 'basicscroll'
import dayjs from 'dayjs'
import advancedFormat from 'dayjs/plugin/advancedFormat'
dayjs.extend(advancedFormat)
@@ -14,6 +17,33 @@
// Shortcut current location
let location
$: location = $currentLocation.location
/*
** Run code on browser only
*/
onMount(() => {
// Scroll apparitions
if (process.browser) {
AOS.init()
}
// Parallax on photos
document.querySelectorAll('.photos .photo').forEach(photo => {
const parallaxNumber = basicScroll.default.create({
elem: photo.querySelector('.photo__image--number'),
direct: true,
from: photo.getBoundingClientRect().top * 0.25,
to: photo.getBoundingClientRect().bottom * 0.92,
props: {
'--translate': {
from: '-75%',
to: '-25%'
}
}
}).start()
})
})
</script>
<div class="photo">
@@ -32,13 +62,15 @@
<source media="(min-width: 768px)" srcset={fn.getThumbnail(photo.image.private_hash, 992)}>
<source media="(min-width: 500px)" srcset={fn.getThumbnail(photo.image.private_hash, 650)}>
<source media="(min-width: 300px)" srcset={fn.getThumbnail(photo.image.private_hash, 400)}>
<img src="{fn.getThumbnail(photo.image.private_hash, 900)}" alt="{photo.name}, {location.region}, {location.country.name}">
<img src="{fn.getThumbnail(photo.image.private_hash, 900)}" alt="{photo.name}, {location.region}, {location.country.name}"
data-aos="scale-down-fade-in"
>
</picture>
<time class="photo__image--date" datetime={dayjs(photo.date).format('YYYY-MM-DDThh:mm:ss')}>
{dayjs(photo.date).format('MMM Do, YYYY')}
</time>
<span class="photo__image--number">{(index < 10 ? '0': '') + index}</span>
</a>
<time class="photo__image--date" datetime={dayjs(photo.date).format('YYYY-MM-DDThh:mm:ss')}>
{dayjs(photo.date).format('MMM Do, YYYY')}
</time>
<span class="photo__image--number">{(index < 10 ? '0': '') + index}</span>
</div>
</div>
</div>

6
src/routes/index.svelte
View File

@@ -88,7 +88,7 @@
<section class="intro">
<div class="anim-mask">
<div class="anim title-parallax" id="title-houses" data-aos="letters-translate-top">
<div class="anim title-parallax" id="title-houses" data-aos="letters-translate-top" data-aos-once="true">
<h1 class="title-massive" aria-label="Houses">
{@html fn.lettersToSpan('Houses')}
</h1>
@@ -109,7 +109,7 @@
</section>
<section class="explore explore--homepage">
<div class="of" aria-label="of" data-aos="letters-translate-bottom">
<div class="of" aria-label="of" data-aos="letters-translate-bottom" data-aos-once="true">
<div class="anim-mask">
{@html fn.lettersToSpan('of')}
</div>
@@ -122,7 +122,7 @@
<InteractiveGlobe />
<div class="anim-mask anim-title">
<h1 class="title-massive title-parallax" id="title-world" aria-label="World" data-aos="letters-translate-bottom">
<h1 class="title-massive title-parallax" id="title-world" aria-label="World" data-aos="letters-translate-bottom" data-aos-once="true">
{@html fn.lettersToSpan('World')}
</h1>
</div>

98
src/style/_animations.scss
View File

@@ -3,7 +3,7 @@
========================================================================== */
// Parallax title: Translate X
.title-parallax {
transform: translate3d(var(--translateX), 0, 0);
transform: translateX(var(--translateX));
will-change: transform;
}
@@ -17,14 +17,16 @@
overflow: hidden;
}
// Translate each letter from top/bottom
// Translate each letter from a direction
[data-aos="letters-translate-top"],
[data-aos="letters-translate-bottom"] {
white-space: nowrap;
span {
display: inline-block;
transition: all 1000ms $ease-quart;
transition: transform 1000ms $ease-quart;
will-change: transform;
@for $i from 1 to 8 {
&:nth-child(#{$i}) {
@@ -35,18 +37,66 @@
&.aos-animate {
span {
transform: translate3d(0, 0, 0);
transform: translate(0, 0);
}
}
}
[data-aos="letters-translate-top"] {
span {
transform: translate3d(0, -100%, 0);
transform: translate(0, -100%);
}
}
[data-aos="letters-translate-bottom"] {
span {
transform: translate3d(0, 100%, 0);
transform: translate(0, 100%);
}
}
// Carousel prev/active/next photos
[data-aos="carousel-prev"] {
transform: translate(-16%, -4%) rotate(-3deg) scale(0.8);
opacity: 0;
transition-duration: 1.6s;
transition-delay: 450ms;
&.aos-animate {
transform: translate(-9%, -1%) rotate(-1deg) scale(0.9);
opacity: 1;
}
}
[data-aos="carousel-active"] {
transform: scale(0.8);
opacity: 0;
transition-delay: 400ms;
&.aos-animate {
transform: scale(1);
opacity: 1;
}
}
[data-aos="carousel-next"] {
transform: translate(16%, -4%) rotate(3deg) scale(0.8);
opacity: 0;
transition-duration: 1.6s;
transition-delay: 500ms;
&.aos-animate {
transform: translate(9%, -1%) rotate(1deg) scale(0.9);
opacity: 1;
}
}
// Scale down and Fade in
[data-aos="scale-down-fade-in"] {
transform: scale(1.1);
opacity: 0;
transition: transform 2s $ease-quart, opacity 2s $ease-quart;
will-change: transform, opacity;
&.aos-animate {
transform: scale(1);
opacity: 1;
}
}
@@ -61,27 +111,33 @@
100% { transform: rotate(360deg); }
}
// Spinning globe (small)
/*
** Spinning globe
*/
@keyframes moveContinents {
0% { transform: translate(0,0); }
100% { transform: translate(-80.26px, 28.2px); }
}
.anim-spinGlobe {
animation: moveContinents 1.7s linear infinite;
animation-play-state: paused;
}
// Small
@keyframes moveContinentsSmall {
0% { transform: translate3d(0,0,0); }
100% { transform: translate3d(-96.95px, 0, 0); }
0% { transform: translate(0,0); }
100% { transform: translate(-96.95px, 0); }
}
.anim-spinGlobeSmall {
animation: moveContinentsSmall 1.5s linear infinite;
animation-play-state: paused;
}
// Spinning globe
@keyframes moveContinents {
0% { transform: translate3d(0,0,0); }
100% { transform: translate3d(-80.26px, 28.2px, 0); }
}
.anim-spinGlobe {
animation: moveContinents 1.7s linear infinite;
animation-play-state: paused;
}
// Layout: List
/*
** Layout
*/
// List
@keyframes layoutListOdd {
0% { transform: translateX(0); }
100% { transform: translateX(4px); }
@@ -91,7 +147,7 @@
100% { transform: translateX(-4px); }
}
// Layout: Grid
// Grid
@keyframes layoutGridOdd {
0% { transform: translateY(0); }
100% { transform: translateY(3px); }
@@ -99,4 +155,4 @@
@keyframes layoutGridEven {
0% { transform: translateY(0); }
100% { transform: translateY(-3px); }
}
}

30
src/style/atoms/_button-control.scss
View File

@@ -14,6 +14,7 @@
cursor: pointer;
outline: none;
transition: background-color 350ms $ease-quart;
will-change: background-color;
@include breakpoint (sm) {
width: 56px;
@@ -22,11 +23,12 @@
// Icon
.icon {
overflow: hidden;
display: block;
width: 13px;
height: auto;
transition: transform 500ms $ease-quart, opacity 150ms $ease-inout;
overflow: hidden;
will-change: transform;
@include breakpoint (sm) {
width: 20px;
@@ -72,34 +74,34 @@
// To left
&.dir-left {
.icon[aria-hidden] {
transform: translate3d(100%, -50%, 0);
transform: translate(100%, -50%);
}
&:hover, &:focus {
.icon:not([aria-hidden]) {
opacity: 0;
transform: translate3d(-100%, 0, 0);
transform: translate(-100%, 0);
}
.icon[aria-hidden] {
opacity: 1;
transform: translate3d(-50%, -50%, 0);
transform: translate(-50%, -50%);
}
}
}
// To right
&.dir-right {
.icon[aria-hidden] {
transform: translate3d(-150%, -50%, 0);
transform: translate(-150%, -50%);
}
&:hover, &:focus {
.icon:not([aria-hidden]) {
opacity: 0;
transform: translate3d(100%, 0, 0);
transform: translate(100%, 0);
}
.icon[aria-hidden] {
opacity: 1;
transform: translate3d(-50%, -50%, 0);
transform: translate(-50%, -50%);
}
}
}
@@ -107,17 +109,17 @@
&.dir-top {
.icon[aria-hidden] {
left: auto;
transform: translate3d(0, -150%, 0);
transform: translate(0, -150%);
}
&:hover, &:focus {
.icon:not([aria-hidden]) {
opacity: 0;
transform: translate3d(0, 100%, 0);
transform: translate(0, 100%);
}
.icon[aria-hidden] {
opacity: 1;
transform: translate3d(0, -50%, 0);
transform: translate(0, -50%);
}
}
}
@@ -125,17 +127,17 @@
&.dir-bottom {
.icon[aria-hidden] {
left: auto;
transform: translate3d(0, 150%, 0);
transform: translate(0, 150%);
}
&:hover, &:focus {
.icon:not([aria-hidden]) {
opacity: 0;
transform: translate3d(0, -100%, 0);
transform: translate(0, -100%);
}
.icon[aria-hidden] {
opacity: 1;
transform: translate3d(0, -50%, 0);
transform: translate(0, -50%);
}
}
}
@@ -149,6 +151,7 @@
overflow: visible;
background-color: rgba($color-lightpurple, 0.5);
transition: background-color 150ms $ease-inout;
will-change: background-color;
// Icon
svg[fill] {
@@ -175,6 +178,7 @@
animation-play-state: paused;
animation-delay: 50ms;
transition: stroke 150ms $ease-inout;
will-change: stroke;
}
// Hover

14
src/style/atoms/_button-outline.scss
View File

@@ -1,21 +1,22 @@
// Button: Outline
.button-outline {
overflow: hidden;
position: relative;
display: inline-flex;
align-items: center;
height: 32px;
padding: 1px 16px 0;
background: none;
font-family: $font-sans-sb;
font-size: rem(14px);
color: #fff;
background: none;
border: 2px solid #fff;
border-radius: 50vh;
overflow: hidden;
text-decoration: none;
cursor: pointer;
outline: none;
transition: all 275ms $ease-cubic;
will-change: border, color;
@include breakpoint (sm) {
height: 40px;
@@ -36,11 +37,12 @@
top: 50%;
left: 0;
right: 0;
transform: translate3d(0, -120%, 0);
transform: translateY(-120%);
}
span, &:after {
transition: opacity 275ms $ease-cubic, transform 275ms $ease-cubic;
transition: transform 275ms $ease-cubic, opacity 275ms $ease-cubic;
will-change: transform, opacity;
}
// Disabled
@@ -56,11 +58,11 @@
span {
opacity: 0;
transform: translate3d(0, 100%, 0);
transform: translateY(100%);
}
&:after {
opacity: 1;
transform: translate3d(0, -50%, 0);
transform: translateY(-50%);
}
}
}

12
src/style/atoms/_button.scss
View File

@@ -16,6 +16,7 @@
outline: none;
cursor: pointer;
transition: background-color 250ms $ease-cubic, color 350ms $ease-cubic;
will-change: background-color, color;
@include breakpoint (sm) {
height: 48px;
@@ -58,10 +59,11 @@
top: 50%;
left: 0;
width: 100%;
transform: translate3d(0, -120%, 0);
transform: translateY(-120%);
}
span, &:after {
transition: opacity 275ms $ease-cubic, transform 275ms $ease-cubic;
transition: transform 275ms $ease-cubic, opacity 275ms $ease-cubic;
will-change: transform, opacity;
}
// Button has an icon (offset the hovered text)
@@ -86,14 +88,14 @@
}
span {
opacity: 0;
transform: translate3d(0, 100%, 0);
transform: translateY(100%);
}
&:after {
opacity: 1;
transform: translate3d(0, -47%, 0);
transform: translateY(-47%);
@include breakpoint (sm) {
transform: translate3d(0, -50%, 0);
transform: translateY(-50%);
}
}
}

4
src/style/atoms/_toggle.scss
View File

@@ -20,6 +20,7 @@
justify-content: center;
outline: none;
transition: color 150ms $ease-inout;
will-change: color;
}
button {
span {
@@ -80,6 +81,7 @@
height: 100%;
background-color: $color-primary;
transition: all 500ms $ease-quart;
will-change: width, left;
span {
content: attr(data-text);
@@ -87,4 +89,4 @@
margin: 0;
}
}
}
}

1
src/style/molecules/_pagination.scss
View File

@@ -45,6 +45,7 @@
line-height: 0.85;
transform: translate3d(0, -190%, 0);
transition: transform 250ms $ease-cubic;
will-change: transform;
}
}

2
src/style/molecules/_photo.scss
View File

@@ -84,7 +84,7 @@
background-color: $color-primary;
display: block;
z-index: 3;
transition: all 150ms ease-in-out;
transition: opacity 150ms $ease-inout;
}
}

6
src/style/organisms/_photos.scss
View File

@@ -105,6 +105,12 @@
}
}
}
// Number
&__image--number {
transform: translate(-50%, var(--translate));
will-change: transform;
}
}
// Pagination

6
src/style/tools/_mixins.scss
View File

@@ -28,19 +28,19 @@
// Center vertically
@mixin center-y {
top: 50%;
transform: translate3d(0,-50%,0);
transform: translate(0, -50%);
}
// Center horizontally
@mixin center-x {
left: 50%;
transform: translate3d(-50%,0,0);
transform: translate(-50%, 0);
}
// Center vertically and horizontally
@mixin center-xy {
top: 50%; left: 50%;
transform: translate3d(-50%,-50%,0);
transform: translate(-50%, -50%);
}
// Smooth fonts