10

Зашел случайно на сайт animejs

Очень понравились hover эффект их основных кнопок везде искал но подобного эффекта не нашел даже у них на сайте подобного нету

.btn {
    width:100px;
    height:40px;
    
    text-align:center;
    padding:5px;
    line-height:2.3;
    border:1px solid red;
}
<div class="btn">button</div>

До эффекта введите сюда описание изображения После введите сюда описание изображения

8
  • 3
    Вычисляет и изменяет элемент svgpath. Конкретная формула явно где-то в исходниках, но искать мне лень. Хотя не очень лень: animejs.com/documentation/assets/js/site.js Сразу же инициализация кнопок.
    – user207618
    18 мая 2018 в 14:27
  • @Other спасибо :D благодарья вам я сам дам ответ:)
    – Randall
    18 мая 2018 в 14:32
  • Пожалуйста!....
    – user207618
    18 мая 2018 в 14:33
  • animejs.com/documentation/assets/js/site.js тут все есть
    – SVE
    18 мая 2018 в 17:15
  • Anime =)) улыбнуло
    – user245150
    19 мая 2018 в 9:21

3 ответа 3

10

Вроде похоже.

let up = document.getElementById("up"),
  down = document.getElementById("down"),
  hoverBlock = document.getElementById("hover-block");

hoverBlock.addEventListener("mouseenter", function(e) {
  up.beginElement();
  console.log
});
hoverBlock.addEventListener("mouseout", function(e) {
  down.beginElement();
});
* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background: #222;
}

#wrap {
  position: relative;
  width: 220px;
  height: 70px;
  background: transparent;
}

#hover-block {
  cursor: pointer;
  background: rgba(0, 0, 0, 0);
  position: absolute;
  top: 20px;
  left: 20px;
  width: 180px;
  height: 30px;
  z-index: 1111;
}

p {
  position: absolute;
  width: 100%;
  height: 100%;
  color: white;
  text-align: center;
  line-height: 3.8;
  letter-spacing: 5px;
  font-size: 1.2rem;
  font-family: '';
  transition: all .3s;
}

#hover-block:hover~p {
  font-size: 1.2rem;
  transition: all .3s;
  font-size: 1.6rem;
  line-height: 2.7;
  color:orange;
}
<div id="wrap">
  <div id="hover-block">
  </div>
  <svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="70" viewBox="0 0 220 70">
	<style>svg{background: transparent; 	position:absolute;} </style>
  <path id="pt" d="M 20 20, C20 20  100 20 200 20, L200 50, C200 50  100 50 20 50Z"  fill="none" stroke="red" stroke-width="1">
 	  <animate id="up" begin="indefinite" fill="freeze" attributeName="d" dur="0.3s" to="M 20 20, C20 20  100 10 200 20, L200 50, C200 50  100 60 20 50Z" />
       <animate id="down" begin="indefinite" fill="freeze" attributeName="d" dur="0.3s" to="M 20 20, C20 20  100 20 200 20, L200 50, C200 50  100 50 20 50Z" /> 
	</path>
</svg>
  <p>GitHub</p>
</div>

10
  • 1
    Если не будет лень, завтра пример на css сделаю
    – Air
    18 мая 2018 в 21:04
  • Ближе к истине, похоже действительно=)
    – Arthur
    18 мая 2018 в 21:05
  • 1
    @Air всё равно что твой пример что мой не похож на пример из вопроса
    – user33274
    19 мая 2018 в 10:21
  • 1
    @МаксимЛенский, можно потратить еще часок, и сделать полностью аналогичным примеру из вопроса ответ. Я и ты показали вполне доходчивый пример. Если честно у меня нет желания тратить этот лишний час.... Если бы было лишнее время то вполне бы мог сделать.. пример выше я за 5 минут сделал...
    – Air
    19 мая 2018 в 10:31
  • 1
    @Избытоксусликов, поверь, просто времени нет... Я на вопросы то отвечаю, что бы в тонусе оставаться...
    – Air
    19 мая 2018 в 20:18
8

Анимация срабатывает по hover на красную область:

#pt:hover {
  d: path("m 15,135 c 63,-16 122,-13 179,0 v 54 c -57,11 -117,14 -179,0 z");
  d: "m 15,135 c 63,-16 122,-13 179,0 v 54 c -57,11 -117,14.35755 -179,0 z";
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 110 500 530">
  <path id="pt" d="M 15,135 H 194 v 54 H 15 Z" fill="#ff2a2a"/>
</svg>

6
  • Класс! А если ещё команды и кол-во точек будут совпадать, то можно прикрутить css transition. Два типа записи свойства это для разных браузеров?
    – zhurof
    19 мая 2018 в 7:08
  • Работает только в webkit браузерах
    – zhurof
    19 мая 2018 в 7:58
  • действительно не работает в firefox , только автора ответ работает везде ...надо работать над этим
    – user33274
    23 мая 2018 в 13:34
  • А жаль. Это ж какой простор для творчества был бы.
    – zhurof
    23 мая 2018 в 16:02
  • @ГеннадийЖуров нет ... там вместо hover надо перепилить на onmouse...
    – user33274
    23 мая 2018 в 16:04
7

Ну вот ребята как то так :)

Суть ясно ничего сложного нету

Ответил на основе ссылки который дал Other

var createBouncyButtons = (function() {
  function createButton(el) {
    var pathEl = el.querySelector('path');
    var spanEl = el.querySelector('span');
    function hover() {
      anime.remove([pathEl, spanEl]);
      anime({
        targets: pathEl,
        d: 'M10,10 C10,10 50,7 90,7 C130,7 170,10 170,10 C170,10 172,20 172,30 C172,40 170,50 170,50 C170,50 130,53 90,53 C50,53 10,50 10,50 C10,50 8,40 8,30 C8,20 10,10 10,10 Z',
        elasticity: 700,
        offset: 0
      });
      anime({
        targets: spanEl,
        scale: 1.15,
        duration: 800,
        offset: 0
      });
    }
    function down() {
      anime.remove([pathEl, spanEl]);
      anime({
        targets: pathEl,
        d: 'M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z',
        elasticity: 700,
        offset: 0
      });
      anime({
        targets: spanEl,
        scale: 1,
        duration: 800,
        offset: 0
      });
    }
    el.onmouseenter = hover;
    el.onmousedown = down;
    el.onmouseleave = down;
  }
  var buttonEls = document.querySelectorAll('.button');

  for (var i = 0; i < buttonEls.length; i++) {
    var el = buttonEls[i];
    createButton(el);
  }
})();
* {
  margin: 0;
  padding: 0;
}

svg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.button {
  opacity: 0;
  position: relative;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 180px;
  height: 60px;
  text-decoration: none;
}

.button.blue {
  color: #5E89FB;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
<a class="button blue" href="documentation" target="_blank" style="opacity: 1;">
        <svg viewBox="0 0 180 60">
          <path d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z"></path>
        </svg>
        <span>Documentation</span>
      </a>

12
  • 1
    там половина не нужна ...
    – user33274
    18 мая 2018 в 19:44
  • @МаксимЛенский вы про js код?да но я устал наверное завтра отредатирую.. но вот никак не смог впихнуть слово документ в сам блок =(
    – Randall
    18 мая 2018 в 19:46
  • 1
    @МаксимЛенский, не половина)))), а 90 %%%%
    – Air
    18 мая 2018 в 19:47
  • там слово в svg должно быть а не в html
    – user33274
    18 мая 2018 в 19:48
  • 1
    @МаксимЛенский лого удалил ..
    – Randall
    18 мая 2018 в 19:57

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.