Fix ScrollingTitle parallax on mobile
silly `display: inline-block`!
This commit is contained in:
@@ -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] },
|
||||
|
||||
Reference in New Issue
Block a user