Разблокировка как на iPhone для сайта

Разблокировка как на iPhone для сайта

52012-01-2923408Денис Абдуллин
Скрипт будет работать только в браузерах WebKit. На iPhone разблокировка осуществляется ручным перетаскиванием стрелки из левой части в другую, в нашем примере все тоже самое. Также продумана анимация для текста: в популярном устройстве надпись «slide to unlock» переливается, т.е. свет перетекает из одной части в другую, и анимация повторяется через определенный промежуток времени.

Разблокировка произойдет только тогда, когда перетаскиваемый объект достигнет конечного пункта, в противном случае наш объект, стрелка вернется в исходное положение. Что происходит после разблокировки? После того, как стрелка достигла финальной точки, элемент исчезает, т.е. блок, в котором и находится блокировка.

Блокировку/Разблокировку, как на iPhone/iPad/iPod, можно использовать на HTML страницах, оформленных в стиле продуктов Apple.

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (8)
Гладнев Ярослав 2012-01-30 в 01:14Спам
Прикольно. Но на айфоне легче..провёл пальцем и всё...
-1
Гость 2012-01-30 в 11:45Спам
А ты подумай, Ярослав, если экран сенсорный, то здесь тоже "провёл пальцем и всё..."
3
Гость 2012-01-30 в 14:30Спам
Круто) реально круто)
1
Кирилл Косырев 2012-05-30 в 16:27Спам
Сделать бы, чтобы через время эта разблокировка появлялась
0
Игорь Муравьев 2012-07-19 в 20:00Спам
Как сделать чтобы после разблокировки перенаправлялось на сайт!??!
0
Денис Абдуллин 2012-07-19 в 20:13Спам
Вообще-то там есть функция после разблокировки. Там, где тупо исчезание делай перенаправление
0
Игорь Муравьев 2012-07-19 в 21:06Спам
<link rel='stylesheet' href='style.css'>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js'></script>
<script src='slidetounlock.js'></script>
</head>

<body>

<div class="top">
</div>

<div id="page-wrap">

<div id="well">

<h2><strong id="slider"></strong> <span>slide to unlock</span></h2>

</div>

</div> ГDЕ? :D
0
Иван Цыганков 2013-10-23 в 12:05Спам
"Прикольно. Но на айфоне легче..провёл пальцем и всё" Согласен! И сайту лишняя нагрузка...
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.