2017-04-14 10 views
0

私はちょうどこの素晴らしい製品を見つけ、これが私が必要とするものであることを実感しました!私はウィンドウサイズのx倍の巨大なイメージを持っているので、ボタンをクリックするとその下にスクロールしたいと思う。これは、CSSの代わりの中crossbrowserの道であることが判明したGreenSockの "transform:translateY"の値をスタックしますか?

@keyframes { 
    to { 
     transform: translateY(-100%) translateY(100vh); 
    } 
} 

:私はこのようなCSSでそうするでしょう

transform: translateY(calc(-100% + 100vh)); 

TweenMaxでそうする方法はありますか?

var value = -$('img').height() + $(window).height(); 
var tweenDown = TweenMax.to("img", 5, {y: value}); 

を「スタック」方法の利点は、ウィンドウのサイズを変更するとき、それは同じ位置に画像を保持していることであるしかし:私はピクセル単位でこれらの値を計算し、それらを明示的に指定することができることを理解してください。

ありがとうございます!

+0

私が間違っている可能性が、私はあなたが探しているものだと思うが、 'yPercent'です。このプロパティが初めて導入されたときのこの古い記事を見てください:https://greensock.com/gsap-1-13-1。 –

答えて

0

これは私が思っていたもののために思い付いたものです:

TweenMax.to('img', 5, { 
    transform: 'translate3d(0,100vh,0)', 
    percentY: -100 
}); 
関連する問題