659 Текст “slide to unlock” является, по сути, одним из отличительных черт iPhone. В этой статье мы постараемся сделать данный виджет/девайс на CSS3 и jQuery.
Существует пара WebKit специфических свойств, которые заполняют градиентом цвет текста:
|
1 2 |
-webkit-background-clip: text; -webkit-text-fill-color: transparent; |
Этот код позволит фону потомка отображаться, как цвет текста. Если мы сделаем градиент в цвете серый-белый-серый, а затем зададим ему движение слева направо, то получим как раз текст “slide to unlock”, характерный для iPhone/iPad. Важно отметить, что, изображения в сниппете почти не используются.
Примеры работают только на Webkit совместимых браузерах:
Структура градиента
Текст “slide to unlock” поставлен в h2 тег. Создадим для него градиентный фон на 5 “color-stops”:
|
1 2 3 4 5 6 7 |
background: -webkit-gradient(linear,left top,right top, color-stop(0, #4d4d4d), color-stop(0.4, #4d4d4d), color-stop(0.5, white), color-stop(0.6, #4d4d4d), color-stop(1, #4d4d4d)); |
И с помощью всего двух свойств в начале статьи, сделаем фон текста градиентным:
Обратите внимание, что ширина бэкграунда в два раза шире области с текстом. Сделано это для того, чтобы текст всегда был серым или белым, в зависимости от месторасположения бэкграунда.
Следующий шаг — анимация движения бэкграунда слева направо.
Тег h2 tag расположен в пределах элемента “well”, который отвечает за черный фон за текстом. Так как ширина элемента h2 по умолчанию равна 100%, то для того, чтобы сделать анимацию, назначим ему ширину 200%. Теперь мы можем начать движение с отрицательной ширины “well” и закончить положительной шириной “well”.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
#well { width: 720px; } h2 { width: 200%; -webkit-animation: slidetounlock 5s infinite; } @-webkit-keyframes slidetounlock { 0% { background-position: -720px 0; } 100%{ background-position: 720px 0; } } |
Ура! Анимация подсветки текста работает следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
#well { padding: 14px 20px 20px 20px; -webkit-border-radius: 30px; background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #010101),color-stop(1, #181818)); border: 2px solid #454545; overflow: hidden; } h2 { font-size: 80px; background: -webkit-gradient(linear,left top,right top,color-stop(0, #4d4d4d),color-stop(0.4, #4d4d4d),color-stop(0.5, white),color-stop(0.6, #4d4d4d),color-stop(1, #4d4d4d)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: slidetounlock 5s infinite; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; padding: 0; width: 200%; } @-webkit-keyframes slidetounlock { 0% { background-position: -720px 0; } 100% { background-position: 720px 0; } } |
Бонус: Разблокировка на jQuery
Можно извернуться и попробовать выполнить и кнопку разблокировки на чистом CSS. Тем более, что все элементы кнопки на CSS нарисовать можно, даже треугольник. Но, давайте, не в этой статье. Пусть кнопка разблокировки останется рисунком внутри тега h2.
|
1 |
<h2><img src="images/arrow.png" alt="slider" /> slide to unlock</h2> |
Подгружаем jQuery, jQuery UI и наш собственный скрипт:
|
1 2 3 |
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script> <script src='js/slidetounlock.js'></script> |
Зададим ограничение движения кнопки по оси x, лимиты движения, скорость возврата и способ исчезания при разблокировке.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(function() { $("h2 img").draggable({ axis: 'x', containment: 'parent', drag: function(event, ui) { if (ui.position.left > 550) { $("#well").fadeOut(); } }, stop: function(event, ui) { if (ui.position.left < 551) { $(this).animate({ left: 0 }) } } }); }); |
Кроме того можете поиграть с прозрачностью кнопки, чтобы добиться 99% похожести работы кнопки на iPhone.
А главного, как всегда — и не сказали. Как сделать редирект на другую страницу при «разблокировке»? Или разблокировку самой страницы, как здесь:
Заранее спасибо.
Для вас подготовлю статью для разблокировки.
Если ещё актуально, то можете почитать статью, там скрещивается этот плагин и один другой. Код этого плагина не меняется и там показано, куда нужно внести необходимый для вас код редиректа страницы (а именно location.replace («http://link.ru»); )