NewYear Banners
Содержание
Новогодние настраиваемые баннеры
Баннер №1 (на всю страницу, анимированный снег)
<style>
@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap');
.new-year-banner_wide2,.new-year-banner_wide2 * {box-sizing: border-box;}.new-year-banner_wide2 {overflow: hidden;position: relative;width: 100%;display: flex;align-items: center;justify-content: space-between;box-shadow: inset 0 0 0 2px #fff;text-decoration: none;
font-family: 'Balsamiq Sans', cursive; /* шрифт */
border: 2px dashed rgba(255, 255, 255, 0.8); /* рамка */
background: #FF4747; /* цвет фона */
color: #fff !important; /* цвет текста */
height: 70px; /* высота баннера */
}
.new-year-banner_wide2__text {width: calc(50% - 90px);padding: 15px;text-align: center;line-height: 0.9;}
.new-year-banner_wide2__window {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 180px;
height: 120px;
border-radius: 50%;
background-color: #BDD6FD; /* фон "окошка" по середине баннера */
background-image: url("//f.nodacdn.net/402660"); /* картинка ёлки, можно вставить любое изображение */
background-position: center center;
background-repeat: no-repeat;
background-size: auto 40%;
}
.new-year-banner_wide2__window:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
background-image: radial-gradient(circle at 30% 30%, #fff 1.5%, transparent 2.5%), radial-gradient(circle at 80% 70%, #fff 1.5%, transparent 2.5%), radial-gradient(circle at 30% 50%, #fff 1%, transparent 2%), radial-gradient(circle at 70% 85%, #fff 1%, transparent 2%);
background-size: 100% 100%, 100% 100%, 50% 100%, 50% 50%;
background-position: 0 0, 0 0, 0 0, 0 0;
-webkit-animation: snow_wide 4s linear infinite forwards;
animation: snow_wide 4s linear infinite forwards;
}
@media (max-width: 767px) {
.new-year-banner_wide2__window {
width: 55px;
}
.new-year-banner_wide2__text {
width: calc(50% - 20px);
padding: 11px;
line-height: 1;
font-size: 12px !important;
}
}
@-webkit-keyframes snow_wide {
100% {
background-position: 0 120px, 0 120px, 0 120px, 0 120px;
}
}
@keyframes snow_wide {
100% {
background-position: 0 120px, 0 120px, 0 120px, 0 120px;
}
}
</style>
<a href="#" class="new-year-banner_wide2">
<span class="new-year-banner_wide2__text" style="font-size: 24px;">Счастливого Нового Года и Рождества!</span>
<span class="new-year-banner_wide2__window"></span>
<span class="new-year-banner_wide2__text" style="font-size: 24px;">Дарим подарки с 25.12 по 07.01</span>
</a>
Баннер №2 (на всю страницу, анимированный снег)
<style>
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap');
.new-year-banner_wide, .new-year-banner_wide * { box-sizing: border-box; }
.new-year-banner_wide {overflow: hidden;position: relative;width: 100%;display: flex;align-items: center;justify-content: space-between;text-decoration: none;box-shadow: inset 0 0 0 2px #fff;
height: 70px; /* высота баннера */
color: #fff !important; /* цвет текста */
font-family: 'Caveat', cursive; /* шрифт */
background: #13b5ea; /* цвет фона */
border: 2px dashed rgba(255, 255, 255, 0.8); /* рамка */
}
.new-year-banner_wide__text {
width: calc(50% - 90px);
padding: 15px;
text-align: center;
line-height: 0.9;
}
.new-year-banner_wide__window {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 180px;
height: 120px;
border-radius: 50%;
background-color: #B0EBFE;
background-image: url("//f.nodacdn.net/402660");
background-position: center center;
background-repeat: no-repeat;
background-size: auto 40%;
}
.new-year-banner_wide__window:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
background-image: radial-gradient(circle at 30% 30%, #fff 1.5%, transparent 2.5%), radial-gradient(circle at 80% 70%, #fff 1.5%, transparent 2.5%), radial-gradient(circle at 30% 50%, #fff 1%, transparent 2%), radial-gradient(circle at 70% 85%, #fff 1%, transparent 2%);
background-size: 100% 100%, 100% 100%, 50% 100%, 50% 50%;
background-position: 0 0, 0 0, 0 0, 0 0;
-webkit-animation: snow_wide 4s linear infinite forwards;
animation: snow_wide 4s linear infinite forwards;
}
@media (max-width: 767px) {
.new-year-banner_wide__window {
width: 55px;
}
.new-year-banner_wide__text {
width: calc(50% - 20px);
padding: 11px;
line-height: 1;
font-size: 18px !important;
}
}
@-webkit-keyframes snow_wide {
100% {
background-position: 0 120px, 0 120px, 0 120px, 0 120px;
}
}
@keyframes snow_wide {
100% {
background-position: 0 120px, 0 120px, 0 120px, 0 120px;
}
}
</style>
<a href="#" class="new-year-banner_wide">
<span class="new-year-banner_wide__text" style="font-size: 28px;">Счастливого Нового Года и Рождества!</span>
<span class="new-year-banner_wide__window"></span>
<span class="new-year-banner_wide__text" style="font-size: 28px;">Дарим подарки с 25.12 по 07.01</span>
</a>
Баннер №3 (настраиваемая ширина)
<style>
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');
.ny-abcp-banner-wrapper {
width: 100%; /* ширина баннера, эту величину вы можете изменить, указывается в % или px */
}
.ny-abcp-banner {
position: relative;
width: 100%;
padding-top: 38.3%;
}
.ny-abcp-banner-inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url("//f.nodacdn.net/403896") no-repeat center center;
background-size: contain;
}
.ny-abcp-banner-inner-main-text {
width: 35%;
height: 60%;
font-family: 'Amatic SC', cursive;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color: #FF7200;
line-height: 1;
position: absolute;
top: 14%;
left: 26.2%;
}
.ny-abcp-banner-inner-baloon-text {
font-family: 'Caveat', cursive;
display: flex;
align-items: center;
justify-content: center;
color: #681B86;
transform: rotate(-21deg);
font-size: 37px;
line-height: 0.7;
text-align: center;
width: 20%;
position: absolute;
right: 16%;
top: 11%;
height: 17%;
}
</style>
<script type="text/javascript">
function setFontSize() {
var textContainer = $('.ny-abcp-banner-inner-main-text');
var baloonContainer = $('.ny-abcp-banner-inner-baloon-text');
var textContainerFontSize = (textContainer.height()/2) - 5.5;
var baloonContainerFontSize = (baloonContainer.height()/2) - 0.5;
textContainer.css('font-size', textContainerFontSize);
baloonContainer.css('font-size', baloonContainerFontSize);
}
$( document ).ready(function() {
setFontSize()
});
$( window ).resize(function() {
setFontSize()
});
</script>
<div class="ny-abcp-banner-wrapper">
<div class="ny-abcp-banner">
<div class="ny-abcp-banner-inner">
<div class="ny-abcp-banner-inner-main-text">до 20%<br>скидки</div>
<div class="ny-abcp-banner-inner-baloon-text">новогодняя<br>распродажа<br>аккумуляторов!</div>
</div>
</div>
</div>