Opacity ändern onScroll

iandarfdas · 01.03.2022

Schönen guten Tag,

ich stehe jetzt schon den 3. Tag vor ein und demselben Problem und erhoffe mir hiermit Hilfe/neue Denkanstöße.

Ich habe ein DIV und ich möchte, dass die opacity 1 ist, wenn dieses Div genau im center des Bildschirms ist.
Wenn ich scrolle, soll sich die opacity ändern, also beim DOWN-scrolling: 0<=opacity=<1 und beim UP-scrolling: 1<=opacity>=0

eine detect funktion für die scrolling direction habe ich bereits:

Javascript:

var scrollPosition = 0;
function isScrollingUp(){
    if(document.body.getBoundingClientRect().top > scrollPosition){
        scrollPosition = document.body.getBoundingClientRect().top;
        return true;
    }else{
        scrollPosition = document.body.getBoundingClientRect().top;
        return false;
    }
}

funktioniert auch.

meine Idee war in Intervallen zu arbeiten, also mit element.getBoundingClientReact().top...
wenn dieses zwischen 1200 und 200 ist, dann weiss ich meine opacity muss zwischen 0 und 1 sein.
Ich finde das alles aber sehr ineffizient, vielleicht kann mir jemand helfen.

Mit freundlichen Grüßen
iandarfdas

Sempervivum · 01.03.2022

Mir scheint, die Richtung des Scrollens brauchst Du gar nicht, sondern Du kannst die Opacity einfach aus der Scrollposition berechnen. Mir ist allerdings noch nicht klar, was genau die Endwerte sein sollen: Soll die Opacity gleich beim Herunterscrollen von der Scrollpos. 0 an ansteigen oder erst, wenn das Element dabei in den Viewport gelangt?

iandarfdas · 01.03.2022

erst wenn das Element in den Viewport gelangt.
Das Problem ist wenn mein Element in den Viewport gelangt soll es um einen bestimmten Faktor bis auf 1 aufaddieren.
Wenn opacity 1 nicht erreicht wurde und das element am unteren Rand wieder den viewport verlässt, soll der Faktor ja wieder abnehmen.
Entschuldige den Ausdruck, echt schwer zu erklären

iandarfdas · 01.03.2022

wenn ich es abhängig von window.scrollY mache, dann brauche ich keine extra scroll Direction

iandarfdas · 01.03.2022

an sich bekomme ich es auch hin, dass es funktioniert, aber nicht responsiv. Auf dem Monitor muss es "langsamer" geblurrt werden als auf einem Laptopbildschirm

Sempervivum · 01.03.2022

Versuche mal, ob dieses auf beiden Monitoren funktioniert:

Code:

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>

    <style>
        #top,
        #bottom {
            height: 150vh;
        }

        #middle {
            height: 40vh;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id="top"></div>
    <div id="middle"></div>
    <div id="bottom"></div>
    <script>
        window.addEventListener('scroll', event => {
            const
                boundingRect = document.getElementById('middle').getBoundingClientRect(),
                hWindow = document.querySelector('body').clientHeight,
                // Startposition von der an die Opacity ansteigen soll,
                // bezogen auf die obere Kante des betr. Containers:
                startPos = hWindow,
                // Endposition wo die Opacity 1 erreichen soll:
                endPos = hWindow / 2 - boundingRect.height / 2;
            opacity = 1 - boundingRect.top / (startPos - endPos);
            if (opacity < 0) opacity = 0;
            if (opacity > 1) opacity = 1;
            document.getElementById('middle').style.opacity = opacity;
        });
    </script>
</body>


</html>

iandarfdas · 01.03.2022

ja es funktioniert auf den ersten Blick, vielen Dank.
Aber sobald es auch oben den viewport verlässt, soll die opacity auch wieder nachlassen,
hast du einen Tipp für mich wie ich da rangehen kann?

Sempervivum · 01.03.2022

Das dürfte auch kein Problem sein. Du brauchst dann eine Fallunterscheidung ob Du ober- oder unterhalb der zentrierten Position bist:

Code:

                // Zentrierte Position wo die Opacity 1 erreichen soll:
                centerPos = hWindow / 2 - boundingRect.height / 2;

Versuche, die Berechnung entspr. umzustellen.

iandarfdas · 01.03.2022

ich hatte immer das Problem auf den verschiedenen Bildschirmgrößen auch verschieden Faktoren zu benötigen, also zB auf dem kleineren Bildschirm muss der blurr schneller sein als auf einem großen Bildschirm, hast du da noch einen Tipp?

Sempervivum · 01.03.2022

Der unterschiedliche Faktor wird hier berücksichtigt:

Code:

opacity = 1 - boundingRect.top / (startPos - endPos);

Sofern ich mich nicht vertan habe, müsste das für alle Bildschirmhöhen sich automatisch anpassen. Versuche mal, es von Hand für die Entwerte nachzurechnen.

iandarfdas · 01.03.2022

also ich hab mir die werte über die konsole ausgeben lassen und das problem ist, dass die opacity wenn das div reinkommt um die 0.4 zB ist und erst 1 wenn die oberkante vom div an der oberkante vom fenster ist

Sempervivum · 01.03.2022

Ja, das stimmt, da müssen wir die Berechnung noch Mal überprüfen. Ich bin da schon dran ...

iandarfdas · 01.03.2022

sogar 0.6, erste idee wäre einfach die startposition zu verschieben (?)

noch eine Idee wäre:

Javascript:

var element = document.querySelector('#main-container');
    var position = element.getBoundingClientRect();

    // checking whether fully visible
    if(position.top >= 0 && position.bottom <= window.innerHeight) {
        console.log('Element is fully visible in screen');
    }

    // checking for partial visibility
    if(position.top < window.innerHeight && position.bottom >= 0) {
        console.log('Element is partially visible in screen');
    }

hiermit gucken wann das bild vollständig zu sehen ist, dann opacity = 1

if position.top > position.bottom, weiss man das bild kommt in den viewport -->
opacity = 1 - boundingRect.top / (startPos - endPos);
else umgekehrte berechnung...

Sempervivum · 01.03.2022

Da war ein kapitaler Fehler hier:

Code:

hWindow = document.querySelector('body').clientHeight

Body passt sich ja an die Höhe der Inhalte an und ist damit i. d. R. viel größer als die Fensterhöhe.
Dieses funktioniert jetzt bei mir:

Code:

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>

    <style>
        html {
            height: 100%;
        }

        #top,
        #bottom {
            height: 150vh;
        }

        #middle {
            height: 40vh;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id="top"></div>
    <div id="middle"></div>
    <div id="bottom"></div>
    <script>
        window.addEventListener('scroll', event => {
            const
                boundingRect = document.getElementById('middle').getBoundingClientRect(),
                hWindow = document.querySelector('html').clientHeight,
                // Startposition von der an die Opacity ansteigen soll,
                // bezogen auf die obere Kante des betr. Containers:
                startPos = hWindow,
                // Mittlere Position wo die Opacity 1 erreichen soll:
                centerPos = hWindow / 2 - boundingRect.height / 2,
                // Endposition wo die Opacity wieder auf 0 zurück gehen soll:
                endPos = -boundingRect.height;
            if (boundingRect.top > centerPos) {
                opacity = 1 - (boundingRect.top - centerPos) / (startPos - centerPos);
            } else {
                opacity = 1 - (centerPos - boundingRect.top) / (centerPos - endPos);
            }
            if (opacity < 0) opacity = 0;
            if (opacity > 1) opacity = 1;
            document.getElementById('middle').style.opacity = opacity;
        });
    </script>
</body>


</html>

iandarfdas · 01.03.2022

vielen lieben Dank, funktionert einwandfrei! zu dem ist es sehr effizient

Opacity ändern onScroll

iandarfdas

Active member

Sempervivum

Well-known member

iandarfdas

Active member

iandarfdas

Active member

iandarfdas

Active member

Sempervivum

Well-known member

iandarfdas

Active member

Sempervivum

Well-known member

iandarfdas

Active member

Sempervivum

Well-known member

iandarfdas

Active member

Sempervivum

Well-known member

iandarfdas

Active member

Sempervivum

Well-known member

iandarfdas

Active member

Opacity ändern onScroll