Question

我需要在背景图像（横幅）中显示文字。文本句子在数组中。该脚本应采用7个随机句子，并以不同的显示/隐藏时间在背景图像上显示。另外，当文本每次隐藏时，都应采用新的随机坐标显示。出现的文字不应互相干扰，也不应与h1或菜单项之类的其他文字相互干扰。句子应仅出现在页面的正确位置。

$(function() {
var array = ['first text', 'second sentence', 'Integer nec arcu est. In cursus', 'id tincidunt fermentum.', 'Vivamus mattis rhoncus risus', 'cursus, nec gravida nulla malesuada', 'interdum tortor, id c', 'r viverra arcu id', 'dictum eu volutpat odio', 'Curabitur viverra arcu ', ' elit. Nulla veh', 'posuere velit. Pellentesqu', 'interdum tortor,', 'Vivamus mattis rhoncus risus', 'egestas in blandit in, ultricies ac nibh', 'Vestibulum ante ipsum prim', 'lobortis orci rutrum in.', 'dum finibus. Duis sagittis', 'erat ultrices leo, vi', 'el. Suspendisse blandit mi sit', 'id cursus neque sapien', 'consectetur adipiscing elit.', 'Duis non quam ', 'quis nibh egestas,', 'non maximus luctu', 'non maximus luctu', 'Curabitur a fermentum ante', ]
});

.banner {
    background-image: url('http://www.pswca.org/images/skins/bg-banner-blue.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;
}

.banner h1 {
    font-size: 40px;
    font-weight: 200;
    line-height: 80px;
    color: #000;
}

.banner-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
            align-items: center;
    position: absolute;
    right: 0;
    height: 100%;
    width: 100%;
}

.banner-text h1 {
    margin-left: auto;
    margin-right: 10%;
}

.animate-text {
  position: absolute;
  left: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='banner'>
    <div class="banner-text align-self-center">
        <h1>Text text text,<br>
            <span class='text-blue'>text text</span></h1>
    </div>
            <div class="animate-text">
              <!-- here should be apearing sentences -->
              <span class='apear'></span>
              <span class='apear'></span>
              <span class='apear'></span>
              <span class='apear'></span>
              <span class='apear'></span>
              <span class='apear'></span>

            </div>
</div>

句子应仅出现在页面的右侧。

数组中的句子。
脚本应随机抽取7个句子。
脚本对句子采用随机坐标，以使它们彼此之间以及与静态文本h1之间不会发生冲突。
将它们放置在背景上的时间不同，但动画时间相同。
句子消失后，下一个句子应显示在不同的位置。

如何在背景图片上显示文字，而又不会互相干扰？

0 个答案: