Все для веб-дизайнера
Записи с метками Ротатор контента
Параллакс стена для сайта на JavaScript и CSS3
18 Июн
Сегодня мы хотим рассказать вам об одном замечательном эффекте, а именно о том, как создать эффект параллакс-стены для сайта при помощи JavaScript и CSS3. По умолчанию у нас будет три блока с фотографиями, которые зафиксированы в навигации слева, при этом в правой части будут сами фотографии, перелистывание к которым будет сопровождаться скольжением дополнительных блоков, которые будут сверху слоя с изображением. Все этом оформлено эффектом параллакса и смотрится очень круто и плавно.
Как создать слайдер для интернет-магазина
21 мая
Мы очень любим различные слайдеры и ротаторы на сайтах, по этому не могли обойти стороной. В данном уроке мы покажем как создать прекрасный полноэкранный слайдер с использованием HTML, CSS3 и jQuery. Вы можете использовать данный слайдер для презентаций продуктов на веб-сайте вашего магазина. В этом уроке мы используем Google Fonts, в частности такие шрифты как Montserrat и Oswald. Обязательно подключите данные шрифты к вашему документу перед началом работы. Давайте посмотрим, что же у нас получилось.
Слайдер с динамической прокруткой на jQuery
17 мая
Все мы знаем, как качественный слайдер полезен для сайта, останавливаться на этом не будем. Сегодня мы хотим рассказать, как создать прекрасный динамический слайдер постов, который привязан к прокрутке мыши и отображает превью новостей. Вы можете использовать такой слайдер после основной статьи, чтобы не потерять посетителя и показать ему еще интересных новостей. Для реализации такого слайдера нам понадобиться небольшой плагин jQuery altSlider, а также немного правил и стилей CSS3. Результат вас приятно удивит своей простотой и практичностью.
Слайдер для сайта при помощи CSS3 и WebGL
21 Апр
В данном уроке мы бы хотели показать Вам достаточно интересный пример искажения изображений при помощи WebGL. Данная технология все активней внедряется в сайты придавая им индивидуальности и оживляет новым, нестандартным подходом к поставленной задаче. Данный полноэкранный слайдер выполнен именно с применением такой технологии. Каждое изображение при перемотке слайдов будет разрушаться, а тематическое описание к слайдеру будет придавать большей драмы, что делает слайдер весьма наглядным примером и приковывает внимание.
Popup галерея для сайта при помощи CSS3 и JS
15 Апр
Красивая галерея для сайта является неотъемлемой его частью. Разработчики прибегают к разным вариациям создания такой галереи, обычно это простое модальное окно, которое не украшено никакими эффектами и служит для простого отображения картинки. Но что если пойти дальше и разнообразить данное окно, добавив эффект анимации, и не обычное, которое есть уже у всех, благодаря стандартным модулям и плагинам. В данном уроке мы рассмотрим как же создать разработчику сайта простую Popup галерея для сайта с красивой анимацией.
3D слайдер для сайта с помощью Page Scroll 3D
28 Ноя
В данном уроке мы хотим рассмотреть замечательный пример создания объемного слайдера. Page Scroll 3D — это фантастический плагин jQuery для создания анимированного полноэкранного вертикального слайдера страницы, где ваши пользователи смогут прокручивать страницы с помощью эффекта вращения 3D-куба. Все это смотрится впечатляющее, так как пользователь ощущает страницу объемной, а плавный переход создает иллюзию объемности на странице. Навигация доступна для пользователя как с помощью скролла мыши, так и навигационной панели.
3D слайдер с эффектом параллакса для сайта
30 Сен
Слайдеры занимают весомую роль в веб-дизайне и разработке структуры сайта. Сегодня мы бы хотели поговорить о замечательном эффекте параллакса и как его совместить со слайдером у вас на сайте. Мы хотим создать слайдер с эффектом параллакса но кроме этого, чтобы он был объемным, это позволит визуально выделить необходимую вам информацию. В данном уроке мы реализуем вышесказанное кроме этого, слайды будут заполнять еще и фон, выглядит все это очень привлекательным для простого посетителя и притягивающим взор.
Загрузка ...