0

私はjQueryサイクルプラグインhttp://jquery.malsup.com/cycle/を使用しており、このページのような同様のスライダー効果を作成しようとしていますhttp://themeforest.net/item/doover-premium-wordpress-theme/ full_screen_preview/2279114 タイトルと説明が異なる時間に異なる側面からスライドすることを意味します。彼らも jQuery サイクル スライダーを使用しています。

どうすればいいのかわかりません。どんなアドバイスでもいいですし、私はそれをうれしく思います.

ここに私の HTML コードがあります: https://gist.github.com/2697871

これが私のCSSコードです: https://gist.github.com/2697874

これが私のJSコードです: https://gist.github.com/2697877

お時間いただきありがとうございます。

4

1 に答える 1

1

まず、javascriptで、現在のスライドクラスをアクティブに設定します。
次に、Cssで、要素の位置をスライドの絶対外側に設定します

.title{position:absolute; top:0; left:100%; }
.text{position:absolute; top:0; left:-100%;}

最後に、Cssで、親がアクティブに設定されているときにアニメーションを追加します

.active .title{animation: animateTitle 2s 1 ease-out forwards;}
.active .text{animation: animateText 2s 1 ease-out forwards;}

@keyframes animateTitle {
    0%   { left: 100%; }
    100% { left: 0; }
}

@keyframes animateTtext {
    0%   { left: -100%; }
    100% { left: 0; }
}
于 2012-05-14T22:59:18.803 に答える