1

ここでJavaScriptカルーセルを見つけました。

ウェブページの右ボタンまたは左ボタンをクリックすると、ページがアニメーションとともに動的にスクロールし、タイトルとコンテンツのアニメーション速度が異なります。
jQueryやJavaScriptでできると思います。

従来のJavaScriptを使用すると、この動くアニメーション効果を実装するのは非常に困難です。
動くアニメーションなしで実装するのは簡単ですが、動くアニメーションで実装するのはとても難しいと思います。

解決策についてjQueryAPIを調べましたが、それでもわかりませんでした。誰かが私にこの効果を実装する方法のヒントを教えてもらえますか？

4

1 に答える 1

3

Animation time is equal, but width of animating element is different. That's easy. Paralax-like slider.

Here's solution: http://jsfiddle.net/Tymek/6M5Ce/ for example

HTML

<div id="wrap">
    <div id="controls">
        <div class="prev">&larr;</div>
        <div class="next">&rarr;</div>
    </div>
    <div id="caption"><div class="pan">
        <div class="page"><h1>Lorem ipsum</h1></div>
        <div class="page"><h1>Litwo! Ojczyzno moja!</h1></div>
        <div class="page"><h1>Drogi Marszałku, Wysoka Izbo.</h1></div>        
    </div></div>

    <div id="content"><div class="pan">
        <div class="page"><p>Dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.</p></div>
        <div class="page"><p>Ty jesteś jak zdrowie. Nazywał się przyciągnąć do domu, fortuny szczodrot objaśniają wrodzone wdzięki i musiał pochodzić od Moskwy szeregów które już bronić nie chciałby do sądów granicznych. Słusznie Woźny cicho wszedł służący, i gdzie panieńskim rumieńcem dzięcielina pała.</p></div>
            <div class="page"><p>PKB rośnie Nikt inny was nie trzeba udowadniać, ponieważ zakres i miejsce szkolenia kadry odpowiadającego potrzebom. Gdy za sobą proces wdrożenia i rozwijanie struktur powoduje docenianie wag istniejących kryteriów zabezpiecza.</p></div>
    </div></div>
</div>​

SCSS

$sliderwidth: 400px;

#wrap {
    padding: 1em;
    background: #333;
}

h1 {
    font-weight: bold;
}

#controls {
    clear: both;
    height: 1em;
    margin: 0 0 1em 0;
    div {
        float: left;
        margin: 0 0.5em 0 0;
        padding: 0.2em;
        color: #FFF;
        background: #000;
        cursor: pointer;
    }
}

#caption, #content {
    background: #EEE;
    width: $sliderwidth;
    position: relative;
    overflow: hidden;
    .pan {
        width: 10000px;
        position: static;
    }
    .page {
        width: $sliderwidth;
        float: left;
        h1, p {
            margin: 0.2em 0.5em;
        }
    }
}
#content {
    .page {
        margin-right: $sliderwidth;
    }
}
​

JS

var slider = {
    length: parseInt($("#caption .page").length),
    current: 1,
    width: $("#caption").width(),
    next: function(){
        if(this.current < this.length){
            this.current = this.current + 1;
            this.animation();
        } else {
            this.current = 1;
            this.animation();
        }
    },
    animation: function(){
        var target = (0 - this.width) * (this.current - 1);
        this.run("#caption", target);
        target = target * 2;
        this.run("#content", target);
    },
    prev: function(){
        if(this.current > 1){
            this.current = this.current - 1;
            this.animation();
        } else {
            this.current = this.length;
            this.animation();
        }
    },
    run: function(part, target){
        $(part + " .pan").stop().animate(
            {"margin-left": target},
            1000
        );
    },
    initialize: function(){
        $("#controls .next").click(function(){slider.next();});
        $("#controls .prev").click(function(){slider.prev();});
    }
}

slider.initialize();
​
于 2012-12-26T09:16:38.363 に答える