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

Adapt Globe responsive and disable scroll on touch devices for now

Browse Source 
Disabling scroll while finding a solution to only scroll horizontally on mobile
This commit is contained in:
Félix Péault
2022-09-27 09:13:10 +02:00
parent d921f699b2
commit aa857e3531
2 changed files with 37 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/organisms/InteractiveGlobe.svelte
View File

@@ -151,13 +151,13 @@
animation: { y: ['110%', 0] },
options: {
stagger: 0.04,
duration: 1,
duration: 0.85,
threshold: 0,
},
}}
>
<SplitText text={hoveredMarker.name} mode="chars" class="name" />
<p class="country" in:flySvelte={{ y: 16, duration: 800, easing: quartOut, delay: 900 }}>
<p class="country" in:flySvelte={{ y: 16, duration: 800, easing: quartOut, delay: 700 }}>
{hoveredMarker.country}
</p>
</div>

41
src/style/modules/_globe.scss
View File

@@ -13,6 +13,11 @@
left: 50%;
transform: translateX(-50%) translateZ(0);
width: var(--width);
pointer-events: none;
@media (hover: hover) {
pointer-events: auto;
}
// Responsive square padding
&:after {
@@ -62,6 +67,7 @@
top: 50%;
left: 0;
width: 100%;
padding-top: 0.25em;
overflow: hidden;
transform: translateY(-50%) translateZ(0);
pointer-events: none;
@@ -74,16 +80,22 @@
font-family: $font-serif;
font-weight: 100;
letter-spacing: -0.035em;
line-height: 0.75;
color: $color-secondary;
font-size: clamp(#{rem(88px)}, 20vw, #{rem(320px)});
}
.country {
display: block;
text-transform: uppercase;
margin-top: 2em;
font-size: rem(14px);
color: $color-tertiary;
letter-spacing: 0.1em;
font-weight: 500;
@include bp (md) {
margin-top: 4em;
}
}
}
@@ -112,27 +124,38 @@
a {
position: relative;
top: -10px;
left: -10px;
display: block;
width: 20px;
height: 20px;
top: -8px;
left: -8px;
display: flex;
width: 16px;
height: 16px;
align-items: center;
justify-content: center;
text-decoration: none;
color: $color-secondary;
pointer-events: auto;
@include bp (md) {
top: -10px;
left: -10px;
width: 20px;
height: 20px;
}
// Dot
i {
display: block;
width: 10px;
height: 10px;
width: 6px;
height: 6px;
border-radius: 32px;
background: $color-secondary;
transition: box-shadow 0.4s var(--ease-quart), transform 0.4s var(--ease-quart);
transform-origin: 50% 50%;
@include bp (md) {
width: 10px;
height: 10px;
}
}
// Name
span {
@@ -142,10 +165,14 @@
// Hover: Grow marker outline
&:hover {
i {
box-shadow: 0 0 0 8px rgba($color-tertiary, 0.25);
@include bp (md) {
box-shadow: 0 0 0 10px rgba($color-tertiary, 0.25);
}
}
}
}
// State: Is hidden
&:global(.is-hidden) {