den Rand des Überlauf Erreichen: hidden ‚Vorhang‘ in TweenMax

Question

Ich habe ein div mit overflow: hidden;

Unterhalb dieses div gibt es eine weitere div ist die scrollable sein muss.

Scrolling Bit funktioniert gut mit TweenMax, aber ich brauche, um zu bestimmen, ob ich den Rand der Mutter erreicht habe div oder nicht nach jedem scroll, die direction der scroll zu ändern. Und ich kann nicht herausfinden, wie ich diesen Teil machen soll.

Hier ist ein kurzer Stift: http://codepen.io/anon/pen/wGJVOm

Answer 1

Wenn ich es richtig verstehe, ich glaube, Sie so etwas wie unten tun können:

Snippet:

var scrollButton = document.getElementById('scroll'); 
 
var container = document.getElementsByClassName('container')[0]; 
 
var inner = document.getElementsByClassName('inner')[0]; 
 
var containerWidth = 0; 
 
var containerMaxWidth = 0; 
 
var totalDuration = 1; 
 
var duration = 0.8; 
 
var ease = Power2.easeInOut; 
 
var direction = ''; 
 
var DIRECTION_LEFT = 'DIRECTION_LEFT'; 
 
var DIRECTION_RIGHT = 'DIRECTION_RIGHT'; 
 
var currProgress = 0; 
 
var progressFactor = 0.2; 
 
var tl = new TimelineMax({ 
 
    paused: true 
 
}); 
 

 
function initVariables() { 
 
    containerWidth = container.offsetWidth; 
 
    TweenMax.set(container, { 
 
    position: 'absolute', 
 
    width: 'auto' 
 
    }); 
 
    containerMaxWidth = container.offsetWidth; 
 
    TweenMax.set(container, { 
 
    clearProps: 'all' 
 
    }); 
 
} 
 

 
function initTimeline() { 
 
    tl.to(inner, totalDuration, { 
 
    x: -containerMaxWidth + containerWidth, 
 
    ease: Power0.easeNone 
 
    }); 
 
} 
 

 
function initListeners() { 
 
    scrollButton.addEventListener('click', doScroll, false); 
 
} 
 

 
function doScroll() { 
 
    if (direction === DIRECTION_RIGHT) { 
 
    currProgress = currProgress - progressFactor; 
 
    } else { 
 
    currProgress = currProgress + progressFactor; 
 
    } 
 

 
    if (currProgress >= 1) { 
 
    currProgress = 1; 
 
    direction = DIRECTION_RIGHT; 
 
    } else if (currProgress <= 0) { 
 
    currProgress = 0; 
 
    direction = DIRECTION_LEFT; 
 
    } 
 

 
    TweenMax.to(tl, duration, { 
 
    progress: currProgress, 
 
    ease: ease 
 
    }); 
 
} 
 

 
// 
 
initVariables(); 
 
initTimeline(); 
 
initListeners();

.container { 
 
    width: 400px; 
 
    border: 1px solid green; 
 
    overflow: hidden; 
 
} 
 
.inner { 
 
    white-space: nowrap; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script> 
 
<div class="container"> 
 
    <div class="inner"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, magnam. Ut sunt nihil quo reprehenderit in voluptas voluptatum at tempore accusamus suscipit ipsam ea atque, unde, itaque quas pariatur architecto. 
 
    </div> 
 
</div> 
 
<p> 
 
    <span id="scroll">Scroll</span> 
 
</p>

Grundsätzlich ist hier, was hier geschieht:

• Ihr container Element width wird in einer Variablen gespeichert containerWidth genannt.
• Es wird dann vorübergehend auf position: absolute zusammen mit seiner width: auto festgelegt.
• Die neue Breite dieses Elements container wird als containerMaxWidth gespeichert.
• Die temporären Stile werden sofort nach der Verwendung der TweenMaxclearProps: 'all' Einstellung entfernt.
• A TimelineMax genannt tl geschaffen, die eine definierte Bewegung von x: 0 zur maximum Position hat sie bewegen kann in diesem Fall, auf die -containerMaxWidth + containerWidth und diese Zeitleiste zunächst auf paused eingestellt ist.
• Eine direction Variable wird indirekt zur Aktualisierung progress unserer TimelineMax Instanz verwendet.
• currProgress wird direkt verwendet, um progress unserer TimelineMax Instanz zu aktualisieren.
• Dieser currProgress wird basierend auf dem oben ermittelten direction berechnet.
• Schließlich aktualisiert ein Tween die tl-Instanz progress Eigenschaft.

Lassen Sie mich wissen, ob dies etwas war, was Sie gesucht haben. Here ist ein Codepen-Ergebnis des Obigen.

Hoffe, das hilft.