Красивый анимированный баннер с поздравлением или информацией

Друзья, хочу вам предложить создать красивое анимированное поздравление к любому празднику или нужному мероприятию. Я публиковала уже подобный вариант в статье красивое всплывающее окно к новогодним поздравлениям. Здесь принцип, практически тот же. Изменим положение картинки миниатюры в углу, которая должна обратить на себя внимание посетителей и немного помудрим со всплывающим, при нажатии на картинку, самим поздравлением. И добавим кнопку закрыть.

В качестве примера взяла Пасхальную тему. 

Попробуйте применить на своём блоге. Вариант отличный, на полупрозрачном цветном фоне, виден основной контент блога. Не навязчиво. Подойдёт даже для рекламных целей. 

Для наглядности скопируйте код целиком и установите в этом редакторе для просмотра.

<style>.kupat,.lebaran{position:fixed;top:0;z-index:9999}.kupat{left:0;width:80px;height:80px;cursor:pointer}.lebaran{width:100%;height:100%;left:0;background-color:rgba(9,100,13,.8);background-image:url(https://img-fotki.yandex.ru/get/9802/56195015.28a/0_cd68c_88ce7b52_XL.png);background-position:10% 50%;background-repeat:no-repeat;background-size:auto;display:none;flex-direction:column;align-items:center;justify-content:center}.lebaran blockquote{font-weight:700;font-size:1.6rem;font-family:Arial;color:#fff;width:60%;max-width:800px;line-height:1.4;margin:0;padding:.5rem;position:relative;text-align:center}.lebaran blockquote:after,.lebaran blockquote:before{position:absolute;color:#f1efe6;font-size:8rem;width:4rem;height:4rem;opacity:.5}.lebaran blockquote:before{content:'“';left:-3rem;top:-2rem}.lebaran blockquote:after{content:'”';left:-3rem;bottom:1rem}.lebaran cite{line-height:3;text-align:left;color:#fff}.tutup-lebaran{position:absolute;top:20px;left:20px;cursor:pointer}.goyang{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;animation:goyang 1s linear infinite}@-webkit-keyframes goyang{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}@keyframes goyang{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}.muncul{-webkit-animation-name:muncul;animation-name:muncul;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes muncul{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes muncul{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@media screen and (max-width:425px){.lebaran blockquote{font-size:1rem}.lebaran blockquote:after,.lebaran blockquote:before{font-size:6rem;width:2rem;height:2rem}}

</style>

<div class='kupat goyang' id='kupat' onclick='document.getElementById(&#39;lebaran&#39;).style.display=&#39;flex&#39;;kupat.style.display=&#39;none&#39;;'>

<picture>

<source srcset='https://img-fotki.yandex.ru/get/5640/137293384.71/0_9c4a6_2ea62e66_S.jpg' type='image/webp'></source>

<source srcset='https://img-fotki.yandex.ru/get/5640/137293384.71/0_9c4a6_2ea62e66_S.jpg' type='image/png'></source>

<img alt='kupat' height='80' src='https://img-fotki.yandex.ru/get/5640/137293384.71/0_9c4a6_2ea62e66_S.jpg' title='Пасха' width='80'/>

</picture>

</div>

<div class='lebaran muncul' id='lebaran'>

<blockquote>

С Пасхой вас! Христос воскрес!

Благодати вам с небес.

В доме будет пусть добро,

Счастье, радость и тепло.

</blockquote>

<cite>Ваша Вика Барадi</cite>

<span class='tutup-lebaran' onclick='document.getElementById(&#39;lebaran&#39;).style.display=&#39;none&#39;;kupat.style.display=&#39;block&#39;;'><svg height='24px' viewBox='0 0 24 24' width='24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='#ffffff'></path></svg></span>

</div>

Давайте немного разберём настройки. Они не сложные, справимся легко. 

Первая картинка, адрес которой выделен розовым, это картинка расположенная слева во всплывающем окне.

Всё, что синим цветом - адрес картинки в углу блога. 

Фон всплывающего окна задан зелёным цветом background-color:rgba(9,100,13,.8); в формате rgba. Можно заменить на желаемый. Все цвета можно найти в поиске. 

Мы расположили миниатюру в левом углу блога. Можно установить в правом, заменив все значения left (6 раз) на right. Будьте внимательны ко всем символам в коде. 

Весь текст в тегах <blockquote> и <cite> меняйте на свой.

Код устанавливаем в гаджет HTML/JavaScript в любом месте макета блога. Только запомните куда вы его установили. В любой момент можно убрать и установить снова, когда понадобится.

Вот и всё. Думаю пригодится. Что не понятно пишите в комментариях. Разберёмся.

Спасибо всем за внимание к моим шпаргалкам и до встречи.

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email