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>

Баннер №4 (настраиваемая ширина)

<style>
    @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&family=Pacifico&display=swap');

    .ny-abcp-banner2-wrapper {
        width: 100%; /* ширина баннера, эту величину вы можете изменить, указывается в % или px */
    }

    .ny-abcp-banner2 {
        position: relative;
        width: 100%;
        padding-top: 38.3%;
    }

    .ny-abcp-banner2-inner {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: url("//f.nodacdn.net/403897") no-repeat center center;
        background-size: contain;
    }

    .ny-abcp-banner2-inner-main-text {
        width: 64%;
        height: 45%;
        font-family: 'Pacifico', cursive;
        display: flex;
        align-items: center;
        color: #701BA5;
        line-height: 0.9;
        position: absolute;
        top: 5%;
        left: 44.2%;
    }

    .ny-abcp-banner2-inner-flag-text {
        font-family: 'Pacifico', cursive;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        line-height: 1.2;
        text-align: center;
        position: absolute;
        left: 31%;
        top: 22%;
        width: 11%;
        height: 26%;
    }
    .ny-abcp-banner2-inner-bottom-text {
        font-family: 'Caveat', cursive;
        display: flex;
        align-items: center;
        text-align: right;
        line-height: 0.7;
        position: absolute;
        right: 40%;
        bottom: 3%;
        height: 32.5%;
        color: #701BA5;
    }
</style>
<script type="text/javascript">
    function setFontSize2() {
        var textContainer2 = $('.ny-abcp-banner2-inner-main-text');
        var flagContainer2 = $('.ny-abcp-banner2-inner-flag-text');
        var bottonContainer2 = $('.ny-abcp-banner2-inner-bottom-text');
        textContainer2.css('font-size', (textContainer2.height()/2) - 0.5);
        flagContainer2.css('font-size', (flagContainer2.height()/3.3));
        bottonContainer2.css('font-size', (bottonContainer2.height()/2.18));
    }

    $( document ).ready(function() {
        setFontSize2()
    });

    $( window ).resize(function() {
        setFontSize2()
    });
</script>

<div class="ny-abcp-banner2-wrapper">
    <div class="ny-abcp-banner2">
        <div class="ny-abcp-banner2-inner">
            <div class="ny-abcp-banner2-inner-flag-text">21-30<br>декабря</div>
            <div class="ny-abcp-banner2-inner-main-text">Новогодняя<br>акция</div>
            <div class="ny-abcp-banner2-inner-bottom-text">-25% на все<br>стеклоочистители<br>Bosch</div>
        </div>
    </div>
</div>

Баннер №5 (настраиваемая ширина)

<style>
    @import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@700&family=Pacifico&display=swap');

    .ny-abcp-banner3-wrapper {
        width: 100%; /* ширина баннера, эту величину вы можете изменить, указывается в % или px */
    }

    .ny-abcp-banner3 {
        position: relative;
        width: 100%;
        padding-top: 38.3%;
    }

    .ny-abcp-banner3-inner {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: url("//f.nodacdn.net/403898") no-repeat center center;
        background-size: contain;
    }

    .ny-abcp-banner3-inner-main-text {
        font-family: 'Pacifico', cursive;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        color: #ffffff;
        line-height: 1;
        position: absolute;
        top: 6.8%;
        left: 41.2%;
        width: 39%;
        height: 71%;
    }

    .ny-abcp-banner3-inner-flag-text-top {
        font-family: 'Montserrat Alternates', sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        line-height: 1.2;
        text-align: center;
        position: absolute;
        right: -1%;
        top: 32.6%;
        width: 20%;
        height: 13.7%;
        transform: rotate(-23deg);
    }
    .ny-abcp-banner3-inner-flag-text-bottom {
        font-family: 'Montserrat Alternates', sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        line-height: 1.2;
        text-align: center;
        position: absolute;
        right: -1%;
        top: 59.7%;
        width: 27%;
        height: 13.7%;
        transform: rotate(-23deg);
    }
</style>
<script type="text/javascript">
    function setFontSize3() {
        var textContainer3 = $('.ny-abcp-banner3-inner-main-text');
        var flagTopContainer3 = $('.ny-abcp-banner3-inner-flag-text-top');
        var flagBottomContainer3 = $('.ny-abcp-banner3-inner-flag-text-bottom');
        textContainer3.css('font-size', textContainer3.height()/3.18);
        flagTopContainer3.css('font-size', flagTopContainer3.height()/1.71);
        flagBottomContainer3.css('font-size', flagBottomContainer3.height()/1.71);
    }

    $( document ).ready(function() {
        setFontSize3()
    });

    $( window ).resize(function() {
        setFontSize3()
    });
</script>

<div class="ny-abcp-banner3-wrapper">
    <div class="ny-abcp-banner3">
        <div class="ny-abcp-banner3-inner">
            <div class="ny-abcp-banner3-inner-main-text">Подарки<br><span style="font-size: 71%; line-height: 1.5;">при заказе от<br>2021 руб.</span></div>
            <div class="ny-abcp-banner3-inner-flag-text-top">Автомаг</div>
            <div class="ny-abcp-banner3-inner-flag-text-bottom">работаем 24/7</div>
        </div>
    </div>
</div>