0

Windows 8 の横スクロール スタイルの Web デザインを作成しています。コンテンツが四角形に表示される方法をスクリプト化するのに助けが必要です。コンテンツは、ユーザーがコンテンツを表示し、最後の見出しに到達した後に方向を切り替えることができるように、見出しの間にわずかな一時停止を加えて、1 つずつ下にスクロールする必要があります。

ここにコードがあります：

<html>
<head>
<style type="text/css">
body
{
    background-color:blue;
    color:white;
    overflow:hidden;
}
span.start
{
    font-size:280%;
    font-family:helvetica;
}
div.spacer
{
    margin-top:50px;
}
div.spacer-left
{
    margin-left:30px;
}
div.box1
{
    width:400px;
    height:200px;
    display:inline-block;
    margin-left:10px;
    overflow:hidden;
}
div.box2
{
    width:200px;
    height:200px;
    display:inline-block;
    margin-left:10px;
}
#cyan
{
    background-color:cyan;
}
#purple
{
    background-color:purple;
}
#lime
{
    background-color:lime;
}
#orange
{
    background-color:orange;
}
#red
{
    background-color:red;
 }
#yellow
{
    background-color:yellow;
}
div.length
{
    position:fixed;
    width:5000px;
    -moz-transition:all 2s;
    -webkit-transition:all 2s;
}
div.click
{
    font-size:500%;
    text-decoration:none;
    color:white;
    position:absolute;
    margin-left:1300px;
    margin-top:-400px;
}
#length:target
{
    margin-left:-1000px;
}
div.content
{
    position:relative;
    height:500px;
    font-size:200%;
}
</style>
<script type="text/javascript">
var rate = 0;
function scroll() {
    setInterval(function (){
        document.getElementById('content').style.marginTop = rate;
        rate--;
    }, 10);
}
onload=scroll();
</script>
</head>
<body>
<div class="length" id="length">
<div class="spacer-left">
<span class="start">Start</span>
<div class="spacer"></div>
<div class="box1" id="cyan">
<div class="content" id="content">
<h1>Some content</h1>
<h1>Some more content</h1>
<h1>Even more content</h1>
</div>
</div>
<div class="box1" id="purple">
</div>
<div class="box2" id="lime">
</div>
<div class="box2" id="orange">
</div>
<br>
<div class="box2" id="red">
</div>
<div class="box1" id="yellow">
</div>
<div class="box2" id="cyan">
</div>
<div class="box1" id="purple">
</div>
<br>
<div class="box1" id="lime">
</div>
<div class="box2" id="orange">
</div>
<div class="box1" id="yellow">
</div>
<div class="box2" id="red">
</div>
<a href="#length"><div class="click" id="click">
>
</div></a>
</div>
</div>
</body>
</html>

このコードでは、コンテンツはスクロールするだけで、その間に一時停止はありません。

4

1 に答える 1

0

アニメーションに jQuery を使用すると、おそらく簡単になります。私はここであなたのためのコードの良いスタートを切っています: http://jsfiddle.net/ou67gr51/1/

ご覧のとおり、スライドではなくフェードしています。それを別のアニメーションに簡単に変更できます。

やるべきことはまだありますが、これがお役に立てば幸いです。

$('.box').each(function() {
    var $this = $(this);
    var $content = $('.content', $this);
    var i = -1;
    function showNext() {
        i++;
        if (i == $content.length)
            i = 0;
        
        $content.eq(i).fadeIn();
    }
    function switchToNext() {
        $content.eq(i).fadeOut(showNext);
    }
    showNext();
    window.setInterval(switchToNext, 2000);
});
body
{
    background-color:blue;
    color:white;
    overflow:hidden;
}
span.start
{
    font-size:280%;
    font-family:helvetica;
}
div.spacer
{
    margin-top:50px;
}
div.spacer-left
{
    margin-left:30px;
}
div.box1
{
    width:400px;
    height:200px;
    display:inline-block;
    margin-left:10px;
    overflow:hidden;
}
div.box2
{
    width:200px;
    height:200px;
    display:inline-block;
    margin-left:10px;
}
#cyan
{
    background-color:cyan;
}
#purple
{
    background-color:purple;
}
#lime
{
    background-color:lime;
}
#orange
{
    background-color:orange;
}
#red
{
    background-color:red;
 }
#yellow
{
    background-color:yellow;
}
div.length
{
    position:fixed;
    width:5000px;
    -moz-transition:all 2s;
    -webkit-transition:all 2s;
}
div.click
{
    font-size:500%;
    text-decoration:none;
    color:white;
    position:absolute;
    margin-left:1300px;
    margin-top:-400px;
}
#length:target
{
    margin-left:-1000px;
}
div.content
{
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="length" id="length">
<div class="spacer-left">
<span class="start">Start</span>
<div class="spacer"></div>
<div class="box" id="cyan">
<div class="content">
<h1>1 Some content</h1>
</div>
    <div class="content">
<h1>2 Some content</h1>
</div>
    <div class="content">
<h1>3 Some content</h1>
</div>
</div>
<div class="box1" id="purple">
</div>
<div class="box2" id="lime">
</div>
<div class="box2" id="orange">
</div>
<br>
<div class="box2" id="red">
</div>
<div class="box1" id="yellow">
</div>
<div class="box2" id="cyan">
</div>
<div class="box1" id="purple">
</div>
<br>
<div class="box1" id="lime">
</div>
<div class="box2" id="orange">
</div>
<div class="box1" id="yellow">
</div>
<div class="box2" id="red">
</div>
<a href="#length"><div class="click" id="click">
>
</div></a>

于 2015-01-28T15:22:53.920 に答える