Question

我正在尝试创建类似于this site's main headline的文本显示，但是我不想从底部显示向上，而是从底部显示向上。

我已经尝试过了，我认为这是一个很酷的发现，但是我担心我无法达到预期的结果。我觉得我应该尝试以某种方式掩盖和揭示跨度与变换？任何帮助表示赞赏！

我愿意使用jquery，香草javascript和/或CSS解决方案。

html：

<div>
  <div class="grid grid-a">
    <h1>
      <span class="grid-item">These Are&nbsp;</span>
            <span class="grid-item">Many Spans&nbsp;</span>
            <span class="grid-item">Of Text&nbsp;</span>
            <span class="grid-item">Each Span&nbsp;</span>
            <span class="grid-item">Of Text&nbsp;</span>
            <span class="grid-item">Should Reveal&nbsp;</span>
            <span class="grid-item">From The Top&nbsp;</span>
      <span class="grid-item">Of Its Own Span&nbsp;</span>
        </h1>
    </div>
</div>

css：

.grid {
    width: 300px;
    height: 100%;
    float: left;
    overflow: hidden;
}

.grid-item {
    float: left;
    transition: transform 0.4s;
    overflow: hidden;
    transform: translatey(-500px);
    opacity: 0;
}

.grid-item.is-moved {
    transform: translatey(0px);
    opacity: 1;
    transition: cubic-bezier();
    -webkit-animation: 0.3s ease 0s normal forwards 1 fadein;
    animation: 0.3s ease 0s normal forwards 1 fadein;
}

@keyframes fadein {
    0% {
        opacity: 0;
    }
    66% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadein {
    0% {
        opacity: 0;
    }
    66% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

js

$(document).ready(function() {
        var items = document.querySelectorAll('.grid-a .grid-item')

        // get vendor transition property
        var docElemStyle = document.documentElement.style
        var transitionProp =
            typeof docElemStyle.transition == 'string'
                ? 'transition'
                : 'WebkitTransition'

        for (var i = 0; i < items.length; i++) {
            var item = items[i]
            // stagger transition with transitionDelay
            item.style[transitionProp + 'Delay'] = i * 300 + 'ms'
            item.classList.toggle('is-moved')
        }
    })

Answer 1

您可以在每个网格项中使用直接跨度子级的绝对位置，如下所示：

function onPlayerStateChange(event) {
    const player = event.target;
    if (event.data === YT.PlayerState.PLAYING) {
      const temp = event.target.getVideoUrl();
      const otherVideos = (video) => video !== player.getVideoUrl() !== temp;
      const pauseVideo = (video) => video.pauseVideo();
      players.filter(otherVideos).forEach(pauseVideo);
    }

    const playerVars = player.b.b.playerVars;
    if (playerVars.loop && event.data === YT.PlayerState.ENDED) {
      player.seekTo(playerVars.start);
    }
  }

$(document).ready(function() {
    $('.grid-a .grid-item span').each(function(i, x) {
        setTimeout(function() {
            $(x).animate({ top: 0 }, 1200);
        }, i * 200);
    });
});

.grid {
    width: 350px;
}

.grid-item {
    position: relative;
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
}

.grid-item > span {
    position: absolute;
    top: -100%;
}

基本上，每个绝对跨度都以<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="grid grid-a"> <h1> <div class="grid-item"><span>These Are </span></div> <div class="grid-item"><span>Many Spans </span></div> <div class="grid-item"><span>Of Text </span></div> <div class="grid-item"><span>Each Span </span></div> <div class="grid-item"><span>Of Text </span></div> <div class="grid-item"><span>Should Reveal </span></div> <div class="grid-item"><span>From The Top </span></div> <div class="grid-item"><span>Of Its Own Span </span></div> <div class="grid-item"><span>Not Drop From </span></div> <div class="grid-item"><span>The Top of The Grid </span></div> </h1> </div>开头，然后将其设置为top: -100%（应设置其位置），并设置setTimeout-trick动画，以使所有动画顺利进行。

希望有帮助

从上至下显示文字元素

1 个答案: