Fix ScrollingTitle parallax on mobile

silly `display: inline-block`!
This commit is contained in:
2022-09-27 09:45:27 +02:00
parent 0eca069eaf
commit 4791fe5b13

View File

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