ぬえさぶろうのAnimate放送部

解説

コンテンツのつくりかた

1. ボタンをクリックしてコンテンツを選択する
2. コンテンツを移動する
3. 背景画像を移動する
4. ボタンのスタイルを変更する

HTML

<div class="parallax_display">
              <div id="parallax_slide">
                <div id="parallax_base">  
                    <div id="bg1">
                        <div id="bg2">
                  <div id="sections">
                      <section>
                          <dl>
                              <dt>page01</dt>
                              <dd>パララックス効果とは</dd>
                            </dl>
                      </section>
                      <section>
                            <dl>
                              <dt>page02</dt>
                              <dd>パララックス効果とは</dd>
                            </dl>
                      </section>
                      <section>
                            <dl>
                              <dt>page03</dt>
                              <dd>パララックス効果とは</dd>
                            </dl>
                      </section>
                      <section>
                            <dl>
                              <dt>page04</dt>
                              <dd>パララックス効果とは</dd>
                            </dl>
                      </section>
                  <!--/#sections--></div>
                <!--/#bg2--></div>
                <!--/#bg1--></div>
                <!--/#parallax_base--></div>
                <!--/#parallax_slide--></div>
                <ul class="parallax_indicator">
                    <li><a href="#" class="current">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                </ul>
            <!--/.parallax_display--></div>

CSS

/*パララックス効果*/
.parallax_display{
    width:96%;
    max-width:600px;
    height:auto;
    aspect-ratio:16/9;
    background:#fff;
    margin:0 auto;
    position:relative;
}
#parallax_base{
    width:100%;
    min-width:600px;
    height:400px;
    background:url("../../images/news/parallax/bg_base.png")0 100% repeat-X;
    margin:0 auto;
    position:absolute;
    bottom:-100px;
    transition:background .3s;
}
#bg1{
    width:100%;
    min-width:600px;
    height:400px;
    background:url("../../images/news/parallax/bg1.png") 0 100% repeat-X;
    position:absolute;
    bottom:0;
    transition:background .3s;
}
#bg2{
    width:100%;
    min-width:600px;
    height:400px;
    background:url("../../images/news/parallax/bg2.png") 0 100% repeat-X;
    overflow:hidden;
    position:absolute;
    bottom:0;
    transition:background .3s;
}
#parallax_slide{
    display:block;
    width:100%;
    min-width:600px;
    height:auto;
    aspect-ratio:16/9;
    margin:0 auto;
    baclground:#fff;
    position:relative;
    overflow:hidden;
}
#sections{
    position:absolute;
    width:2400px;
    height:100%;
}
#parallax_slide section{
    float:left;
    width:600px;
    min-height:337.5px;
    padding:80px 100px;
    background:transparent;
}
#parallax_slide section dl{
    background:rgba(0, 0, 0, .4 );
    color:#fff;
    padding:1em;
}
#sections::after{
    display:block;
    clear:both;
}
.parallax_indicator{
    display:flex;
    flex-direction:row;
    width:100px;
    margin:0 auto;
}
.parallax_indicator li{
    margin:0 1em 0 0;
}
.parallax_indicator li:last-child{
    margin:0;
}
.parallax_indicator a{
    text-indent:-9999px;
    display:block;
    width:16px;
    height:16px;
    border-radius:8px;
    background:#664949;
}
.parallax_indicator a.current{
	background:#988080;
}

JS

// パララックス効果
$(function(){
    $(".parallax_indicator a").click(function(){
        var dis = $(this).html() - 1;
        
        //スライドの移動　
        $("#sections").animate({"left" : dis * - 600 + "px"}, 300);
        //一番奥
        $("#parallax_base").css("background-position", dis * -20 + "px 100%");
        $("#bg1").css("background-position",dis * -150 + "px 100%");
        $("#bg2").css("background-position",dis * -600 + "px 100%");
        
        //ボタンのスタイル変更
        $(".current").removeClass("current");
        $(this).addClass("current");
        
        return false;
    });
});