Оригинальное всплывающее окно к Новому году Blogger

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

всплывающее окно

Трансформация в стилях CSS и полупрозрачный фон задаст тоже некую красоту всей конструкции. И поскольку скоро Новый год, я пока не придумала ничего лучше, как оформить это в качестве Новогоднего поздравления. А вообще использовать такое можно для любых нужд.

Давайте уже смотреть, что у меня получилось. Яркая кнопка в левом нижнем углу на тестовом блоге. Настройки разберём ниже.


Скопируйте сначала весь код и внесите свои изменения.

<style>
/*<![CDATA[*/
.tada{-webkit-animation:tada 1s linear 1s infinite normal;animation:tada 1s linear 1s infinite normal}
@-webkit-keyframes tada{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
}
@keyframes tada{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
}
.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}
@keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}
.idul_layout{text-align:center;position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(9,150,13,.8);z-index:99999;display:none}
.idul_message{width:50%;background:#fff;font-size:16px;border-radius:5px;padding:20px;border:1px solid transparent;text-align:center;color:#FF0000;position:absolute;top:10%;left:50%;margin-left:-25%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}l
.profile-idul,.profile-idul2{padding:4px}
.idul_message:before{content:"";height:0;width:0;position:absolute;bottom:-40px;left:20px;border:20px solid transparent;border-color:#fff transparent transparent}
.profile-idul{background:#0c9f17;border:1px solid transparent;border-radius:100%;position:fixed;bottom:10px;left:10px;cursor:pointer;width:50px;height:50px;z-index:9999}
.profile-idul2{background:#fff;border:1px solid transparent;border-radius:100%;position:absolute;bottom:-240px;left:-120px;width:200px;height:200px}
.close_idul{font-size:12px;color:#E0FFFF
;position:absolute;top:-35px;right:-35px;cursor:pointer}
@media (max-width:800px){.idul_message{width:90%!important;margin-left:-45%!important;}
.profile-idul2{left:50%;margin-left:-105px;}
.idul_message:before{left:50%;margin-left:-20px;}
.close_idul{color:#555;top:-16px;right:0;}
}
/*]]>*/
</style>

<img class='profile-idul tada' onclick='openIdulfitri()' expr:alt='data:post.author' height='50' src='http://www.kid.ru/forummam9/08d1ac21623c032c8b94599c8b1cf30d.gif' width='50' title="Нажми здесь!"/>
<div class="idul_layout animated flip" id="id_fitri">
  <div class="idul_message">
    <h2>"Дороги друзья, подписчики и гости блога"</h2>
    <p>От всего сердца поздравляю вас с Новым 2018 годом.
      <br/><br/> Пусть в вашем доме будет радость и счастье. Добра и мира вашему дому <b />Спасибо за то что мы вместе<b>УРА!!!</b>
      <br/>
<img src='http://novymgodom.ru/_ph/23/2/549759756.png' width='200' />
      </b></p><br />
    <img class='profile-idul2' expr:alt='data:post.author' height='200' src='http://www.kid.ru/forummam9/08d1ac21623c032c8b94599c8b1cf30d.gif' width='200' />
    <div class="close_idul" onclick='closeIdulfitri()'>закрыть</div>
  </div>
</div>
<script>
//<![CDATA[
function openIdulfitri(){var e=document.getElementById("id_fitri");"block"!==e.style.display?e.style.display="block":e.style.display="none"};
function closeIdulfitri(){var e=document.getElementById("id_fitri");"none"!==e.style.display?e.style.display="none":e.style.display="block"};
//]]>
</script>


От строки <div class="idul_message"> до строки <div class="close_idul" onclick='closeIdulfitri()'>закрыть</div> можно вставлять что угодно. Разместить любую информацию, картинки, формы подписки, текст, галереи.

Сейчас немного с настройками цвета. Основной полупрозрачный фон задали в формате rgba. Можно поменять на своё.

Немного для понимания.Если вы сейчас перейдёте к этой таблице цветов, то увидите что все цвета в формате R G B и все они имеют трёхзначное значение. Цвета RGBA схоже со стандартными правилами RGB, но мы должны задать дополнительное десятичное значение прозрачности после значения цвета в промежутке от 0.0 (полная прозрачность) до 1 (полная непрозрачность).

У меня в коде зелёный цвет background:rgba(9,150,13,.8). То есть первые 3 цифры в формате R G B и последняя это значение прозрачности. Будьте внимательны при смене ко всем символам. Если вам не нужна полупрозрачность, просто вставляйте трёхзначные значения R G B.

Как смогла объяснила, но думаю, что суть понятна. обещаю написать позже подробнее про это.

С фоном разобрались. Сейчас нужно подобрать картинку в формате PNG, которая будет отображаться в углу блога и при открытии окна. В двух местах - 1 маленькая и 2 большая. Можно большую вообще убрать или установить другую.

http://www.kid.ru/forummam9/08d1ac21623c032c8b94599c8b1cf30d.gif

Жёлтым цветом я отметила своё изображение
, которое отражено в поздравлении. Можете убрать совсем тоже, если не предполагается картинка или поменять на своё. И весь текст, отмеченный зелёным это уже ваше дело.

Готовый код вставляйте обычным способом в гаджет HTML/JavaScript в любом месте макета блога. Всегда легко можно удалить или поменять что - то.

Если решите применить у себя такое интересное всплывающее окно, напишите пожалуйста в комментариях. Хочется посмотреть, как вы решили реализовать такую идею. И если возникнут вопросы по дизайну, обращайтесь.
✻✻✻
И ещё сделала подборку Новогодних украшений для блога, которые публиковала у себя раньше. Чтобы не бегать и не искать делюсь с вами. Ссылки, во избежании спама, не кликабельные. Скопируйте и установите любую в строку браузера.


Новогодний таймер отсчёта времени
http://www.shpargalochki.ru/2015/12/Novogodnij-tajmer-otschjota-vremen.html 

Красивый новогодний пейзаж для блога
http://www.shpargalochki.ru/2014/12/novogodnij-pejzazh-v-bloge.html

Новогодние идеи для блога
http://www.shpargalochki.ru/2016/12/novogodnie-ukrashenija-bloga.html

Новогодние украшения для блога
http://www.shpargalochki.ru/2014/11/novogodnie-ukrashenija-dlja-bloga.html

И опять про Новый год
http://www.shpargalochki.ru/2014/12/novogodnie-ukrashenija-bloga.html


✻✻✻

Для просмотра следующих вариантов, скопируйте код и просмотрите на этой странице результат.

Целующиеся справа снеговики 

<div style="position:absolute; right:0%; top:-20px;"><img src="http://mynew-year.ru/Animation/Snegoviki.gif" border="0" /></div>

Шарики 

 <div style="position:absolute; top:0; right:0;">
  <img border="0" src="http://pro-fi.at.ua/neydalat/shapka.gif" align="right">
  </div>

Красива надпись  красная

<img src="http://i44.servimg.com/u/f44/16/54/26/99/3010.png" alt="C Новым годом" title="C Новым годом" border="0" height="87px" width="440px" />

Голубая надпись

<img src="http://i44.servimg.com/u/f44/16/54/26/99/36-cop11.png" alt="C Новым годом" title="C Новым годом" border="0" height="156" width="300" />

Ветка слева в углу 

<div style="position:absolute; right:70%; top:-90px;"><img src="http://img-fotki.yandex.ru/get/5313/111874181.a4/0_94e0f_86e3ab9c_XL" border="0" /></div>

 Можно на эту ветку ещё игрушек добавить подставьте код рядом

 <div style="position:absolute; right:70%; top:-90px;"><img src="http://img-fotki.yandex.ru/get/6616/136487634.775/0_b4aba_42fa64c8_XL.jpg" border="0" /></div>

Во всех кодах можно поменять картинку, заменив лишь её адрес

<img src="http://img-fotki.yandex.ru/get/6616/136487634.775/0_b4aba_42fa64c8_XL.jpg"

Гирлянда


<style type="text/css">
#garland {position:absolute;top:0;left:0;background-image:url('https://i13.servimg.com/u/f13/14/80/95/87/christ10.png');height:36px;width:100%;overflow:hidden;z-index:99}
#nums_1 {padding:100px}
.garland_1 {background-position: 0 0}
.garland_2 {background-position: 0 -36px}
.garland_3 {background-position: 0 -72px}
.garland_4 {background-position: 0 -108px}
</style>  <div id="garland" class="garland_4"><div id="nums_1">1</div></div>

<script type="text/javascript">
function garland() {
nums = document.getElementById('nums_1').innerHTML
if(nums == 1) {document.getElementById('garland').className='garland_1';document.getElementById('nums_1').innerHTML='2'}
if(nums == 2) {document.getElementById('garland').className='garland_2';document.getElementById('nums_1').innerHTML='3'}
if(nums == 3) {document.getElementById('garland').className='garland_3';document.getElementById('nums_1').innerHTML='4'}
if(nums == 4) {document.getElementById('garland').className='garland_4';document.getElementById('nums_1').innerHTML='1'}
}

setInterval(function(){garland()}, 400) 

</script>


Регулируйте частоту мерцания лампочек, меняя значения 400. Код вставляем в гаджет HTML/JavaScript.

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

Всем спасибо за внимание и до новых встреч.


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

Введите Ваш email


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

  1. Спасибо, Виктория! Сейчас все украшают свои блоги к Новому году!

    ОтветитьУдалить
  2. Да, пора уже. У многих уже видела. Сама не знаю на чём выбор остановить

    ОтветитьУдалить
  3. Примеряла себе украшения, классно смотрятся! И настроение праздничное сразу задают. Снеговики очаровательные :)

    ОтветитьУдалить
  4. Наташа, конечно, ближе к празднику настроение другое. магазины и улицы уже украшают. А тут увидела что и на блогах некоторые уже понавешали украшалок.

    ОтветитьУдалить
  5. И тебе всего хорошего в наступающем году! Пойду что ли хоть фон сменю.)

    ОтветитьУдалить
    Ответы
    1. Ой, Олеся. Сколько лет сколько зим. Спасибо. Вас успею ещё поздравить.

      Удалить
  6. Круто украсила свой блог Спасибо Вам)))

    ОтветитьУдалить
  7. Сбегала к Вам за Новогодним настроением. Красота.

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

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

Пользовательский поиск