Анимированный персонаж для сайта на css3 + jquery для DLE

Решил поделится пошаговой и максимально подробной инструкцией о том, как создать анимированого персонажа у себя на сайте.

В конце у него будет 3 состояния и он будет уметь говорить с посетителем.

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

1 Из чего состоит наш персонаж

Он состоит из 4-ох картинок. Я специально их не делал одним спрайтом для удобства редактирования.

 

m

Можете сразу их скачивать и загружать в папку images в вашем шаблоне.

2 В файл стилей добавить в конце:

.info_center {
	position: fixed;
	right: 30px;
	bottom: 40px;
	z-index: 10;
}
.monster_wrape {
	z-index: 10;
	position:absolute;
	height: 77px;
	width: 52px;
	font-family: "Arial";
	right: 0px;
	bottom: 0px;
}
.monster_dialog {
	width: 260px;
	  position: absolute;
	    left: -245px;
    bottom: 100px;
	  width: 300px;
  z-index: 11;
	padding-bottom:20px;
}


.md_massage {
	background: #c7cbd0;
	-o-border-radius: 5px;	
	  -moz-border-radius: 5px;
	  font-size: 14px;
	  -ms-border-radius: 5px;	
	  -webkit-border-radius: 5px;	
	  border-radius: 5px;	
	  color: #000;
	  display: none;
	  margin-top: 10px;
	  padding: 13px;
	  padding-right: 27px;
	  position: relative;
	  border: 2px #a8b3c1 solid;
}

.md_massage:after, .md_massage:before {
	right:30px;
	top: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.md_massage:after {
	border-color: rgba(136, 183, 213, 0);
	border-top-color: #c7cbd0;
	border-width: 15px;
	margin-right: -15px;
}
.md_massage:before {
	border-color: rgba(194, 225, 245, 0);
	border-top-color: #a8b3c1;
	border-width: 18px;
	margin-right: -18px;
}

.md_massage_close {
	content: '';
	display: block;
	position: absolute;
	background: url("../images/dialog_close.png") 0 0;
	width: 15px;
	height: 15px;
	top: 13px;
	right: 13px;
	cursor: pointer;
}
.dbi_social {
	float: left;
	margin-right: 5px;
}
.dbi_title {
	margin-bottom: 10px;
}
.ms_c_buttons_box {
	padding-top: 10px;
}
.ms_c_buttons_box::after {
	clear: both;
	content: '';
	display: block;
}
.ms_c_button {
	display: block;
	float: left;
	height: 35px;
	padding: 0 15px;
	font-weight: bold;
	margin-right:5px;
	-ms-border-radius: 3px;	
	  -webkit-border-radius: 3px;	
	  border-radius: 3px;	
	  color: #fff;
	line-height: 35px;
	opacity: 1;
	 -moz-transition: all .2s ease-in-out;
	  -webkit-transition: all .2s ease-in-out;
	  transition: all .2s ease-in-out;
}
.ms_c_button.rad {
	background: #de5151;
}
.ms_c_button.green {
	background: #71aa74;
}
.ms_c_button.gray {
	background: #353b49;
}
.ms_c_button:hover {
	opacity: 0.7;
	color: #fff;
}


.monster_bottom {
	background: url("../images/monster_bt.png") repeat-x;
	animation: monbottom 0.8s linear; 
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
	position: absolute;
	top: 62px;
  width: 52px;
  height: 6px;
  left: 0px;
}
.monster_mouth {
	width: 19px;
	height: 3px;
	top: 45px;
	left: 18px;
	-o-border-radius: 2px;	
	  -moz-border-radius: 2px;
	  -ms-border-radius: 2px;	
	  -webkit-border-radius: 2px;	
	  border-radius: 2px;	
	position: absolute;
	background: #fff;
}



.monster_box {
	background: url("../images/monster_bg.png");
	width: 52px;
	height: 63px;
	bottom: 0;
	left: 0;
	cursor: pointer;
	position: absolute;
}
.mb_ear {
	width: 29px;
	height: 20px;
	top: -4px;
	position: absolute;
	 -ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
    transform: rotate(0deg);
    
}
.mb_ear_l {
	background: url("../images/monster_ear_l.png");
	  left: -13px;
	  animation: earl 0.9s; 
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
}
.mb_ear_r {
	right: -13px;
	background: url("../images/monster_ear_r.png");
	animation: earr 0.9s; 
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
}
.mb_eay {
	background: #4caf50;
	width: 10px;
	height: 10px;
	position: absolute;
	-o-border-radius: 100%;
	  -moz-border-radius: 100%;
	  -ms-border-radius: 100%;
	  -webkit-border-radius: 100%;
	  border-radius: 100%;	
}
.mb_eay_l {
	animation: eay 0.5s; 
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
	    top: 25px;
    left: 10px;
}
.mb_eay_c {
	animation: eaytop 0.5s; 
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
	    top: 11px;
    left: 21px;
}
.mb_eay_r {
	animation: eay 0.5s; 
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
	    top: 25px;
    right: 8px;
}

/* =========== настроения =========== */

/*bisy*/
.monster_box.emotions_bisy  {
	animation: emoanimbisy 0.2s linear; 
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
}


.monster_box.emotions_bisy .monster_mouth {
	width: 11px;
	height: 11px;
	top: 46px;
	left: 22px;
	background: transparent;
	border-top: 8px solid #fff;
    border-radius: 100%;
}

/*smile*/
.monster_box.emotions_smile  {
	animation: emoanimsmile 0.2s linear; 
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
}

.monster_box.emotions_smile .monster_mouth {
	width: 11px;
	height: 11px;
	top: 36px;
	left: 22px;
	background: transparent;
	border-bottom: 8px solid #fff;
    border-radius: 100%;
}

/*fear*/
.monster_box.emotions_fear  {
	animation: emoanimfear 0.2s linear; 
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
}
@keyframes emoanimfear {
	from { left: 0px; }
	to { left: 10px; }
}
.monster_box.emotions_fear .monster_mouth {
	width: 11px;
	height: 11px;
	top: 46px;
	left: 22px;
	-o-border-radius: 100%;	
	  -moz-border-radius: 100%;	
	  -ms-border-radius: 100%;		
	  -webkit-border-radius: 100%;		
	  border-radius: 100%;	
}

/* =========== анимация =========== */
@keyframes dibox {
 from {
 opacity: 0;
 }
 to {
 opacity: 1;
 }
}
@keyframes monbottom {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}

@keyframes monstershow {
0%{
-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}
60%{
-webkit-transform:skewX(20deg);
transform:skewX(20deg);
opacity:1
}
80%{
-webkit-transform:skewX(-5deg);
transform:skewX(-5deg);
opacity:1
}
100%{
-webkit-transform:none;
transform:none;
opacity:1
}
}
@keyframes monster {
  from {
  bottom: 0px;
  }
  to {
   bottom: 10px;
  }
}
@keyframes earl {
  from {
   transform: rotate(0deg);
  }
  to {
   transform: rotate(50deg);
  }
}
@keyframes earr {
  from {
   transform: rotate(0deg);
  }
  to {
   transform: rotate(-50deg);
  }
}
@keyframes eay {
  from {
    height: 10px;
    top: 25px;
  }
  to {
   height: 1px;
   top: 29px;
  }
}
@keyframes eaytop {
  from {
    height: 10px;
    top: 11px;
  }
  to {
   height: 1px;
   top: 15px;
  }
}

Не много объясню по стилям. Вся анимация монстра сделана на CSS3. jqyery используется только для добавления класса настроения при нужном событии, а в css просто стоит, что при добавлении класса name применять такие стили.

Что бы создать новое настроение надо писать анимации и стили для класса с именем emotions_name где name это имя эмоции которое вы зададите в атрибуте data

Вот часть стилей которая отвечает за настроение с именем smile. Больше за настроение ничего не отвечает.

/*smile*/
.monster_box.emotions_smile  {
	animation: emoanimsmile 0.2s linear; 
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
}

.monster_box.emotions_smile .monster_mouth {
	width: 11px;
	height: 11px;
	top: 36px;
	left: 22px;
	background: transparent;
	border-bottom: 8px solid #fff;
    border-radius: 100%;
}

Буду рад если Вы будете делится новыми настроениями в комментариях.

3 HTML код персонажа:

Можно добавить в main.tpl перед </head>

<div class="info_center">
  <div class="monster_wrape">
    <div class="monster_dialog">
      <!-- сообщение -->
        <div class="md_massage" data-delay="324">
          <div class="md_massage_close"></div>
          Вы хотете создать учетную запись?
          <!-- кнопки -->
            <div class="ms_c_buttons_box">
              <a href="#" class="ms_c_button green" data-emotions="bisy">
                Да
              </a>
              <a href="#" class="ms_c_button rad" data-emotions="smile">
                Нет          
              </a>
              <a href="#" class="ms_c_button gray" data-emotions="fear">
                Не знаю        
              </a>
            </div>
          <!-- /кнопки -->
        </div>
      <!-- /сообщение -->
    </div>
    <div class="monster_box">
      <div class="mb_ear mb_ear_l"></div>
      <div class="mb_ear mb_ear_r"></div>
      <div class="mb_eay mb_eay_l"></div>
      <div class="mb_eay mb_eay_c"></div>
      <div class="mb_eay mb_eay_r"></div>
      <div class="monster_bottom"></div>
      <div class="monster_mouth"></div>
      <!-- -->
    </div>
  </div>
</div>

Отдельно стоит разобрать код сообщения монстра

<!-- сообщение -->
        <div class="md_massage" data-delay="324">
          <div class="md_massage_close"></div>
          Вы хотете создать учетную запись?
          <!-- кнопки -->
            <div class="ms_c_buttons_box">
              <a href="#" class="ms_c_button green" data-emotions="bisy">
                Да
              </a>
              <a href="#" class="ms_c_button rad" data-emotions="smile">
                Нет          
              </a>
              <a href="#" class="ms_c_button gray" data-emotions="fear">
                Не знаю        
              </a>
            </div>
          <!-- /кнопки -->
        </div>
      <!-- /сообщение -->

ему можно применить 3 настройки

  • data-delay=»324″ — время появления в милисек
  • data-close=»325″ — время исчезновения в милисек

Атрибут

  • data-emotions=»bisy» — состояние монстра

который можно применить к конкретной кнопке в диалоге. Например если на вести на «Да» то он улыбается, а если на «Нет» то злится и «Не знаю» боится)

4 JS код персонажа:

Перед </head> вставляем код:

 <script type="text/javascript">
(function($) {
$(function() {
/* ============= smile monster ============= */
   $('.md_massage').each(function() { //сообщения
      var md_delay = $(this).data('delay');
      var md_close = $(this).data('close');

      if (md_delay != undefined && md_delay != '') { // если задано ожидание
        $(this).delay(md_delay).fadeIn();
      } else {
        $(this).fadeIn();
      }

      if (md_close != undefined && md_close != '') { // если задано время закрытия
        $(this).delay(md_close).fadeOut();
      }

   });
   $('.ms_c_button').hover(function() { //кнопка
      var emotions = $(this).data('emotions');
      $('.monster_box').toggleClass('emotions_' + emotions);
   });
   $(".md_massage_close").click(function(){// закрытие
      $('.md_massage').fadeOut();
   });
})
})(jQuery)
</script>

Тут ничего не обычного и ничего настраивать не надо

P.S.: Если вы не хотите показывать сообщение гостям то получится примерно так

<div class="info_center">
  <div class="monster_wrape">
[group=5]
    <div class="monster_dialog">
      <!-- сообщение -->
        <div class="md_massage" data-delay="324">
          <div class="md_massage_close"></div>
          Вы хотете создать учетную запись?
          <!-- кнопки -->
            <div class="ms_c_buttons_box">
              <a href="#" class="ms_c_button green" data-emotions="bisy">
                Да
              </a>
              <a href="#" class="ms_c_button rad" data-emotions="smile">
                Нет          
              </a>
              <a href="#" class="ms_c_button gray" data-emotions="fear">
                Не знаю        
              </a>
            </div>
          <!-- /кнопки -->
        </div>
      <!-- /сообщение -->
    </div>
[/group]
 <div class="monster_box">
    <div class="monster_box">
      <div class="mb_ear mb_ear_l"></div>
      <div class="mb_ear mb_ear_r"></div>
      <div class="mb_eay mb_eay_l"></div>
      <div class="mb_eay mb_eay_c"></div>
      <div class="mb_eay mb_eay_r"></div>
      <div class="monster_bottom"></div>
      <div class="monster_mouth"></div>
      <!-- -->
    </div>
  </div>
</div>

Буду рад если будете делится новыми эмоциями монстра в комментариях 🙂

P.S.: Буду благодарен если при копировании статьи будете указывать автора mexalim то есть меня 🙂

Понравилась статья? Ставь лайк.

Похожие материалы

Обсуждения

Оставьте свой Email И мы обсудим Вашу идею
*P.S.:Не работаю с бюджетами менее чем 600$