Slide to unlock как сделать

Slide to unlock как сделать
Slide to unlock как сделать
Slide to unlock как сделать
Slide to unlock как сделать
Slide to unlock как сделать

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

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

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

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

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

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

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

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

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

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

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

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

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


Возможно, Вам будет интересно ↓↓↓ Slide to unlock как сделать Slide to unlock как сделать Slide to unlock как сделать Slide to unlock как сделать Slide to unlock как сделать Slide to unlock как сделать Slide to unlock как сделать Slide to unlock как сделать Slide to unlock как сделать Slide to unlock как сделать Slide to unlock как сделать Slide to unlock как сделать

Изучаем далее:



Монтаж сайдинга окна схема

Бетонированная садовая дорожка своими руками5

Как сделать автомобиль в юнити

Поролон производство своими руками

Прически на средние волосы с украшением фото