--- title: "Настройка эффекта наведения для плиток" description: "Как включить и настроить эффект наведения в веб-части Vitextra Smart Tiles: девять эффектов — размытие, яркость, контраст, оттенки серого, поворот оттенка, инвертирование цвета, прозрачность, насыщенность и сепия, — единицы их силы, настройка «Длительность», поведение эффекта при фокусе с клавиатуры и при уменьшенном движении, а также рекомендуемые настройки." url: https://vitextra.com/ru/support/kb/10248 language: ru published: 2026-10-09 modified: 2026-10-10 products: - "Smart Tiles" author: "Lidija Reising" tags: ["эффект наведения плитки SharePoint", "наведение Smart Tiles", "анимация при наведении на плитку", "яркость при наведении плитки", "эффект оттенков серого при наведении", "эффект размытия плитки", "длительность перехода при наведении", "фокус с клавиатуры плитки", "уменьшение движения веб-часть SharePoint", "эффекты Vitextra Smart Tiles"] --- # Настройка эффекта наведения для плиток Как включить и настроить эффект наведения в веб-части Vitextra Smart Tiles: девять эффектов — размытие, яркость, контраст, оттенки серого, поворот оттенка, инвертирование цвета, прозрачность, насыщенность и сепия, — единицы их силы, настройка «Длительность», поведение эффекта при фокусе с клавиатуры и при уменьшенном движении, а также рекомендуемые настройки. ## Введение Плитка, которая реагирует на приближение указателя, сообщает посетителю «это кнопка» ещё до нажатия. [Smart Tiles](https://vitextra.com/ru/products/smart-tiles) предлагает девять таких реакций — от лёгкого затемнения до полного инвертирования цветов, — каждая с настраиваемой силой и временем перехода. В этой статье описаны настройки, действие каждого эффекта и удачные сочетания. ## Включение эффекта 1. Откройте страницу в режиме редактирования и нажмите **Изменить веб-часть**, чтобы открыть область свойств. 2. В группе **Вид** включите **Эффект наведения**. Под переключателем появятся ещё три элемента управления. 3. Выберите эффект в списке **Эффект**. 4. Задайте силу ползунком под списком. Его подпись — **Процент (%)**, **град.** или **пикс.** — зависит от эффекта. 5. Задайте **Длительность** перехода — от 0 до 5 секунд с шагом 0,1. Наведите указатель на плитку на странице, чтобы увидеть результат; настройки применяются сразу. ![Настройки эффекта наведения](https://static.vitextra.com/articles/10248/hover-effect-settings-ru.png) *Настройки эффекта наведения* ## Девять эффектов Эффекты — это фильтры изображения браузера, применяемые ко всей плитке — фону, значку и текстам вместе. По смыслу силы они делятся на две группы. **Эффекты, для которых 100 % — исходный вид.** Меньшие значения уменьшают свойство; плитка возвращается к обычному виду, когда указатель уходит. |::Эффект::|::При меньших значениях::| |:---|:---| |**Яркость**|Плитка темнеет. 70–85 % — классический вид «нажатой» кнопки; 0 % — чёрный.| |**Контраст**|Цвета сглаживаются к серому. 50 % даёт мягкую, выцветшую плитку.| |**Насыщенность**|Цвета блёкнут к серому при сохранении яркости. 0 % — монохромная плитка.| |**Прозрачность**|Плитка становится полупрозрачной, и сквозь неё просвечивает страница. 70–80 % — едва заметно; 0 % делает плитку невидимой.| **Эффекты, для которых 0 % — исходный вид.** Большие значения применяют эффект сильнее. |::Эффект::|::При больших значениях::| |:---|:---| |**Оттенки серого**|Цвета убираются; 100 % — чёрно-белая плитка.| |**Сепия**|Плитка приобретает тёплый коричневатый оттенок; 100 % — плитка полностью в тонах сепии.| |**Инвертирование цвета**|Цвета инвертируются; при 100 % белая плитка становится чёрной, а синий — оранжевым. 20–30 % дают заметное, но не резкое изменение.| **Эффекты с другими единицами.** |::Эффект::|::Единица и поведение::| |:---|:---| |**Поворот оттенка**|Градусы, 0–360. Сдвигает каждый цвет плитки по цветовому кругу: при 180° синий становится оранжевым, а зелёный — пурпурным; 360° — снова исходный вид. Небольшие значения (15–30°) дают живой сдвиг, остающийся в семействе исходного цвета.| |**Размытие**|Пиксели, 0–20. Смягчает плитку; 1–2 px — лёгкая смена фокуса, 5 px и более делают заголовок нечитаемым.| ![Девять эффектов при типичной силе](https://static.vitextra.com/articles/10248/nine-effects-ru.png) *Девять эффектов при типичной силе* Сила для каждой единицы запоминается отдельно: переключение с **Яркость** 70 % на **Поворот оттенка** и обратно восстанавливает 70 %. ## Длительность **Длительность** — это время, за которое плитка переходит от обычного вида к эффекту — и обратно, когда указатель уходит. При 0 изменение мгновенное; 0,2–0,4 с ощущается отзывчиво; всё, что больше 1 с, кажется медленным для навигации. Переход выполняется в обе стороны, поэтому плитка никогда не «отскакивает» назад. ## Клавиатура и специальные возможности Эффект применяется не только под указателем, но и когда плитка получает **фокус с клавиатуры**, поэтому посетители, перемещающиеся клавишей Tab, получают ту же обратную связь, что и пользователи мыши. Когда в операционной системе включено уменьшение движения — *Уменьшить движение* в macOS и iOS, отключённые *Эффекты анимации* в Windows, — переход пропускается: эффект по-прежнему появляется, но мгновенно, без анимации. 📝 **Заметка** Эффекты задаются для каждой веб-части отдельно. Две веб-части Smart Tiles на одной странице могут использовать разные эффекты, а одна из них — вовсе никакого. ## Рекомендуемые настройки - **Выбор по умолчанию:** Яркость 80 %, Длительность 0,2 с. Работает на цветных плитках, на фотографиях и в тёмных темах. - **Сдержанно, для монохромных панелей:** Контраст 60 % или Насыщенность 40 %, Длительность 0,3 с. Плитка под указателем смягчается, не меняя цвета. - **Игриво:** Поворот оттенка 20°, Длительность 0,4 с. Плитка сдвигается к соседнему оттенку и обратно. - **Плитки с фотографиями:** Прозрачность 85 % или Яркость 75 %; Размытие 1 px даёт смену фокуса, похожую на объектив. - **Избегайте** инвертирования цвета и поворота оттенка с большими значениями на плитках с фирменными цветами — плитка под указателем покажет цвета, которые не являются вашими. ❗ **Важно** Эффект меняет всю плитку, включая текст. Убедитесь, что заголовок остаётся читаемым при выбранной силе — Яркость ниже 50 % или Прозрачность ниже 60 % делают белый текст на тёмной плитке трудночитаемым именно в тот момент, когда посетитель собирается нажать. 💡 **Совет** Остальные настройки группы **Вид** описаны в статье [KB10042. Как добавить и настроить веб-часть Smart Tiles](https://vitextra.com/ru/support/kb/10042). Подробнее о продукте: