在滚动动画中将<p>垂直居中

Question

我可能不是世界上第一个拥有鼠标悬停式向上滚动文本动画的人，但是，由于某种原因，与此同时，我却发现几乎没有一个类似与之比较。我的特定设置使用<figure>包裹在<figcaption>包裹在同级<p>包裹上。

我的CSS遇到的问题是动画完成后，我的<p>的垂直居中位置不是很好。也就是说，这取决于<p>中的文本有多长时间<p>的列表上方或下方将有太多空间。看看我的片段。我希望图形中的空间（黑色边框内）在顶部和底部相等，但这不是：

figure img {
  width: 300px;
  height: 300px;
}

figure {
  border: 2px solid black;
  margin-bottom: 0;
  margin-top: -2px;
  margin-right: -40px;
  position: relative;
  z-index: 1;
  display: inline-block;
  overflow: hidden;
  text-align: center;
}

figure figcaption {
  padding: 2em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure figcaption::before,
figure figcaption::after {
  pointer-events: none;
}

figure figcaption {
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  height: 100%;
}

figure p {
  font-family: Play;
  font-size: 20px;
  height: auto;
  overflow: hidden;
  position: relative;
  opacity: 0;
  bottom: -110%;
}

figure:hover h2 {
  opacity: 0;
  -webkit-transition: opacity 0.95s, -webkit-transform 0.95s;
  transition: opacity 0.95s, transform 0.95s;
}

figcaption:hover p:nth-of-type(1) {
  transition: 1s;
  bottom: 60%;
  opacity: 1;
}

figcaption:hover p:nth-of-type(2) {
  bottom: 60%;
  opacity: 1;
  transition: 1s;
  transition-delay: .3s;
}

figcaption:hover p:nth-of-type(3) {
  bottom: 60%;
  opacity: 1;
  transition: 1s;
  transition-delay: .6s;
}

figure:hover .border-rect {
  opacity: 0;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

figure.effect img {
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}

figure.effect:hover img {
  opacity: 0.4;
}

figure.effect figcaption::before,
figure.effect figcaption::after {
  position: absolute;
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 30px;
  content: '';
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
}

figure.effect figcaption::before {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
}

figure.effect figcaption::after {
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
  -webkit-transform: scale(1, 0);
  transform: scale(1, 0);
}

figure.effect h2 {
  opacity: 1;
  -webkit-transition: opacity 0.95s, -webkit-transform 0.95s;
  transition: opacity 0.95s, transform 0.95s;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(0, -20px, 0);
  transform: translate3d(0, -20px, 0);
  padding-top: 30%;
}

figure.effect:hover figcaption::before,
figure.effect:hover figcaption::after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

figure:hover h2 {
  opacity: 0;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

<figure class="effect">
  <img src="http://en.wikipedia.org/wiki/Mountain#/media/File:Lewis_overthrust_fault_nh10f.jpg" />
  <figcaption>
    <h2>Hover Somewhere Around Here</h2>
    <p>paragraph paragraph paragraph </p>
    <p>paragraph paragraph paragraph paragraph paragraph</p>
    <p>paragraph paragraph paragraph paragraph paragraph</p>
    <a href="#">View more</a>
  </figcaption>
</figure>

问题：如何使<p>的滚动健壮到<p>可能具有的不同文本长度？同样，如何确保<p>的滚动向上滚动并降落在图形中（该代码段中的黑色边框）垂直居中？

Answer 1

您已经做了相当不错的工作，我可以先说一遍。

关于居中问题，每边有32px的填充，因此，如果为段落提供最大宽度为236（300 -64），则段落将居中。我在代码段中将其设置为235，但如果需要，请添加额外的像素。：）

不同长度的问题..嗯。它可以满足不同宽度的段落。如果要满足不确定长度/可变长度的段落要求，则用于创建轮廓的图像将在添加溢出时阻碍滚动条的潜在可见性。如果我要制作一个可滚动的框，那么我可能会从带边框的div开始而不是一个图形..这可能是您采取的另一种选择？只是一个建议。

figure img {
  width: 300px;
  height: 300px;
}

figure h2 {
  max-width: 235px;
}

figure {
  border: 2px solid black;
  margin-bottom: 0;
  margin-top: -2px;
  margin-right: -40px;
  position: relative;
  z-index: 1;
  display: inline-block;
  overflow: hidden;
  text-align: center;
}

figure figcaption {
  padding: 2em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure figcaption::before,
figure figcaption::after {
  pointer-events: none;
}

figure figcaption {
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  height: 100%;
}

figure p {
  font-family: Play;
  font-size: 20px;
  max-width: 235px;
  height: auto;
  overflow: hidden;
  position: relative;
  opacity: 0;
  bottom: -110%;
}

figure:hover h2 {
  opacity: 0;
  -webkit-transition: opacity 0.95s, -webkit-transform 0.95s;
  transition: opacity 0.95s, transform 0.95s;
}

figcaption:hover p:nth-of-type(1) {
  transition: 1s;
  bottom: 70%;
  opacity: 1;
}

figcaption:hover p:nth-of-type(2) {
  bottom: 70%;
  opacity: 1;
  transition: 1s;
  transition-delay: .3s;
}

figcaption:hover p:nth-of-type(3) {
  bottom: 70%;
  opacity: 1;
  transition: 1s;
  transition-delay: .6s;
}

figure:hover .border-rect {
  opacity: 0;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

figure.effect img {
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}

figure.effect:hover img {
  opacity: 0.4;
}

figure.effect figcaption::before,
figure.effect figcaption::after {
  position: absolute;
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 30px;
  content: '';
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
}

figure.effect figcaption::before {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
}

figure.effect figcaption::after {
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
  -webkit-transform: scale(1, 0);
  transform: scale(1, 0);
}

figure.effect h2 {
  opacity: 1;
  -webkit-transition: opacity 0.95s, -webkit-transform 0.95s;
  transition: opacity 0.95s, transform 0.95s;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(0, -20px, 0);
  transform: translate3d(0, -20px, 0);
  padding-top: 30%;
  max-width:235px;
}

figure.effect:hover figcaption::before,
figure.effect:hover figcaption::after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

figure:hover h2 {
  opacity: 0;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

<figure class="effect">
  <img src="http://en.wikipedia.org/wiki/Mountain#/media/File:Lewis_overthrust_fault_nh10f.jpg" />
  <figcaption>
    <h2>Hover Somewhere Around Here
    </h2>
    <p>paragraph paragraph paragraph paragraph paragraph paragraph </p>
    <p>You hovered on me! Great!</p>
    <p>paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>
    <a href="#">View more</a>
  </figcaption>
</figure>