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

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

29.01.201222368borat

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

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

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



Сохраните в социальную сеть
Комментарии (8)
Прикольно. Но на айфоне легче..провёл пальцем и всё...
-1
Гость 30.01.2012 в 11:45Спам
А ты подумай, Ярослав, если экран сенсорный, то здесь тоже "провёл пальцем и всё..."
3
Гость 30.01.2012 в 14:30Спам
Круто) реально круто)
1
Сделать бы, чтобы через время эта разблокировка появлялась
0
Как сделать чтобы после разблокировки перенаправлялось на сайт!??!
0
Вообще-то там есть функция после разблокировки. Там, где тупо исчезание делай перенаправление
0
<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
"Прикольно. Но на айфоне легче..провёл пальцем и всё" Согласен! И сайту лишняя нагрузка...
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт