mirror of
https://github.com/koodiklinikka/koodiklinikka.fi.git
synced 2026-03-17 16:05:01 +00:00
fix: top fade should be calculated on first render too
if page had been scrolled and refreshed the wrong initial value was used
This commit is contained in:
@@ -1,6 +1,5 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import Image from 'next/image';
|
|
||||||
import Link, { LinkProps } from 'next/link';
|
import Link, { LinkProps } from 'next/link';
|
||||||
import Wrapper from './Wrapper';
|
import Wrapper from './Wrapper';
|
||||||
import { useEffect, useRef, useState } from 'react';
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
|||||||
@@ -2,18 +2,18 @@
|
|||||||
|
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
const calculatedBrightnessValue = () => {
|
||||||
|
if (window.scrollY > 200) return 0.5;
|
||||||
|
const amountToDecrease = (window.scrollY / 200) * 0.5;
|
||||||
|
return 1 - amountToDecrease;
|
||||||
|
};
|
||||||
|
|
||||||
export default function TopFade() {
|
export default function TopFade() {
|
||||||
const [brightness, setBrightness] = useState(1);
|
const [brightness, setBrightness] = useState(calculatedBrightnessValue());
|
||||||
|
|
||||||
const handleScroll = (event: Event) => {
|
const handleScroll = (event: Event) => {
|
||||||
if (window.scrollY > 200) {
|
if (window.scrollY > 200 && brightness === 0.5) return;
|
||||||
if (brightness === 0.5) return;
|
setBrightness(calculatedBrightnessValue());
|
||||||
setBrightness(0.5);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const amountToDecrease = (window.scrollY / 200) * 0.5;
|
|
||||||
setBrightness(1 - amountToDecrease);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|||||||
Reference in New Issue
Block a user