[Фича 16] Нестандартная анимация кнопок (часть 1)
Привет. Как и обещал, посмотрим на нестандартную анимацию кнопок через код. Я не сторонник таких введений в сайт, но решил, что возможно кому-то будет полезно.
Да и урок этот покажет нам, что тильда не ограничивается своими стандартными решениями. Изучайте урок, будет интересно)
Разбор полётов.
Сделал гифку, которую вы видите сверху. Анимация тут непростая. При наведении на кнопку воспроизводится некий блик кнопки.
Мы не можем сделать такого стандартным решением, даже пошаговой анимацией. Здесь без лишних строк кода не обойтись.
Добавляем стандартный блок BF101
Добавили кнопку, назначаем ей любой цвет.
Я сделаю в уроке два эффекта, потом замутим голосование и решим, нужна ли эта рубрика или нет.
Добавляем код через блок Т123.
В блок Т123 в контент вводим код:
<script>
$('.t142 .t-btn').addClass("light");
</script>
<style>
.light{
overflow: hidden;
z-index: 1;
position: relative;
-webkit-transition: 0.3s ease-out;
transition: 0.3s ease-out;
}
.light:hover {
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
cursor: pointer;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
color: #ffffff;
z-index: 8;
}
.light:before {
content: "";
background-color: rgba(255, 255, 255, 0.5);
height: 100%;
width: 3em;
display: block;
position: absolute;
top: 0;
left: -4.5em;
-webkit-transform: skewX(-45deg) translateX(0);
transform: skewX(-45deg) translateX(0);
-webkit-transition: none;
transition: none;
}
.light:hover:before {
webkit-transform: skewX(-45deg) translateX(13.5em);
transform: skewX(-45deg) translateX(22.5em);
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
</style>
Публикуем сайт и смотрим, эффект должен примениться.
Рассмотрим другой вариант.
Опять добавляем кнопку и вписываем такой код:
<script>
$('.t142 .t-btn').addClass("swipe");
</script>
<style>
.swipe{
border: none;
position: relative;
transition: 500ms ease all;
outline: none;
overflow: hidden;
z-index:1;
}
.swipe:hover{
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}
.swipe:before{
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #2207e8;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
webkit-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
z-index: -1;
}
.swipe:hover:before{
-webkit-transform: translateX(0);
transform: translateX(0);
}
</style>
Сохраняем и публикуем, только после этого эффект будет работать.
Если вы хотите, чтобы мы разобрали подобные эффекты более подробно - принимайте участие в голосовании)
Всем успехов!)