Все для веб-дизайнера
Слайдер отзывов клиентов сайта на CSS и jQuery
Ноя 18
Отзывы клиентов для сайта который предоставляет услуги или рекламирует себя является очень важным элементов в структуре сайта. Данный раздел не стоит упускать из виду и подать его посетителям красиво и отзывчиво. В данном уроке мы рассмотрим как реализовать данную функцию. Мы рассмотрим замечательный способ создания простого модуля для отзывов клиентов, который можно легко встроить в ваш дизайн. Кроме этого мы предусмотрели вариант, когда пользователям необходимо посмотреть больше отзывов.
Параллакс с эффектом увеличения с помощью JS
Ноя 16
Параллакс весьма интересная тема для наших читателей и мы не могли пройти ее стороной, в данном уроке мы рассмотрим достаточно простой способ реализации параллакса, а именного эффект увеличения шапки страницы с движением при прокрутки вниз. Смотрится такой эффект достаточно оригинально и визуально оживляет страницу, реализовать его тоже не составит труда. Для реализации нам понадобиться всего навсего несколько простых правил оформленных все это в обыкновенные стили. Получилось достаточно красиво.
Эластичная навигация для сайта с помощью CSS3
Сен 26
Эластичность, сейчас, весьма популярная. Разнообразие девайсов заставляет разработчиков придумывать новые приемы для реализации навигации для разных объектов. В данном уроке мы рассмотрим процесс построения и стилизации замечательной эластической навигации для сайта. В демонстрации мы сделали несколько версий, для отображения в разных условиях, первая навигация это обычная кнопка вызывающая эффект анимации и меню, вторая версия будет реализованная для загрузки мультимедийных файлов.
Анимированные эффекты для сайта на WebGL
Сен 24
Сегодня мы хотим показать вам, как создать некоторые реалистичные эффекты искажения с использованием частиц шейдеров в WebGL. Идея заключается в том, чтобы добавить тонкое анимированное искажение статического изображения и какой-нибудь текст. Обратите внимание, что в данном эффекте используются пиксельные шейдера, работа которых заключается в запуске функций для каждого пикселя в видимой области. Для того чтобы реализовать задуманное, нам необходимо задать позиции для пиксельных шейдеров на нашем макете.
Вращающиеся на 360 градусов 3D фото товаров
Сен 22
Обзор товара весьма важен не только для покупателя, но и для продавца, по этому данная технология для просмотра изображений в последнее время весьма популярное. Ранее уже мы рассказывали о подобном приеме, но сегодня хотелось бы уделить больше внимания данному подходу. Мы создадим слайдер изображений который будет вращать изображения, при этом у нас будет индикатор, который покажет процесс загрузки все слоев, что не позволит пользователю увидеть недозагруженный слайдер. Слайдер весьма легкий в конструкции и практичен.
Анимированное взаимодействие с корзиной сайта
Сен 20
В данном уроке мы рассмотрим как создать анимацию всплывающего окна для пользователя который решил купить товар на вашем сайте. Корзина на сайте с покупками является неотъемлемым дизайном интернет магазина. Иногда разработчики не много внимания уделяют данному разделу, по этому он остается блеклым звеном в дизайне. Мы решили исправить данную проблему и создать замечательный дизайн, при нажатии на иконку корзины произойдет разворот корзины, без перехода на другую страницу, с подробной информацией и возможностью продолжить покупки.
Эффект чернильного перехода для сайта на CSS3
Апр 4
Недавно я наткнулся на несколько веб-сайтов с использованием чернильных эффектов в качестве перехода. Хорошим примером является сайт Sevenhills . Сначала я думал , что они использовали технику , приведенный в действие HTML холста (для обеспечения возможности прозрачности), а затем я проверил исходный код и выяснил , что они не используют видео, но применено изображение со спрайтами PNG. Используя PNG спрайты и steps() функцию синхронизации в CSS.
Загрузка ...