Разное

Здравствуйте друзья! Сегодня я предлагаю вашему внимаю пример создания hover-эффекта для изображений. В данном примере при наведении курсором мышки изображение затемняется серым цветом, и при этом выплывает сверху на середину изображения иконка лупы. Изменить иконку лупы которая появляется при наведении на изображение на любую другую очень просто! Для этого необходимо в классе .gallery a:before изменить ссылку фона в свойстве background на адрес другой иконки. Для ... Читать далее »

Здравствуйте друзья! В этой статье предлагаю вашему вниманию очередной интересный и простой пример создания плавной навигации на странице сайта в стиле «Go To». Это не первая подобная статья, и если вам интересует данная тематика, вы можете ознакомиться с другими схожими статьями тут и тут. Работает данный пример так: Для начала необходимо создать блок, в котором будет страница. Делаем это так: Как ... Читать далее »

Предлагаю вашему вниманию эффект падающего снега, который реализован с помощью Canvas.  В данной реализации эффекта падающего снега есть один интересный плюс — снег отлетает от курсора мыши. Важно! Для работы с данным примером трансформации текста не забудьте обязательно подключить библиотеку jQuery. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. HTML CSS JS Читать далее »

Пример создания галереи с очень интересным эффектом. При наведении на изображение меняется фон, в зависимости от выбранного изображения. На фоне мы видим размытое изображения из галереи, на которое мы навели курсором мышки. Если из CSS кода убрать: Мы получим не размытый, а изображение из галереи на которое мы навели мышкой, но в полном размере и без эффекта размытия. Как видите, таким ... Читать далее »

Хороший и достаточно интересный пример создания оригинального и необычного SkewY hover-эффекта для текста. В данном примере, при наведении на текст наклоняется одна из осей. Трансформация skewX сдвигает все y-координаты на определенный угол, оставляя x-координаты без изменения. Важно! Для работы с данным примером трансформации текста не забудьте обязательно подключить библиотеку jQuery. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. ... Читать далее »

Отличный пример создания оригинального и необычного модального окна для вашего сайта. Данный пример реализован с помощью CSS, jQuery и библиотеки TweenMax.min.js. Важно! Не забудьте обязательно подключить библиотеку jQuery и TweenMax. Использование данного примера ограничивается практически только вашей фантазией. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. HTML CSS JS Читать далее »

Пример реализации плавной прокрутки сайта до якоря. Для того чтобы назначить на любой из пунктов меню свой якорь, создайте блок div и назначьте ему уникальный id. После этого в навигации (меню) укажите ссылку на id блока. Пример ссылки в меню на якорь блока: где #defaults это id блока div «О нас». Для работы необходимо обязательно подключить библиотеку jQuery. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. HTML ... Читать далее »

Если вы искали как сделать выезжающую панель для сайта, тогда данный пример для вас! При клике по кнопке панель выезжает с правой стороны веб-станицы, а закрывается при нажатии на любую область страницы, кроме окна выдвигающейся панели или при нажатии на иконку закрытия в вернем углу. Для работы необходимо обязательно подключить библиотеку jQuery. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. HTML CSS JS Читать далее »

Давайте рассмотрим создание модальных всплывающих окон, которые в народе еще называются popup-окна. О создании всплывающих (модальных) окон в WordPress, мы говорили в отдельном уроке. В данном примере модальные окна появляются при клике на кнопку (текст) и исчезают при нажатии в любую область мимо модального окна, или при клике на ключевое слово. Изменяя значения в скрипте fadeIn вы можете увеличить или уменьшить скорость открытия всплывающего модального ... Читать далее »

Предлагаю вашему вниманию пример создания модального окна с помощью CSS и jQuery. Модальное окно с сообщением появляется сразу после загрузки страницы. Для закрытия окна необходимо нажать на клавиатуре клавишу Esc или кликнуть по кнопке размещенной в сообщении модального (popup) окна. Изменяя в скрипте значение можно назначить любую клавишу (или несколько клавиш) на клавиатуре для закрытия модального окна. Виртуальные коды клавиш можно узнать тут. Для работы необходимо обязательно подключить библиотеку jQuery. ... Читать далее »