Versuch zu animieren und Element beim Scrollen

Ich versuche, ein Logo nach rechts scrollen und schließlich in ein Hamburger-Symbol animiert werden. Hier ist ungefähr mein letztes Ziel, aber fertig, wenn die Seite geladen wird, anstatt zu scrollen. https://codepen.io/mthauv/pen/gxJNWq Versuch zu animieren und Element beim Scrollen

Ich begann mit dem Versuch, das Logo in die richtige Position zu bringen. Das Problem, das ich habe, ist, dass es nur funktioniert, wenn Sie sorgfältig scrollen. Wenn Sie zu schnell bewegen sie entweder geht zu weit oder nicht weit genug in Abhängigkeit von der Linie ...

if(target - mContainer.getBoundingClientRect().right > 0 || startLine - startLine * scrollY/240 > 16){ 
    mContainer.style.right = startLine - startLine * scrollY/240 + "px"; 
    check = mContainer.style.right.replace(/[^\d.-]/g, ''); 
}

Oder Aussage erlaubt es zu weit zu bewegen, wo ein und Anweisung ermöglicht es kurz zu stoppen. Ich habe ein paar andere Anweisungen ausprobiert, aber die meisten verhindern, dass das Logo beim Zurückscrollen zurückkehrt.

Hier ist der Stift https://codepen.io/mthauv/pen/aygNbe

HTML

<body> 

    <div id="logo-container" class="first-step"> 
    <div id="m-container" onclick="toggleMenu('menu-btn')"> 
    <div id="m-1" class="m"></div> 
    <div id="m-2" class="m"></div> 
    <div id="m-3" class="m"></div> 
    </div> 
</div> 

<div id="menu-container"> 
    <ul id="menu"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    </ul> 
</div> 

<div id="content-container" onclick="toggleMenu('body')"> 
    <h1>Content</h1> 
</div> 

</body>

Und JS

var logoContainer = document.getElementById('logo-container'); 
var mContainer = document.getElementById('m-container'); 
var menuContainer = document.getElementById('menu-container'); 
var contentContainer = document.getElementById('content-container'); 
var m = document.getElementsByClassName('m'); 

var w = window.innerWidth; 
var check = mContainer.style.right.replace(/[^\d.-]/g, ''); 
var startLine = w/2 - 90; 
var totalDistance = window.innerWidth/2; 
var target = window.innerWidth - 16; 

mContainer.style.right = w/2 - 90 + "px" 

window.addEventListener("resize", function(){ 
    var w = window.innerWidth; 
    mContainer.style.right = w/2 - 90 + "px" 
    check = mContainer.style.right.replace(/[^\d.-]/g, ''); 
    startLine = w/2 - 90; 
    totalDistance = w/2; 
    target = w - 16; 
}); 

window.addEventListener('scroll', function(e){ 
    var scrollY = (window.pageYOffset) ; 
    var x = scrollY/240; 

    if(target - mContainer.getBoundingClientRect().right > 0 || startLine - startLine * scrollY/240 > 16) 
    { 
     mContainer.style.right = startLine - startLine * scrollY/240 + "px"; 
     check = mContainer.style.right.replace(/[^\d.-]/g, ''); 
    } 

    });

Quelle

2017-09-08 Matt

Check this out:

const mContainer = document.getElementById("m-container"); 

const scrollFinishPosition = 300; // when animation should be finished 
const step = scrollFinishPosition/100; 

let startPosition; 
let endPosition; 
let difference; 

function calcSize() { 
    const logoWidth = mContainer.offsetWidth; // get width of the logo 

    startPosition = window.innerWidth/2 - logoWidth/2; // center 

    const margin = 80; 
    endPosition = window.innerWidth - logoWidth - margin; 

    // used for some simple math later 
    difference = endPosition - startPosition; 
} 

function positionLogo() { 
    let percentageValue; 

    // if scroll position is in animation range - calc % otherwise just use 100% 
    if (window.pageYOffset < scrollFinishPosition) { 
    percentageValue = pageYOffset/step; 
    } else { 
    percentageValue = 100; 
    } 

    // convert % to px and add update styles 
    const position = startPosition + difference/100 * percentageValue; 
    mContainer.style.left = position + "px"; 
} 

window.addEventListener("resize", function(e) { 
    calcSize(); 
    positionLogo() 
}); 

window.addEventListener("scroll", function(e) { 
    positionLogo(); 
}); 

calcSize(); 
positionLogo();

https://codepen.io/Gibala/pen/gxNJRR

Quelle

2017-09-08 18:39:52 mgibala

Das funktioniert und ist so viel eleganter als das, was ich hatte. Plus es adressiert das Problem (das ich noch nicht gefunden hatte) der Fenstergrößenänderung nach etwas Scrollen. Danke dafür. – Matt

prüfen diese aktualisierte Stift, ich die Position des M Kind auf absolute gesetzt, und die Eltern fest so kann es sich frei bewegen.

Ich habe den folgenden Code hinzugefügt, der prüft, ob die rechte Seite des Containers vom Bildschirm verschwindet, falls dies der Fall ist, verankere es, anstatt es fortzusetzen.

if (parseFloat(mContainer.style.right) <= 0) { 
    mContainer.style.right = '0px'; 
    }

https://codepen.io/anon/pen/LjKoNE

Quelle

2017-09-08 16:39:11 mrsq

, das funktioniert! Vielen Dank. Ich habe etwas ähnliches gemacht, aber ich mag dein mehr. Ich habe eine else if-Anweisung verwendet ... else if (mContainer.getBoundingClientRect(). Right/w> 1) { mContainer.style.right = '0'; } – Matt

Versuch zu animieren und Element beim Scrollen

Antwort

Verwandte Themen