stu

Создаем текст “slide to unlock” как в iPhone на WebKit/CSS3

Текст “slide to unlock” является, по сути, одним из отличительных черт iPhone. В этой статье мы постараемся сделать данный виджет/девайс на CSS3 и jQuery.

Существует пара WebKit специфических свойств, которые заполняют градиентом цвет текста:

Этот код позволит фону потомка отображаться, как цвет текста. Если мы сделаем градиент в цвете серый-белый-серый, а затем зададим ему движение слева направо, то получим как раз текст “slide to unlock”, характерный для iPhone/iPad. Важно отметить, что, изображения в сниппете почти не используются.
Примеры работают только на Webkit совместимых браузерах:

CкачатьПример

Структура градиента

Текст “slide to unlock” поставлен в h2 тег. Создадим для него градиентный фон на 5color-stops”:

И с помощью всего двух свойств в начале статьи, сделаем фон текста градиентным:

Обратите внимание, что ширина бэкграунда в два раза шире области с текстом. Сделано это для того, чтобы текст всегда был серым или белым, в зависимости от месторасположения бэкграунда.
Следующий шаг — анимация движения бэкграунда слева направо.

Тег h2 tag расположен в пределах элемента “well”, который отвечает за черный фон за текстом. Так как ширина элемента h2 по умолчанию равна 100%, то для того, чтобы сделать анимацию, назначим ему ширину 200%. Теперь мы можем начать движение с отрицательной ширины “well” и закончить положительной шириной “well”.

Ура! Анимация подсветки текста работает следующим образом:

Бонус: Разблокировка на jQuery

Можно извернуться и попробовать выполнить и кнопку разблокировки на чистом CSS. Тем более, что все элементы кнопки на CSS нарисовать можно, даже треугольник. Но, давайте, не в этой статье. Пусть кнопка разблокировки останется рисунком внутри тега h2.

Подгружаем jQuery, jQuery UI и наш собственный скрипт:

Зададим ограничение движения кнопки по оси x, лимиты движения, скорость возврата и способ исчезания при разблокировке.

Кроме того можете поиграть с прозрачностью кнопки, чтобы добиться 99% похожести работы кнопки на iPhone.


3 комментарий на “Создаем текст “slide to unlock” как в iPhone на WebKit/CSS3

  1. А главного, как всегда — и не сказали. Как сделать редирект на другую страницу при «разблокировке»? Или разблокировку самой страницы, как здесь: www.thebcard.com/TM96

    Заранее спасибо.

    Thumb up 0 Thumb down 0

    • Если ещё актуально, то по ссылке можете почитать статью, там скрещивается этот плагин и один другой. Код этого плагина не меняется и там показано, куда нужно внести необходимый для вас код редиректа страницы (а именно location.replace («http://link.ru»); )

      Thumb up 0 Thumb down 0

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