保持div直到动画完成

时间:2017-04-30 16:52:36

标签: html css animation skrollr

我正在使用Skrollr插件,我正在尝试创建一个右侧div将被卡住的部分,而左侧div必须滚动浏览各种图像/动画。我怎么能在那里举行那个div?

这是插件: https://prinzhorn.github.io/skrollr/

这就是我现在所拥有的,它只是非常简单而且处于早期阶段。

HTML:

<div class="screenheight slide">
  <div class="content">
    <div class="left-col">
      <div data-200="opacity:0; width:10em;" data-800="opacity:1;" class="large-img"><img src="img/schoen.png"></div>
    </div>
    <div class="right-col">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
    </div>
  </div>
</div>

CSS:

.content {
  position: absolute;
  left: 0;
  right: 0;
  width: 92%;
  max-width: 78em;
  top: 25%;
  padding: 0 4%;
}

.left-col {
  margin-left: 0%;
  text-align: right;
  width: 49.5%;
  float: left;
  display: block;
}

.left-col img {
  display: block;
  height: auto;
  width: 70%;
  margin: -5em auto 0;
}

.right-col {
  margin-left: 1%;
  width: 49.5%;
  text-align: left;
  float: left;
  display: block;
}

.right-col img {
  display: block;
  height: auto;
  width: 70%;
  margin: -5em auto 0;
}

0 个答案:

没有答案
相关问题