：TweenMax

Question

に「カーテン」隠された私はdivこのdivの下にはoverflow: hidden;

で、scrollableにする必要がある別のdivがあり持っています。

スクロールビットはTweenMaxで正常に動作しますが、私はscrollのdirectionを変更するには、すべてのscroll後、親divかの端に達しているかどうかを判断する必要があります。そして私はこの部分をどうやって行うのか分かりません。ここで

は、迅速なペンです： http://codepen.io/anon/pen/wGJVOm

Answer 1

私はそれを正しく理解していれば、私はあなたが以下のような何かをすることができると思う。

スニペット：

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>

基本的には、ここでは、ここで何が起こっているかである。

• あなたcontainer要素のwidthがcontainerWidthという変数に格納されます。
• これは、とともに、width: autoに一時的に設定されます。
• このcontainer要素の新しい幅は、containerMaxWidthとして格納されます。
• 一時的なスタイルは、TweenMaxのclearProps: 'all'設定を使用した直後に直ちに削除されます。
• tl名前TimelineMaxは、この場合、-containerMaxWidth + containerWidthあり、このタイムラインは、最初pausedに設定されていることがスクロールできるmaximum位置へx: 0から定義された動きを有する生成されます。
• direction変数は、TimelineMaxインスタンスのprogressを更新するために間接的に使用されます。
• currProgressは、TimelineMaxインスタンスのprogressを直接更新するために使用されます。
• このcurrProgressは、上記で決定したdirectionに基づいて計算されます。
• 最後に、tlインスタンスのprogressプロパティを更新します。

これがあなたが探していたものかどうか教えてください。 Hereは上記のコード化された結果です。

これが役に立ちます。