编程技术

列表动画简单制作

前言

闲来无事,本来在项目中添加动画展示,免得太生硬。百度看了下动画的项目,感觉太大了,为一个小小的功能就需要这么多动画库。

正好前几天学了点动画展示功能,便手撕代码看看。

HTML

首先弄个列表,这个没啥好说的:

<div class="main-container">
  <div class="container">
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
  </div>
</div>

CSS

css主要用到CSS3的动画属性,具体可以到网上查看他们的属性。

.main-container {
  background: #fff;
  max-width: 1000px;
  margin: 25px auto 25px auto;
  position: relative;
}

.container {
  position: relative;
  padding: 25px;
}

.list {
  width: 100%;
  height: 200px;
  text-align: center;
  background-color: #eee;
  margin: 20px 0;
}

.animation-element {
  opacity: 0;
  position: relative;
}

.animation-element.slide-left {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(-100px, 0px, 0px);
  -webkit-transform: translate3d(-100px, 0px, 0px);
  -o-transform: translate(-100px, 0px);
  -ms-transform: translate(-100px, 0px);
  transform: translate3d(-100px, 0px, 0px);
}

.animation-element.slide-left.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

JavaScript

js这块主要是切换class属性以及监听滚动条事件来重载动画。

$(document).ready(function() {
  //确定窗口动画
  var animation_elements = $.find('.animation-element');
  var web_window = $(window);
  //查看动画容器
  function check_if_in_view() {
    //获取当前窗口信息
    var window_height = web_window.height();
    var window_top_position = web_window.scrollTop();
    var window_bottom_position = (window_top_position + window_height);
    //迭代元素查看否在动画容器中
    $.each(animation_elements, function() {
      //获取元素信息
      var element = $(this);
      var element_height = $(element).outerHeight();
      var element_top_position = $(element).offset().top;
      var element_bottom_position = (element_top_position + element_height);

      //检查这个当前容器是否可见
      if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
        element.addClass('in-view');
      } else {
        element.removeClass('in-view');
      }
    });

  }
  //滚动检测
  $(window).on('scroll resize', function() {
    check_if_in_view()
  });
  //初始化加载
  $(window).trigger('scroll');
});

展示

具体展示可以看看:

本站内容遵循知识共享署名-非商业性使用-相同方式共享4.0 国际许可协议

转载原创文章请注明转自:列表动画简单制作

发表评论

理性发言,共建美好精神家园!