Хороший и достаточно интересный пример создания оригинального и необычного 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> <span>C</span><span>L</span><span>U</span><span class="last">B</span> <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>
Обзор
Проголосуйте за урок
Оценка
Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!