HTML 5 animated banner

0+

HONOR.RU

Фулвью, Ай Комфорт, Серия, Графика ООО "Техкомпания XXXX", 121614, City, Street, Building, Contact info

HONOR MagicBook 16

Мир больших возможностей

Процессор AMD Ryzen 5600H

16, 1-дюймовый FullView-экран с режимом защиты зрения Eye Comfort

Металлический корпус

One of the most effective ways to get visitor’s attention is to include animated banners.

HTML5 banners consist of images, videos, animations, text, and HTML code. Banner is actually nothing else, as number of nested layers, styled with css. Best practice were not to use any js to avoidt any conflicts with target page code if any.

CSS provides enough functionality to animate elements of the banner

a{color:#000;text-decoration: none;}
.wrapper{
font-family: Monserrat,arial, sans serif;
position:relative;
margin:auto;
width:100%;
max-width:540px;
min-width:320px;
overflow:hidden;
height:180px;
border:solid 1px #aaa;
}
.pic {
position:absolute;
left:-240px;
top:20px;
  width: 170px;
  height: 100px;
  background-color: none;
  animation: pic 10s linear infinite normal;
  animation-fill-mode: forwards;
  /*animation-delay: 2s;*/
}
@keyframes pic {
  0%   {left:-240px; top:20px;opacity:1;}
  20% {left:70px; top:20px;opacity:1;}
  98% {left:70px; top:20px;opacity:1;}
  100% {left:70px; top:20px;opacity:0;}
}
.capt {
position:absolute;
left:0px;
bottom:10px;
  width: 200px;
  height: 50px;
  opacity:0;
  z-index:1;
  background-color: none;

  animation: capt 10s linear infinite normal;
  animation-fill-mode: forwards;
  font-family: Monserrat,arial, sans serif;
}
@keyframes capt {
  0%   {left:10px; bottom:30px;opacity:0;}
  30% {left:10px; bottom:30px;opacity:0;}
  70% {left:10px; bottom:30px;opacity:1;}
  98% {left:10px; bottom:30px;opacity:1;}
  100% {left:10px;bottom:30px;opacity:0;}
}
.picRzLogo {
position:absolute;
right:8px;
bottom:5px;
  width: 100px;
  height: 50px;
  opacity:0;
  z-index:2;
  background-color: none;
 animation: picRz 10s linear infinite normal;
  animation-fill-mode: forwards;
}


@keyframes picRz {
  0%  {right:8px; bottom:4px;opacity:0;}
  30% {right:8px; bottom:4px;opacity:0;}
  70% {right:8px; bottom:4px;opacity:1;}
  95% {right:8px; bottom:4px;opacity:1;}
  100% {right:8px;bottom:4px;opacity:0;}
}

.captionBig {
position:absolute;
left:250px;
top:15px;
  width: 200px;
  height: 50px;
  opacity:0;
  z-index:3;
  background-color: none;
 animation: captBg 10s linear infinite normal;
  animation-fill-mode: forwards;
}


@keyframes captBg {
  0%  {left:240px; top:15px;opacity:0;}
  30% {left:240px; top:15px;opacity:0;}
  70% {left:240px; top:15px;opacity:1;}
  98% {left:240px; top:15px;opacity:1;}
  100%{left:240px; top:15px;opacity:0;}
}
.fadeLn0 {
position:absolute;
font-size:12px;margin-top:2px;
left:250px;
top:45px;
  width: 150px;
  height: 20px;
  opacity:0;
  z-index:4;
  background-color: none;
 animation: fadeLn0 10s linear infinite normal;
  animation-fill-mode: forwards;
}


@keyframes fadeLn0 {
  0%  {left:250px; top:65px;opacity:0;}
  40% {left:250px; top:65px;opacity:0;}
  60% {left:250px; top:65px;opacity:1;}
  70% {left:250px; top:65px;opacity:1;}
  75% {left:250px; top:65px;opacity:0;}
  100%{left:250px; top:65px;opacity:0;}
}
.fadeLn1 {
position:absolute;
font-size:12px;margin-top:2px;
left:250px;
top:45px;
  width: 150px;
  height: 20px;
  opacity:0;
  z-index:5;
  background-color: none;
 animation: fadeLn1 10s linear infinite normal;
  animation-fill-mode: forwards;
}


@keyframes fadeLn1 {
  0%  {left:250px; top:65px;opacity:0;}
  40% {left:250px; top:65px;opacity:0;}
  60% {left:250px; top:65px;opacity:0;}
  70% {left:250px; top:65px;opacity:0;}
  75% {left:250px; top:65px;opacity:1;}
  85% {left:250px; top:65px;opacity:1;}
  90% {left:250px; top:65px;opacity:0;}
  100%{left:250px; top:65px;opacity:0;}
}
.fadeLn2 {
position:absolute;
font-size:12px;margin-top:2px;
left:250px;
top:45px;
  width: 150px;
  height: 20px;
  opacity:0;
  z-index:6;
  background-color: none;
 animation: fadeLn2 10s linear infinite normal;
  animation-fill-mode: forwards;
}


@keyframes fadeLn2 {
  0%  {left:250px; top:65px;opacity:0;}
  40% {left:250px; top:65px;opacity:0;}
  60% {left:250px; top:65px;opacity:0;}
  65% {left:250px; top:65px;opacity:0;}
  85% {left:250px; top:65px;opacity:0;}
  90% {left:250px; top:65px;opacity:1;}
  98% {left:250px; top:65px;opacity:0;}
  100%{left:250px; top:65px;opacity:0;}
}
.age{
font-size:14px;
width:16px;
border:solid 1px #aaa;
border-radius:50%;
padding:2px;
}
.smallTxt{font-size:7px;}
.honor{
display:inline-block;
font-size:10px;
border:solid 1px #999;
border-radius:3px;
padding:2px;
margin:2px 0;}

@media only screen and (max-device-width: 480px) {

.pic {
left:-240px;
top:10px;
  width: 150px;
  height: 100px;
  background-color: none;
  animation: pic 10s linear infinite normal;
  animation-fill-mode: forwards;
  /*animation-delay: 2s;*/
}
@keyframes pic {
  0%   {left:-240px; top:20px;opacity:1;}
  20% {left:10px; top:20px;opacity:1;}
  98% {left:10px; top:20px;opacity:1;}
  100% {left:10px; top:20px;opacity:0;}
}

.picRzLogo {
position:absolute;
right:8px;
bottom:5px;
  width: 80px;
  height: 40px;
  opacity:0;
  z-index:2;
  background-color: none;
 animation: picRz 10s linear infinite normal;
  animation-fill-mode: forwards;
}


@keyframes picRz {
  0%  {right:8px; bottom:4px;opacity:0;}
  30% {right:8px; bottom:4px;opacity:0;}
  70% {right:8px; bottom:4px;opacity:1;}
  98% {right:8px; bottom:4px;opacity:1;}
  100% {right:8px;bottom:4px;opacity:0;}
}

.captionBig {
position:absolute;
left:160px;
top:15px;
  width: 200px;
  height: 50px;
  opacity:0;
  z-index:3;
  background-color: none;
 animation: captBg 10s linear infinite normal;
  animation-fill-mode: forwards;
}


@keyframes captBg {
  0%  {left:160px; top:15px;opacity:0;}
  30% {left:160px; top:15px;opacity:0;}
  70% {left:160px; top:15px;opacity:1;}
  98% {left:160px; top:15px;opacity:1;}
  100%{left:160px; top:15px;opacity:0;}
}
.fadeLn0 {
position:absolute;
font-size:12px;margin-top:2px;
left:170px;
top:45px;
  width: 150px;
  height: 20px;
  opacity:0;
  z-index:4;
  background-color: none;
 animation: fadeLn0 10s linear infinite normal;
  animation-fill-mode: forwards;
}


@keyframes fadeLn0 {
  0%  {left:170px; top:65px;opacity:0;}
  40% {left:170px; top:65px;opacity:0;}
  60% {left:170px; top:65px;opacity:1;}
  70% {left:170px; top:65px;opacity:1;}
  75% {left:170px; top:65px;opacity:0;}
  100%{left:170px; top:65px;opacity:0;}
}
.fadeLn1 {
position:absolute;
font-size:12px;margin-top:2px;
left:250px;
top:45px;
  width: 150px;
  height: 20px;
  opacity:0;
  z-index:5;
  background-color: none;
 animation: fadeLn1 10s linear infinite normal;
  animation-fill-mode: forwards;
}


@keyframes fadeLn1 {
  0%  {left:170px; top:65px;opacity:0;}
  40% {left:170px; top:65px;opacity:0;}
  60% {left:170px; top:65px;opacity:0;}
  70% {left:170px; top:65px;opacity:0;}
  75% {left:170px; top:65px;opacity:1;}
  85% {left:170px; top:65px;opacity:1;}
  90% {left:170px; top:65px;opacity:0;}
  100%{left:170px; top:65px;opacity:0;}
}
.fadeLn2 {
position:absolute;
font-size:12px;margin-top:2px;
left:170px;
top:45px;
  width: 150px;
  height: 20px;
  opacity:0;
  z-index:6;
  background-color: none;
 animation: fadeLn2 10s linear infinite normal;
  animation-fill-mode: forwards;
}


@keyframes fadeLn2 {
  0%  {left:170px; top:65px;opacity:0;}
  40% {left:170px; top:65px;opacity:0;}
  60% {left:170px; top:65px;opacity:0;}
  65% {left:170px; top:65px;opacity:0;}
  85% {left:170px; top:65px;opacity:0;}
  90% {left:170px; top:65px;opacity:1;}
  98% {left:170px; top:65px;opacity:0;}
  100%{left:170px; top:65px;opacity:0;}
}

}