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

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

Баннер с информацией



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

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


<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


13 комментариев:

  1. Привет, Вика! Огромный респект Вашему мужу, и дай ему Бог за его тяжелейший труд. Сам распробовал, больше не хочу... Хотя, когда стоишь у операционного стола, никогда не отпускает мысль: " А вдруг, он (или она) не выйдет из наркоза!?" Тоже не приведи Господь!
    На Ваши вопросы о бруках и т. д. я ответил в том же моём нынешнем посте.

    ОтветитьУдалить
  2. Семён, сыну респект.

    ОтветитьУдалить
  3. Вика, привет. Ну очень даже понравился вариант. Посмотрела в редакторе. Отлично! Как-нибудь к празднику... Спасибочки!

    ОтветитьУдалить
  4. Люба, привет. Помудри с картинками, очень хочется посмотреть что у тебя получиться. Вообще не раздражающий баннер. Для любопытных подарочек просто.

    ОтветитьУдалить
  5. Ответы
    1. EDELMAN.UKRAINE, привет. Забирай , очень приятно.

      Удалить
  6. Интересно, Виктория, но не знаю...

    ОтветитьУдалить
  7. А что, хорошее дело. Существует традиция украшать блог на праздник. Собираю такие решения)))

    ОтветитьУдалить
    Ответы

    1. Light Knight, спасибо. Один из моих Самых постоянных и верны=х, лояльных читателей. Для меня это самое важное. СПАСИБО.

      Удалить
  8. Вика,привет,как это я проморгала,очень люблю такие плюшки,а что нужно поменять в коде,чтобы маленькая картинка была не вверху,а внизу?Вот как здесь у тебя
    http://www.shpargalochki.ru/2017/12/originalnoe-vsplyvayushee-okno-k-novomu-godu-blogger.html

    ОтветитьУдалить
  9. Infodar, менять нужно практически всё. Смысла не вижу. Установить тот , что по ссылке и делов - то.

    ОтветитьУдалить
  10. да,уже сделала,мне нравится очень,да и для картинки внизу тоже нашла код в инете

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML