Question

我正在寻找一种在两个垂直部分之间进行过渡的方法，这些过渡部分看起来像在fullpage.js中提供的那样： https://codepen.io/ehouarn-perret/pen/jprrqx?editors=0010

目前，除了幻灯片过渡会导致上一节中的直接淡入淡出之外，我几乎有类似的东西： https://codepen.io/ehouarn-perret/pen/ajVBzY?editors=0110

我的JavaScript代码：

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function getSectionColors(length) {
  var results = [];
  for (var i = 0; i < length; i++) {
    var randomColor = getRandomColor();
    results.push(randomColor);
  }
  return results;
}

var sectionCount = 6;
var sectionColors = getSectionColors(sectionCount);

for (var i = 0; i < sectionCount; i++) {
  var section = 
      "<section style='background-color: " + sectionColors[i] + ";'>" +
      "<div class='section-content'>" +
      "<h1>" + i + "</h1>" +
      "</div>" +
      "</section>";
  $('#sections').append(section);
}

Reveal.initialize({
  width: '100%',
  height: '100%',
  progress: false,
  transition: 'slide',
  backgroundTransition: 'slide',
  mouseWheel: true,
});

console.log(Reveal.getScale());

和相关的HTML

<div class="reveal">
    <div class="slides">
        <section id="sections">
        </section>
    </div>
</div>

我如何实现类似的过渡，当从一个过渡到另一个时，将两个部分粘在一起？

Reveal.js：如何在两个垂直部分之间创建自定义过渡（未预定义）而没有淡入淡出效果？

0 个答案: