Для сайта

Отличное горизонтальное выпадающее меню. Конечно, возможно кто-то предпочитает создавать горизонтальное меню без использования JS, а на чистом CSS. Но я надеюсь, что данный способ реализации меню не оставит вас равнодушными. HTML CSS JavaScript Читать далее »

Очень простой полноэкранный слайдер который масштабируется под мобильные устройства. Слайдер адаптивный и занимает 100% ширину экрана. Он работает с CSS превращениями и изображениями которые завернутыми анкорами. Если не требуется связывание, то анкор можно заменить. С установленной максимальной шириной в 100% изображения для небольших экранов будут уменьшатся в размерах. HTML CSS JavaScript Источник урока: http://tympanus.net/codrops/2013/02/26/full-width-image-slider/ Перевел для сайта wordpress-club.com: Александр Овчаренко Читать далее »

Подвижный контент слайдер, который регулирует свою ширину и высоту в зависимости от размера окна браузера. Это наметка простого JQuery контент слайдера. Он имеет скользящую область контента, и навигацию  в нижней части как на вкладках. Это изменчивый слайдер, а это означает, что он будет регулироваться по ширине и высоте контейнера. Содержание контента станет прокручивать только если для него недостаточно места. Каждый элемент списка слайдов имеет соответствующий элемент ссылки в навигации. ... Читать далее »

Отзывчивое горизонтальное выпадающее меню как на Microsoft.com. Это большое горизонтальное выпадающее меню показывает подменю, которое открывается после щелчка по элементу меню. Вдохновение пришло от меню на Microsoft.com. Некоторые примеры отзывчивых запросов показывают как настроить меню для небольших экранов. HTML CSS JavaScript Источник урока: http://tympanus.net/codrops/2013/03/05/horizontal-drop-down-menu Перевел для сайта wordpress-club.com: Александр Овчаренко Читать далее »

Многие веб-разработчики рано или поздно сталкиваются с задачей создать динамический переключатель вида. Его использую на страницах продукции товаров, блогах и портфолио. В этой статье я покажу как за несколько минут с помощью CSS и JQuery можно очень легко создать переключатель вида.  HTML Для начала нам нужно добавить немного html разметки: CSS Теперь добавляем стили для сетки и списка: JQuery Последняя часть ... Читать далее »

Экспериментальное слайд-шоу, страницы которого можно перетаскивать мышкой и у которого есть два варианта просмотра: полноэкранный и режим маленькой карусели. В полноэкранном режиме связанное содержание может быть просмотрено. Сегодня мы хотели бы поделиться с вами экспериментальным слайд-шоу. Идея основана на великой концепции навигации с сайта Wild, где можно посмотреть проекты в полноэкранном режиме или в режиме карусели. Существуют различные методы, которые подошли бы для ... Читать далее »

Небольшой эксперимент, который исследует использование анимаций линейной графики SVG, которая предшествует появлению графических элементов или элементов сайта, имитируя их загрузку. SVG наконец становится все более используемым и веселым компонентом сайта. Это мощный инструмент и с помощью SVG есть множество творческих возможностей для интересных эффектов на веб-сайте. Сегодня мы хотели бы поделиться с вами двумя экспериментальными концепция, которые используют анимации очертаний, и которые стали популярными благодаря ... Читать далее »

Урок, который показывает, как воссоздать четыре мозаичных слайд-шоу эффекта которые я видел на Читать далее »

В этом уроке мы будем использовать невероятно удивительные вращения и масштабирования JQuery на основе патча от Захари Джонсона. Мы создадим меню с небольшими значками, которые будут чередоваться при наведении. Кроме того, мы сделаем пункты меню с ссылками и окном поиска. Итак, давайте начнем, это проще, чем кажется. Разметка Для этого меню мы не будем создавать список, но создадим div элементы для каждого ... Читать далее »

В данном уроке мы создадим пузырьковую навигацию с помощью jQuery. Идея заключается в том, чтобы сделать несколько круглых иконок, на которых при наведении курсора мыши «раскрывается» круглое подменю с дополнительными пунктами. Мы будем использовать плагин jQuery Easing для получения замечательного эффекта сглаживания. Разметка Код HTML состоит из основного элемента div с классом navigation и id nav. В основном элементе div ... Читать далее »