Курс
Анимация в вебе
5. Ховер на карточках и плитках
Лекции
1
Базовая теория веб-анимации
2
Анимация появления в обложке
3
Анимация появления карточек или списков
4
Ховер эффект на кнопке
5
Ховер на карточках и плитках
6
Фиксация текста при скролле
7
Составление элемента из разных частей
8
Зацикленная анимация нескольких элементов
9
Движение элементов в разных направлениях по скролу
10
Перемещение элементов вдоль экрана по скролу
11
Анимация текста
12
Появление элемента из прозрачности
13
Фиксация элементов по скролу
14
Зацикленное вращение элемента
15
Изменение размера элементов при скроле
16
Эффект бегущей строки
17
Параллакс эфект элементов при скроле
18
Параллакс эфект элементов при движении мыши
19
Появление изображения при наведении на текст
20
Появление фото в колонке при наведении на текст
21
Появление элемента при наведении на текст
22
Появление карточки при наведении на фото
23
Выделение текста при наведении на него
24
Действия при клике и наведении на один элемент
25
Анимация нескольких элементов при клике на текст
26
Появление карточек при клике на заголовок
27
Замена формы кнопки при ховере
28
Появление карточек при ховере
Войти
Ховер эффект на карточках и плитках
Ховер эффект на карточках и плитках делает страницу интерактивной и помогает управлять вниманием пользователя
ПОПУЛЯРНЫЕ ПРИЕМЫ ХОВЕР ЭФЕКТА ДЛЯ КАРТОЧЕК И ПЛИТОК
Улучшает читабельность текста на изображении при наведении
Акцентирует внимание на карточке, добавляет интерактивность
Текст не перебивает изображение и появляется только при наведении
Добавит интерактивность и привлечет внимание зрителя
Делает карточку интерактивной, подходит для демонстрации товаров
Добавляет интерактивность и управляет вниманием зрителя
Появление тени
Затемнение фильтра
Появление контента
Изменение масштаба
Смена изображения плитки
Смещение карточки
Наведите на плитки, чтобы увидеть анимацию появления контента при наведении
I nostri corsi riguardano:
Fotografia
Calligrafia
Sviluppo della VR
Il contenuto si vede passando il mouse
Animazione dal basso
Aumenta mentre si passa il mouse
Velocità - veloce
Filtro colore #000000
Opacità - 100-80%
Carte - Blocco TE100
Animazione in hover
Наведите на карточки, чтобы увидеть появление тени при ховере
Possiamo realizzare le vostre idee
Ricerchiamo
Possiamo stimare le opportunità della vostra azienda, esplorare il vostro stato economico, analizzare l'accesso dei veicoli e il traffico pedonale.
Sviluppiamo strategie
Sviluppiamo la concezione principale di un'azienda in base al suo obiettivo, sviluppiamo strategie di vantaggio competitivo.
Creiamo concetti di business
Sviluppiamo la strategia, la concezione e l'ideologia del progetto, vi offriamo un'idea urbanistica.
Animazione dell'ombra al passaggio 20px
Opacità 10%
Без сдвига
Servizi - Bloccare SV202
Animazione durante il passaggio del mouse
Ховер эффект - смещение
изображения карточки
Stampa
Corsi di yoga
Massaggio e SPA
I servizi del nostro salone
Cura della pelle
Passare il mouse su
Evento - Al passaggio del mouse
Durata 0,1
Spostamento x/y - 0/-15
Нулевой блок
Пошаговая анимация
Наведите для замены изображения в карточке при ховере
Una nuova collezione
Forza maggiore nero
Maglietta Gracechapel
Forza maggiore bianco
Настройки блока
Выбрано "Показывать второе изображение при наведении"
Магазин - блок ST300
Анимация при наведении
Наведите на плитки, чтобы увидеть анимацию затемнения фильтра
Progetti in portafoglio
Collezione estiva di zine
Fotografia
Контент виден при наведении
Увеличение при наведении
Скорость - быстро
Цвет фильтра #1b1680
Прозрачность - 100-100%
Плитка и ссылка - Блок TE100
Анимация при наведении
Наведите для анимации увеличения или уменьшения карточки
Marchio e pacchetto
Lettering per i marchi
Casi di portafoglio
Acqua salata. Zin per la rivista SLV
Evento - Al passaggio del mouse
Durata 0,3
Scala 93%
Нулевой блок
Пошаговая анимация
ВИДЕО УРОК
Как повторить анимацию в редакторе Тильды
Tilda education
Зарегистрируйтесь, чтобы перейти к оплате
Войти через Тильду
Другие способы входа
Войти через VK
Войти через Google
Авторизуясь, вы принимаете условия
Пользовательского соглашения