jQuery全屏视差滚动网页特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

28 109 37



特效描述:全屏视差 滚动网页。jQuery css3制作全屏视差滚动单页展示,点击右侧索引按钮可以切换对应的页面。

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src='js/jquery.min.js'></script>
<script src="js/script.js"></script>

3. HTML代码

<div class="promotion-carousel">
  <div class="promotions">
    <div>
      <div class="promotion" id="section1" style="background-image: url(img/1.jpg)">
        <div class="shade"></div>
        <div class="promo-detail cycle-overlay">
          <div class="promo-text">
            <span class="dash"></span>
            <span class="promo-flag">New Series From Sacha Baron Cohen</span>
            <a href="#" class="copy">
              <div class="headline">Who Is America?</div>
              <p class="body long">Season Finale: Sacha Baron Cohen explores our unique nation.</p>
            </a>
            <div class="buttons">
              <a class="button sho-play-link" href="#"></span>Play Now</a>
            <a class="button info-button" href="#">More Info</a>
            <a class="button see-all" href="#">All Episodes</a>
          </div>
        </div>
      </div>
    </div>
    <div class="promotion" id="section2" style="background-image: url(img/2.jpg)">
      <div class="shade"></div>
      <div class="promo-detail cycle-overlay">
        <div class="promo-text">
          <span class="dash"></span>
          <span class="promo-flag">Season 9 Premieres September 9</span>
          <a href="#" class="copy">
            <div class="headline">Shameless</div>
            <p class="body long">A scrappy, fiercely loyal Chicago family makes no apologies. Watch Seasons 1-8 now.</p>
          </a>
          <div class="buttons">
            <a class="button info-button" href="#">More Info</a>
          </div>
        </div>
      </div>
    </div>
    <div class="promotion" id="section3" style="background-image: url(img/3.jpg)">
      <div class="shade"></div>
      <div class="promo-detail cycle-overlay">
        <div class="promo-text">
          <span class="dash"></span>
          <a href="#" class="copy">
            <div class="headline">Baby Driver</div>
            <p class="body long">A young getaway driver (Ansel Elgort) meets the girl of his dreams (Lily James), and tries to ditch his criminal life.</p>
          </a>
          <div class="buttons">
            <a class="button sho-play-link" href="#"></span>Play Now</a>
          <a class="button info-button" href="#"></span>More Info</a>
      </div>
    </div>
  </div>
</div>
<div class="promotion" id="section4" style="background-image: url(img/4.jpg)">
  <div class="shade"></div>
  <div class="promo-detail cycle-overlay">
    <div class="promo-text">
      <span class="dash"></span>
      <a href="#" class="copy">
        <div class="headline medium">Our Cartoon President</div>
        <p class="body long">Season Finale - Militarization: Our Cartoon President militarizes the government. </p>
      </a>
      <div class="buttons">
        <a class="button sho-play-link" href="#"></span>Play Now</a>
      <a class="button info-button" href="#">More Info</a>
      <a class="button see-all" href="#">All Episodes</a>
    </div>
  </div>
</div>
</div>
<div class="promotion" id="section5" style="background-image: url(img/5.jpg)">
  <div class="shade"></div>
  <div class="promo-detail cycle-overlay">
    <div class="promo-text">
      <span class="dash"></span>
      <a href="#" class="copy">
        <div class="headline medium">Captain Fantastic</div>
        <p class="body long">A father (Viggo Mortensen) raising his six kids is forced to leave his paradise, challenging his idea of what it means to be a parent.</p>
      </a>
      <div class="buttons">
        <a class="button sho-play-link" href="#"></span>Play Now</a>
      <a class="button info-button" href="#">More Info</a>
    </div>
  </div>
</div>
</div>
<div class="promotion" id="section6" style="background-image: url(img/6.jpg)">
  <div class="shade"></div>
  <div class="promo-detail cycle-overlay">
    <div class="promo-text">
      <span class="dash"></span>
      <a href="#" class="copy">
        <div class="headline">Home Again</div>
        <p class="body long">Newly single Alice (Reese Witherspoon) meets three aspiring filmmakers in need of a place to stay.</p>
      </a>
      <div class="buttons">
        <a class="button sho-play-link" href="#"></span>Play Now</a>
      <a class="button info-button" href="#">More Info</a>
    </div>
  </div>
</div>
</div>
<div class="promotion" id="section7" style="background-image: url(img/7.jpg)">
  <div class="shade"></div>
  <div class="promo-detail cycle-overlay">
    <div class="promo-text">
      <span class="dash"></span>
      <a href="#" class="copy">
        <div class="headline">The Affair</div>
        <p class="body long">Noah, Alison, Helen and Cole are on separate journeys, but question what they’re holding on to as their lives keep crashing back into one another.</p>
      </a>
      <div class="buttons">
        <a class="button info-button" href="#">More Info</a>
      </div>
    </div>
  </div>
</div>
<div class="promotion" id="section8" style="background-image: url(img/8.jpg)">
  <div class="shade"></div>
  <div class="promo-detail cycle-overlay">
    <div class="promo-text">
      <span class="dash"></span>
      <a href="#" class="copy">
        <div class="headline medium">The Girl On The Train</div>
        <p class="body long">A woman (Emily Blunt), devastated by her divorce, becomes entangled in a mystery after witnessing a shocking event.</p>
      </a>
      <div class="buttons">
        <a class="button sho-play-link" href="#"></span>Play Now</a>
      <a class="button info-button" href="#">More Info</a>
    </div>
  </div>
</div>
</div>
<div class="promotion" id="section9" style="background-image: url(img/9.jpg)">
  <div class="shade"></div>
  <div class="promo-detail cycle-overlay">
    <div class="promo-text">
      <span class="dash"></span>
      <a href="#" class="copy">
        <div class="headline">Rosewater</div>
        <p class="body long">A journalist gets arrested in Iran and is held and tortured for 118 days.</p>
      </a>
      <div class="buttons">
        <a class="button sho-play-link" href="#"></span>Play Now</a>
      <a class="button info-button" href="#">More Info</a>
    </div>
  </div>
</div>
</div>
<div class="promotion" id="section10" style="background-image: url(img/10.jpg)">
  <div class="shade"></div>
  <div class="promo-detail cycle-overlay">
    <div class="promo-text">
      <span class="dash"></span>
      <a href="#" class="copy">
        <div class="headline">WWII Collection</div>
        <p class="body long">This collection features films that all take place during the cataclysmic World War II era. Take the time to watch them all.</p>
      </a>
      <div class="buttons">
        <a class="button see-all" href="#">See Entire Collection</a>
      </div>
    </div>
  </div>
</div>
</div>
</div>
</div>
<div class="navigation">
  <ul>
    <li><a href="#section1" data-number="1"></a></li>
    <li><a href="#section2" data-number="2"></a></li>
    <li><a href="#section3" data-number="3"></a></li>
    <li><a href="#section4" data-number="4"></a></li>
    <li><a href="#section5" data-number="5"></a></li>
    <li><a href="#section6" data-number="6"></a></li>
    <li><a href="#section7" data-number="7"></a></li>
    <li><a href="#section8" data-number="8"></a></li>
    <li><a href="#section9" data-number="9"></a></li>
    <li><a href="#section10" data-number="10"></a></li>
  </ul>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到