Все для веб-дизайнера
Записи с метками параллакс
Современный эффект параллакса на jQuery
12 Дек
Сегодня мы бы хотели рассказать о процессе создания современного эффекта параллакса для сайта при помощи CSS3 и jQuery. Мы постараемся максимально упростить процесс создания для легкости его внедрения в структуру сайта. Параллакс будет поддерживать отображение на мобильных устройствах, кроме этого будет адаптивным, для его создания мы подготовили подборку изображений. Также были добавлены подписи на изображения верхним слоем, для отображения дополнительной информации, они также будут сопровождены данным эффектом.
Гибкие слайды с эффектом параллакса на CSS3
4 Окт
Cегодня мы бы хотели поделиться интересным примером слайдера для сайта, речь пойдет о добавлении эффекта параллакса в раскрывающиеся слайды. По умолчанию блок слайдов будет похож на перевернутое гамбургер-меню, при нажатии на каждую полосу блок с изображением будет раздвигаться с плавной анимацией демонстрируя посетителю содержания слайда. Кроме этого каждый слайд будет стилизованный иконкой в нижней части, что позволит пользователю иметь представление о содержании слайда, выглядит весь слайдер достаточно круто.
2.5D эффект для фотографий сайта на CSS3
22 Авг
Стилизация фотографий на сайте это весьма кропотливый и полезный прием, ведь именно визуализация информации помогает быстрее донести до посетителя желаемую информацию. Сегодня мы хотим рассказать об таком приеме визуализации и показать как можно создать удивительный эффект 2.5D для фотографий сайта при помощи CSS3 и слоев изображений. В неком роде у нас будет автоматический эффект параллакса, на который пользователь не будет влиять, изображение будет анимироваться при фокусировке на нем внимания, выглядит удивительно.
Parallax background с помощью плагина jQuery
3 Авг
Думаю каждый из вас любит параллакс, и сегодня я покажу как создать достаточно простой и красивый фон с эффектом параллакса для вашего сайта при помощи небольшого плагина jQuery. Рarlx является чрезвычайно легким плагином jQuery который используется для создания эффектов прокрутки параллакса, изменяя положение фона с помощью CSS3 2D преобразований (translateY). С помощью его сегодня мы и создадим наш эффект, для демонстрации мы взяли три слайда, которые будут двигаться более медленно, чем основная статья, создавая иллюзию.
Parallax slider для сайта при помощи jQuery
28 Июл
Cлайдер на сайте это отличная штука, ведь картинки всегда привлекают больше внимание чем текст, а если картинки еще и двигаются то это вдвойне плюс. Думаю каждый из Вас знает что такое параллакс, и хоть раз с ним сталкивался, сейчас все больше и больше сайтов реализованы с применением параллакса, визуально он помогает оживить сайт, и для пользователя это интересно, ведь придает некую изюминку в сайт, соответственно читатель запомнит вас, чем не идеальный маркетинговый ход для привлечения новых клиентов на сайт.
Как создать параллакс с помощью jQuery и GSAP
20 Июн
Я люблю рассказывать о параллаксе. Наверное это одно из моих любимых направлений, и судя по статистике и наших читателей, сегодня мы бы хотели показать как реализовать еще один замечательный тип параллакса для сайта при помощи jQuery и GSAP. Нечто похожее мы уже показывали ранее, но там сами блоки были с эффектом параллакса, сегодня я покажу как сделать на таких блоках цветные полосы с эффектом параллакса при прокрутке страницы. Выглядит очень интересно и свежо, думаю вам стоит попробовать на своих сайтах.
Параллакс стена для сайта на JavaScript и CSS3
18 Июн
Сегодня мы хотим рассказать вам об одном замечательном эффекте, а именно о том, как создать эффект параллакс-стены для сайта при помощи JavaScript и CSS3. По умолчанию у нас будет три блока с фотографиями, которые зафиксированы в навигации слева, при этом в правой части будут сами фотографии, перелистывание к которым будет сопровождаться скольжением дополнительных блоков, которые будут сверху слоя с изображением. Все этом оформлено эффектом параллакса и смотрится очень круто и плавно.
Загрузка ...