Открыть главное меню
ABCP Documentation

NewYear Banners: различия между версиями

Статья Обсуждение
Строка 155: Строка 155:
 
</a>
 
</a>
 
</pre>
 
</pre>
 +
<br>
 +
 +
==Баннер №3 (настраиваемая ширина)==
 +
[[Файл:ny_banner_3.png|альт=]]
 +
<pre style="font-size:10px;">
 +
<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/403646") no-repeat center center;
 +
        background-size: contain;
 +
    }
 +
 +
    .ny-abcp-banner-inner-main-text {
 +
        width: 25%;
 +
        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: 31.3%;
 +
    }
 +
 +
    .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>
 +
</pre>
 +
<br>

Версия 10:52, 2 декабря 2020

Новогодние настраиваемые баннеры

Баннер №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/403646") no-repeat center center;
        background-size: contain;
    }

    .ny-abcp-banner-inner-main-text {
        width: 25%;
        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: 31.3%;
    }

    .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>


Источник — https://www.abcp.ru/w/index.php?title=NewYear_Banners&oldid=11001