Красивая шапка для сайта c помощью jQueryКрасивое оформление сайта всегда заставляет пользователя привлечь свой взор к ресурсу. Никому не секрет, что унылые дизайны сайтов отходят на задний план с выходом новых технологий. Поэтому мы рассмотрим как можно красиво оформить часть сайта, создав эффект в стиле «открытие занавесы» с помощью jquery. Идея заключается в том, что вы дергаете за веревочку и занавесы раскрываются в разные стороны. Это довольно интересное применение jQuery и Вам решить, где его употребить. При небольшой доработке и хорошем воображении..

 ..может получиться что-нибудь уникальное. Если вы заметили, то изображения находятся в формате .png, тут следует заметить, что в IE6 (Как свидетельствует статистика, люди еще пользуются таким «браузером»), возможно неправильное отображение демо, а именно прозрачности PNG. Прежде чем приступить к уроку следует заметить, что мы будем использовать фреймворк jQuery и плагин «easing» (для плавного открытия и закрытия).  И так, приступим, для начала мы рассмотрим разметку HTML:

Далее рассмотрим стили CSS. Для этого мы создадим два блока «штор» (.leftcurtain и .rightcurtain), которые закреплены по обеим сторонам. Это достигнуто благодаря CSS и атрибутам top и left.

Вы можете заметить, что каждой шторе мы назначили ширину, 50% и 51%. Разница в ширине скрывает некоторые неправильные углы при закрытой шторе. В уроке использован z-index для того, чтобы шторы всегда были поверх других элементов.  Класс .logo содержит содержание того, что находится под шторой. Класс .rope помещает графику с веревкой поверх всего и прячет часть над экраном, чтобы достигался эффект «дергания за веревку».

Красивая шапка для сайта c помощью jQuery

Далее рассмотрим jQuery. И так, когда все готово, мы утверждаем, что шторы закрыты с помощью переменной $curtainopen = false. Эта переменная используется для определения состояния штор, и какую анимацию выполнять.

Еще одно события происходит при нажатии .rope. Данное события запускает открытие\закрытие штор. Вот и все. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.