Анонсер с анимацией

В общем пригодится тем у кого нет.

делаем картинку PNG с прозрачностью. Например213653_JLVJ.png

качаем GSAP https://greensock.com/?download=GSAP-JS

картинку и содержимое архива кладем в отдельную папку и ней же создаем небольшой HTML

<html>

<head>

<meta charset="utf-8">

* {

margin-top: 0px;

margin-right: auto;

margin-left: auto;

margin-bottom: 10px;

padding: 0px;

overflow-x: hidden;

overflow-y: hidden;

}

.main {

width: 100%;

height: 100%;

overflow: hidden;

}

\\ стиль для картинки

.mainlinepicture {

width: 1280px;

height: 200px;

background-color: transparent;

position: absolute;

bottom: -250px;

\\ Важный момент чтобы DIV был спрятан. картинка 200px так что опускаем его ниже границы.

left: 0px;

}

\\ стиль для подписи

.mainlinepicturemask {

width: 1280px;

height: 50px;

box-sizing: border-box;

z-index: 7;

position: absolute;

background-color: rgba(80, 80, 80, 0.5);

opacity: 0.8;

bottom: -260px;

\\ важный момент тоже прячем слой ниже границы

text-align: left;

overflow-x: hidden;

overflow-y: hidden;

text-indent: 0px;

font-size: -webkit-calc(150%);

color: rgb(255, 255, 255);

line-height: 50px;

padding-left: 50px ;

}

img {

width:100%;

height:100%;

}

p {

text-align: left;

color: #FFFFFF;

text-shadow: 3px 3px 8px #000000;

font-size: xx-large;

}

</style>

<script type="text/javascript" src="./TweenMax.min.js"></script>

<script type="text/javascript" src="./imagesloaded.pkgd.min.js"></script>

</head>

<body>

<div class="main">

 <div class="mainline"></div>

 <div class="mainlinepicture"><img src="ИМЯ_КАРТИНКИ.jpg" alt="" />

<div class="mainlinepicturemask">WarThunder</div> 

 </div>

</div>

<script type="text/javascript" >

\\ Подготовка анимации

function init(){

\\анимация для основного DIV

 TweenMax.fromTo('.mainline',1,{y:0},{y:-260,delay:0.5});

\\анимация для DIV c картинкой

 TweenMax.fromTo('.mainlinepicture',1,{y:0},{y:-260,delay:1});

\\анимация для DIV c названием стрима

 TweenMax.fromTo('.mainlinepicturemask',1,{y:0},{y:-260,delay:1});

\\ в параметре DELAY надо выставить количество секунд показа анонсера

 TweenMax.to('.cont_text_bottom',1,{scale:1,delay:4,onComplete:restart});

}

imagesLoaded( document.querySelector('.mainline'), function( ) {

init();

});

function restart(){

 TweenMax.to('.mainline',1,{y:0});

 TweenMax.to('.mainlinepicture',1,{y:0,delay:1});

 TweenMax.to('.mainlinepicturemask',1,{y:0,delay:1});

\\ в параметре DELAY надо выставить количество секунд задержки перед повтором анонсера

 TweenMax.to('.cont_text_bottom',1,{scale:0,delay:90,onComplete:init});

}

</script>

</body>

</html>