Все для веб-дизайнера
Записи с метками JavaScript
Создаем видео фон с эффектом параллакса на JS
Дек 10
В данном уроке мы бы снова хотели поговорить о эффекте параллакса и как его применить с видеофоном, такой эффект будет реализован с помощью плагина ArParallax. Идея заключается в плавной смене объектов фона красивой анимацией и эффектом параллакса, кроме этого зона до активации будет заблюрена, по этому не будет отвлекать посетителя. Видео будет зациклено, когда пользователь будет прокручивать скролл, эффект плавно подлетает к активному полю страницы с превосходной анимацией, смотрится очень привлекательно для посетителя.
Красивая интерактивная заглушка для сайта на JS
Дек 6
Красивый сайт остается в памяти посетителя очень долго, и это несомненно прекрасно. Сегодня мы бы хотели поговорить об замечательный заглушке на ваш сайт, а именно об интерактивной анимированной странице, которая будет постоянно находиться в движении, кроме этого реагировать на курсор мыши и выполнять действия. Задумка состоит во создании земли и самолета который постоянно будет находиться в планировании, при движении курсора самолет будет менять свою позицию. Смотрится такой интерактив очень круто и приятно.
Как скрыть длинный текст на сайте на jQuery
Дек 1
Иногда требуется срыть часть текста на сайте не только ради оптимизации места на сайте, но и для правильной СЕО оптимизации. В данном уроке мы хотим показать замечательный способ, с помощью которого Вы сможете это реализовать. Речь пойдет о замечательном плагине jQuery, а именно moreContent.js. Кто не знает, то это jQuery плагин, который скрывает переполненные содержимым контейнер и создает кнопку-переключатель в конце его.
Как создать карточную сетку на Flexbox и CSS Grid
Ноя 21
В последнее время использование карточного шаблона стало весьма популярным среди разработчиков, но не все функции CSS могут нам помочь в реализации данного приема, по этому нам понадобиться Flexbox и CSS Grid. Благодаря их свойствам мы сможем реализовать замечательную карточную сетку, которая будет адаптивная и трансформироваться с плавной анимацией. Все это выглядит очень привлекательным для посетителя, никаких резких анимаций и странных переходов. Очень удобно для предварительного осмотра постов.
Эффект масок для изображений с помощью CSS
Мар 15
Ранее мы уже публиковали уроки про различные маскирующие эффекты, основанные на свойствах SVG. На этот раз мы воспользовались прозрачностью PNG, чтобы увеличить масштаб маски. Если вы хотите изменить цвет масок форматов .png, вы можете легко сделать это в Photoshop (или любом другом графическом редакторе), применив цветное наложение ко всему слою изображения. Если вы планируете создавать свои собственные маски, обратите внимание, что этот эффект работает только в том случае, если в самом центре маски пустое пространство.
Захватывающий видео-шаблон для сайта на JS
Мар 7
В данном уроке мы хотим рассмотреть достаточно красивый видео-эффект для сайта. Который заключается в трансформации видео с плавной анимацией. В результате данной анимации видео впишеться в мобильный телефон, с дальнейшим проигрыванием в заданном месте. В последнее время, мы натолкнулись на пару веб-сайтов с подобным эффектом. Мы попытались создать нечто подобное, в виде простого шаблона.
Интерактивные hover-эффекты для сайта на JS
Дек 10
Прежде всего, мы бы хотели пояснить, для тех, кто не знает, что такое hover-эффекты, мы немного объясним. Это различные виды эффектов (всплывающие подписи, подсказки, плавные переходы, трансформация, ротация, увеличение, смещение.) применяемые к элементам веб-сайта при наведении на них курсора мыши. Реализованы эти эффекты могут как с помощью различных плагинов jQuery, так и на чистом CSS3. Сегодня мы хотели бы поделиться некоторыми экспериментальными эффектами при наведении курсора мыши.
Загрузка ...