Как сделать так, чтобы появляющийся текст на фоновом изображении не мешал друг другу и другому тексту? - PullRequest
Новая
       23

Как сделать так, чтобы появляющийся текст на фоновом изображении не мешал друг другу и другому тексту?

0 голосов
/ 06 февраля 2019

Мне нужно сделать появляющийся текст в background-image (баннер).Текстовые предложения находятся в массиве.Скрипт должен взять 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>

Предложения должны появляться только в правой части страницы.

  1. Предложения в массиве.
  2. Скрипт должен принимать 7 случайных предложений.
  3. Скрипт принимает случайные координаты для предложений, чтобы они не сталкивались друг с другом и со статическим текстом h1.
  4. Размещение их на фоне с разнымизадержка, но то же время анимации.
  5. Когда предложение исчезает, следующее должно отображаться в другом месте.
...