scrollreveal

scrollreveal官方网站
美女瀑布流网站
看到了一种很不错的瀑布流效果

cnpm i scrollreveal -S

• Home.vue

<template>
  <div class="">
    <div class="same-content">
      dowebok.com
    </div>
    <div class="same-content">
      Hello world!
    </div>
    <div class="same-content">
      iPhone 6
    </div>
  </div>
</template>
<script>
import ScrollReveal from "scrollreveal";

export default {
  data() {
    return {
      scrollReveal: ScrollReveal()
    };
  },
  mounted() {
    this.scrollReveal.reveal(".same-content", {
      distance: "500px",
      origin: "top",
      duration: 500,
      easing: "linear",
      reset: true
    });
  }
};
</script>

<style lang="scss" scoped>
.same-content {
  width: 100%;
  height: 700px;
  background: green;
  display: flex;
  justify-content: center;
  align-items: center;
  &:first-child {
    background: red;
  }
  &:last-child {
    background: pink;
  }
}
</style>

写法还是有点繁琐的，没有wowjs方便，但是看jQuery中有这样的写法<div class="head-logo" data-scroll-reveal="enter left after 0.2s"></div>，尝试了下，一直没有成功