Все для веб-дизайнера
Записи с метками параллакс
Гибкие слайды с эффектом параллакса на 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. По умолчанию у нас будет три блока с фотографиями, которые зафиксированы в навигации слева, при этом в правой части будут сами фотографии, перелистывание к которым будет сопровождаться скольжением дополнительных блоков, которые будут сверху слоя с изображением. Все этом оформлено эффектом параллакса и смотрится очень круто и плавно.
Как сделать параллакс-эффект для изображений
7 Июн
Думаю каждому из вас нравится параллакс, он притягивает взор своей индивидуальностью и подходом к анимации. Сегодня мы бы хотели показать как можно создать замечательный параллакс-эффект для изображений сайта при помощи js. У нас будет эффект зума с параллаксом, это необычное сочетание позволяет нам по новому взглянуть на эффект параллакса. Для достижения такого эффекта мы будем использовать плагин Parazoom-это прекрасный плагин jQuery, который применяет плавные, интерактивные, масштабируемые и панорамные функции для изображений при наведении курсора.
Загрузка ...