Opacity ändern onScroll

Diskutiere Opacity ändern onScroll im JavaScript Forum im Bereich Programmierung; 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...
I

iandarfdas

Active member
Beiträge
25
Punkte Reaktionen
0
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
 
S

Sempervivum

Well-known member
Beiträge
274
Punkte Reaktionen
42
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?
 
I

iandarfdas

Active member
Beiträge
25
Punkte Reaktionen
0
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 :(
 
I

iandarfdas

Active member
Beiträge
25
Punkte Reaktionen
0
wenn ich es abhängig von window.scrollY mache, dann brauche ich keine extra scroll Direction
 
I

iandarfdas

Active member
Beiträge
25
Punkte Reaktionen
0
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
 
S

Sempervivum

Well-known member
Beiträge
274
Punkte Reaktionen
42
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>
 
I

iandarfdas

Active member
Beiträge
25
Punkte Reaktionen
0
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? ;)
 
S

Sempervivum

Well-known member
Beiträge
274
Punkte Reaktionen
42
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.
 
I

iandarfdas

Active member
Beiträge
25
Punkte Reaktionen
0
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? :)
 
S

Sempervivum

Well-known member
Beiträge
274
Punkte Reaktionen
42
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.
 
I

iandarfdas

Active member
Beiträge
25
Punkte Reaktionen
0
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
 
S

Sempervivum

Well-known member
Beiträge
274
Punkte Reaktionen
42
Ja, das stimmt, da müssen wir die Berechnung noch Mal überprüfen. Ich bin da schon dran ...
 
I

iandarfdas

Active member
Beiträge
25
Punkte Reaktionen
0
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...
 
S

Sempervivum

Well-known member
Beiträge
274
Punkte Reaktionen
42
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>
 
I

iandarfdas

Active member
Beiträge
25
Punkte Reaktionen
0
vielen lieben Dank, funktionert einwandfrei! zu dem ist es sehr effizient :)
 
Thema:

Opacity ändern onScroll

Oben Unten