HTML5垂直滚动时间轴特效代码下载



12 44 15



特效描述:垂直滚动 时间轴,HTML5垂直滚动时间轴特效代码下载

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>

2. HTML代码

<ul class="timeline">
  <li class="bar"></li>
</ul>
<div class="container">
  <section data-name="首页">
    <h1>首页</h1>
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima exercitationem earum beatae assumenda debitis quibusdam, ducimus autem a ab nisi, praesentium et enim numquam consequatur similique quis consectetur consequuntur iure!
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima exercitationem earum beatae assumenda debitis quibusdam, ducimus autem a ab nisi, praesentium et enim numquam consequatur similique quis consectetur consequuntur iure!
    </p>
  </section>
  <section data-name="公司介绍">
    <h1>公司介绍</h1>
    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate porro odit esse ut quidem deleniti dolore doloremque aliquam neque ad at optio odio quasi aperiam necessitatibus reiciendis, quaerat quod autem.</h2>
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Placeholder&w=1800&h=600" alt="" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima exercitationem earum beatae assumenda debitis quibusdam, ducimus autem a ab nisi, praesentium et enim numquam consequatur similique quis consectetur consequuntur iure!
    </p>
    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate porro odit esse ut quidem deleniti dolore doloremque aliquam neque ad at optio odio quasi aperiam necessitatibus reiciendis, quaerat quod autem.</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima exercitationem earum beatae assumenda debitis quibusdam, ducimus autem a ab nisi, praesentium et enim numquam consequatur similique quis consectetur consequuntur iure!
      <br>
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Placeholder&w=1800&h=600" alt="" />
    </p>
    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate porro odit esse ut quidem deleniti dolore doloremque aliquam neque ad at optio odio quasi aperiam necessitatibus reiciendis, quaerat quod autem.</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima exercitationem earum beatae assumenda debitis quibusdam, ducimus autem a ab nisi, praesentium et enim numquam consequatur similique quis consectetur consequuntur iure!
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima exercitationem earum beatae assumenda debitis quibusdam, ducimus autem a ab nisi, praesentium et enim numquam consequatur similique quis consectetur consequuntur iure!
    </p>
    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate porro odit esse ut quidem deleniti dolore doloremque aliquam neque ad at optio odio quasi aperiam necessitatibus reiciendis, quaerat quod autem.</h1>
  </section>
  <section data-name="案例">
    <h1>案例</h1>
    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate porro odit esse ut quidem deleniti dolore doloremque aliquam neque ad at optio odio quasi aperiam necessitatibus reiciendis, quaerat quod autem.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima exercitationem earum beatae assumenda debitis quibusdam, ducimus autem a ab nisi, praesentium et enim numquam consequatur similique quis consectetur consequuntur iure!
    </p>
  </section>
  <section data-name="招聘中心">
    <h1>招聘中心</h1>
    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate porro odit esse ut quidem deleniti dolore doloremque aliquam neque ad at optio odio quasi aperiam necessitatibus reiciendis, quaerat quod autem.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
  </section>
  <section data-name="关于我们">
    <h1>关于我们</h1>
    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate porro odit esse ut quidem deleniti dolore doloremque aliquam neque ad at optio odio quasi aperiam necessitatibus reiciendis, quaerat quod autem.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
  </section>
  <section data-name="联系我们">
    <h1>联系我们</h1>
    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate porro odit esse ut quidem deleniti dolore doloremque aliquam neque ad at optio odio quasi aperiam necessitatibus reiciendis, quaerat quod autem.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
  </section>
</div>
<script>
"use strict";
$(function () {
  function sumSection() {
    return $(".container").height();
  }
  function setDimensionBar() {
    $(".bar").css({
      "height": $(window).height() / sumSection() * 100 + "%"
    });
  }
  function setSection() {
    $.each($("section"), function (i, element) {
      $(element).css({
        "min-height": $(window).height()
      });
    });
  }
  function addBehaviours() {
    var sections = $("section");
    $.each($(".node"), function (i, element) {
      $(element).on("click", function (e) {
        e.preventDefault();
        var scroll = $(sections[i]).offset().top;
        $('html, body').animate({
          scrollTop: scroll
        }, 500);
      });
    });
  }
  function arrangeNodes() {
    $(".node").remove();
    $.each($("section"), function (i, element) {
      var name = $(element).data("name");
      var node = $("<li class='node'><span>" + name + "</span></li>");
      $(".timeline").append(node);
      $(node).css({
        "top": $(".timeline").height() / $(document).height() * $(element).offset().top
      });
    });
    addBehaviours();
  }
  $(window).on("scroll", function () {
    var top = window.scrollY / sumSection() * 100;
    $(".bar").css({
      "top": top + "%"
    });
  });
  $(window).on("resize", function () {
    setSection();
    arrangeNodes();
    setDimensionBar();
  });
  setTimeout(function () {
    setSection();
    arrangeNodes();
    setDimensionBar();
  }, 200);
});
</script>



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


热门标签: 滚动导航菜单 时间轴 滚动切换 日历选择器 图片滚动 时间日期插件 文字滚动 图片文字滚动 全屏滚动 页面滚动 滚动流动 自动滚动图片轮播 日历日期时间

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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