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

Fix ScrollingTitle parallax on mobile

Browse Source 
silly `display: inline-block`!
This commit is contained in:
Félix Péault
2022-09-27 09:45:27 +02:00
parent 0eca069eaf
commit 4791fe5b13
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/atoms/ScrollingTitle.svelte
View File

@@ -1,5 +1,6 @@
<style lang="scss"> <style lang="scss">
:global(.scrolling-title) { .scrolling-title {
display: inline-block;
transform: translate3d(var(--parallax-x), 0, 0); transform: translate3d(var(--parallax-x), 0, 0);
transition: transform 1.2s var(--ease-quart); transition: transform 1.2s var(--ease-quart);
will-change: transform; will-change: transform;
@@ -25,8 +26,8 @@
// Define default values // Define default values
$: if (titleEl && !offsetStart && !offsetEnd) { $: if (titleEl && !offsetStart && !offsetEnd) {
offsetStart = titleEl.offsetTop - innerHeight * 0.75 offsetStart = titleEl.offsetTop - innerHeight * (innerWidth < 768 ? 0.2 : 0.75)
offsetEnd = titleEl.offsetTop + innerHeight * 0.25 offsetEnd = titleEl.offsetTop + innerHeight * (innerWidth < 768 ? 0.5 : 0.5)
} }
// Check if title is larger than viewport to translate it // Check if title is larger than viewport to translate it
@@ -34,7 +35,7 @@
// Calculate the parallax value // Calculate the parallax value
$: if (titleEl) { $: if (titleEl) {
const toTranslate = 100 - innerWidth / titleEl.offsetWidth * 100 const toTranslate = 100 - (innerWidth / titleEl.offsetWidth * 100)
parallax = isLarger ? map(scrollY, offsetStart, offsetEnd, 0, -toTranslate, true) : 0 parallax = isLarger ? map(scrollY, offsetStart, offsetEnd, 0, -toTranslate, true) : 0
} }
@@ -44,7 +45,6 @@
$$props.class $$props.class
].join(' ').trim() ].join(' ').trim()
const revealOptions = animate ? { const revealOptions = animate ? {
children: '.char', children: '.char',
animation: { y: ['-105%', 0] }, animation: { y: ['-105%', 0] },