Создаем эффект загнутого края веб страницы (Page Curl Effect)

Три простых способа создания реалистичного анимированного эффекта загибания страницы

Эффект загнутого края

На многих веб сайтах используется эффект загнутого края страницы для оформления угловых информационных или рекламных блоков. Такой эффект может быть не только статичным, но и динамическим. Cделать это можно при помощи незаменимой JQuery в связке с CSS. Изобретать что-то новое не потребуется: мы предложим вам готовые варианты по созданию динамических эффектов загнутого края страницы.

Simple Page Peel Effect with jQuery and CSS от Soh Tanaka

Simple Page Peel Effect with jQuery and CSS от Soh Tanaka

Способ достаточно простой, и в тьюториале достаточно подробно пояснены HTML- и CSS-вставки, а также JavaScript-код. Эффект, правда, слегка прямолинеен: нет того самого стопроцентного ощущения «загнутости».

The Sexy Curls jQuery Plugin

The Sexy Curls jQuery Plugin

Еще один пример jQuery-плагина с открытым кодом. На этот раз «правдоподобность» эффекта достигается за счет использования drag-and-drop: край вы отгибаете на необходимое расстояние мышью. Плагин требует использования jQuery и jQuery UI.

jQuery Page Peel 1.2 от Smpl Multimedia

jQuery Page Peel 1.2 от Smpl Multimedia

Пожалуй, самый «правдоподобный» эффект: в обычном состоянии загнутый край отбрасывает тень и ненавязчиво колышется, а при наведении мышью довольно реалистично загибается. Опционально в настройках можно использовать Flash.

Выводы

Какие-либо рекомендации по выбору плагинов дать сложно: использование Flash обеспечивает реалистичную анимацию, а jQuery уменьшает размер файлов и увеличивает скорость загрузки. Удачи в выборе!

Заинтересовались? Звоните нам по телефонам +375 (29) 774-35-89 и +375 (44) 774-35-89 в Минске. Мы будем рады помочь Вам в реализации Вашего проекта.

К посту «Создаем эффект загнутого края веб страницы (Page Curl Effect)» комментариев пока нет

Новый комментарий

Для редактирования комментария осталось 10 минут