Домой / Для сайта / Hover-эффект трансформации текста SkewY
Hover-эффект трансформации текста SkewY

Hover-эффект трансформации текста SkewY

Хороший и достаточно интересный пример создания оригинального и необычного SkewY hover-эффекта для текста.

В данном примере, при наведении на текст наклоняется одна из осей. Трансформация skewX сдвигает все y-координаты на определенный угол, оставляя x-координаты без изменения.

Важно! Для работы с данным примером трансформации текста не забудьте обязательно подключить библиотеку jQuery.

<script src="http://code.jquery.com/jquery-1.11.1.js"></script>

Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже.

Демо Скачать

HTML

<div class="container">
 <h1 class="row skew-title">
 <span>W</span><span>O</span><span>R</span><span>D</span><span>P</span><span>R</span><span>E</span><span>S</span><span 

class="last">S</span>
 &nbsp;
 <span>C</span><span>L</span><span>U</span><span class="last">B</span>
 &nbsp;
 <span class="alt">C</span><span class="alt">O</span><span class="alt last">M</span>
 </h1>
 <p class="row row--intro"><a href="https://wp-lessons.com/">Вернуться на страницу с уроком.</a></p>
</div>

CSS

body {
 margin-top: 280px;
 background-color: #112;
 background-color: #0c2d41;
 font-family: roboto, 'helvetica neue', helvetica, arial, sans-serif;
}
.container {
 width: 800px;
 margin: auto;
}
.row {
 position: relative;
 height: 50px;
 z-index: 1;
 clear: both;
 margin-bottom: 30px;
 text-align: center;
}
.row--intro a{
 padding-top: 20px;
 font-size: 16px;
 line-height: 28px;
 font-weight: 300;
 color: #fff!important;
 opacity: 0.4;
}
.skew-title {
 font-size: 25px;
}
.skew-title span {
 position: relative;
 display: inline-block;
 width: 40px;
 height: 50px;
 margin: auto;
 z-index: 2;
 text-align: center;
 color: #fff;
 font-family: 'roboto';
 font-weight: 700;
 font-size: 35.714285714285715px;
 line-height: 50px;
 -webkit-transform: skewY(-15deg);
 -ms-transform: skewY(-15deg);
 transform: skewY(-15deg);
 -webkit-transform-origin: 0 100%;
 -ms-transform-origin: 0 100%;
 transform-origin: 0 100%;
 -webkit-transition: all 0.2s;
 transition: all 0.2s;
 cursor: default;
}
.skew-title span:after,
.skew-title span:before {
 display: block;
 top: 0;
 left: 0;
 position: absolute;
 background: #185a81;
 height: 50px;
 width: 40px;
 content: ' ';
 z-index: -1;
 -webkit-transition: all 0.2s;
 transition: all 0.2s;
}
.skew-title span:before {
 background: rgba(0,0,0,0.1);
 -webkit-transform: skewY(15deg);
 -ms-transform: skewY(15deg);
 transform: skewY(15deg);
 -webkit-transform-origin: 0 0;
 -ms-transform-origin: 0 0;
 transform-origin: 0 0;
}
.skew-title span:nth-child(even) {
 background-color: #154e70;
 -webkit-transform: skewY(15deg);
 -ms-transform: skewY(15deg);
 transform: skewY(15deg);
 -webkit-transform-origin: 100% 100%;
 -ms-transform-origin: 100% 100%;
 transform-origin: 100% 100%;
}
.skew-title span:nth-child(even):after {
 background-color: #154e70;
}
.skew-title span:nth-child(even):before {
 -webkit-transform-origin: 100% 0;
 -ms-transform-origin: 100% 0;
 transform-origin: 100% 0;
 -webkit-transform: skewY(-15deg);
 -ms-transform: skewY(-15deg);
 transform: skewY(-15deg);
}
.skew-title span.flat {
 -webkit-transform: skewY(0);
 -ms-transform: skewY(0);
 transform: skewY(0);
}
.skew-title span.flat:before {
 -webkit-transform: skewY(0);
 -ms-transform: skewY(0);
 transform: skewY(0);
}
.skew-title span.flat:nth-child(even):after {
 background-color: #185a81;
}
.skew-title span.alt:after {
 background-color: #b94a2c;
}
.skew-title span.alt:nth-child(even):after {
 background-color: #a14026;
}
.skew-title span.alt.flat:nth-child(even):after {
 background-color: #b94a2c;
}

JS

<script type="text/javascript">
$('.skew-title').children('span').hover(function() {

 var n = $(this).index();
 n++;
 $(this).addClass('flat');

 if ((n % 2 == 0)) {
 $(this).prev().addClass('flat');
 } else {
 if (!$(this).hasClass('last')) {
 $(this).next().addClass('flat');
 }
 }

}, function() {

 $('.flat').removeClass('flat');

});
</script>
Хороший и достаточно интересный пример создания оригинального и необычного SkewY hover-эффекта для текста. В данном примере, при наведении на текст наклоняется одна из осей. Трансформация skewX сдвигает все y-координаты на определенный угол, оставляя x-координаты без изменения. Важно! Для работы с данным примером трансформации текста не забудьте обязательно подключить библиотеку jQuery. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. HTML CSS&hellip;

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.88 ( 3 голосов )
100

Оставить комментарий

Ваш email не будет опубликован.

*