Привет мир!
В прошлый раз, когда я написал статью о создании акрилового эффекта беглой системы. Итак, в ответ на вашу любовь я собираюсь поделиться своим опытом внесения еще одного захватывающего эффекта, называемого «Edge SheeN Effect».
Шин – это полоса света, видимого по краям объектов с глянцевой поверхностью. Этот эффект «Edge Sheen» используется для выделения интерактивных элементов в приложении, которые соседствуют друг с другом. Вы можете увидеть этот эффект в меню «Пуск» и «Командные кнопки» в различных приложениях.
Я так сильно люблю этот эффект. То, что отличает этот эффект от других эффектов выделения, используемых через Интернет, это загорается только к краю (ы) рядом с указателем. И чтобы начать его, полоса движется вместе с мышью. Это так месмеризации! Каждый раз, когда я вижу этот эффект, мои глаза расширяются, мозг покалывают и улыбаются лица. Я играю с таким эффектом каждый раз, когда я замечаю его в приложении. В реальном мире вы можете увидеть этот эффект на каждую рекламу смартфона.
Этот эффект называется «выявить выделение» в свободной системе проектирования.
Как и эффект акрилового материала, я хотел знать, могу ли я сделать это с CSS.
В предварительных исследованиях я посетил документацию по выявлению эффекта подсвечивания для своего рецепта. Казалось простым. Я попробовал это, создав слой плитка и добавил содержательный слой внутри него. Для краевого блеска я использовал градиентные границы для слоя плитка. Я использовал Пограничный источник Собственность для этого. Но я не знал, как переместить градиент с помощью мыши. И делать только границы рядом с видимым указателем, было немного сложно.
Итак, я проверил, смогу ли я найти некоторую помощь в Интернете. После нескольких попыток с разным поисковым термином я нашел этот код ручки Майкл и Шепшун уже реализовал эффект. И пользователь GitHub d2phap пошел еще один шаг вперед и сделал плагин JavaScript для эффекта 😮. Я был только опоздал на вечеринку.
Но ни один из них не объяснил, как они достигли этого эффекта. Используя эту возможность, я объясню вам, как сделать эффект.
Ключ к эффекту состоит в том, чтобы добавить фоновую пластину с радиальным градиентом от белого до прозрачности за содержанием и сделать фоновую пластину немного больше, чем слой содержимого, так что оно выглядит как граница на содержание слоя. Потерпите меня. Позволь мне объяснить.
Я изменил свой предыдущий рецепт, преобразовав слой плитки в фоновую пластину и называл его слоем кромки блеска. Затем я добавил к нему три элемента дочерних контейнеров.
Назад цветной слой для отображения цвета фона элемента.
Условным слоем для отображения эффекта зависания. Я расскажу вам об этом позже.
И содержательный слой для удержания содержимого элемента.
Рецепт Edge Sheen Effect
Я организовал все эти дочерние слои точно в центр слоя блеска шеин с Flexbox. Я уменьшил размеры спины цветного слоя, чтобы слой кромки блеска выглядел как граница заднего слоя цвета.
Чтобы переместить блеск мышью, я отслеживал координаты указателя с помощью события перемещения мыши и переместили положение градиента с ним. Это сделало, похоже на границы, только когда мышь была рядом.
Следующая часть эффекта выявления Highlight – это слабый блеск, который появляется и перемещается с помощью мыши на заднем слое цвета, когда мышь охватывает над элементом. Я достиг этого эффекта, используя находящийся на кабеле, который я добавил заранее. Глянс был создан с той же белой к прозрачному радиальному градиенту, в качестве фона для наводного навеса. С ранее отслеживаемыми координатами мыши я переместил глянец внутри элемента. Используя Mouse Enter и Mouse Оставьте события, я переключил глянец всякий раз, когда мышь переместилась в и выходит из элемента. Вот как это выглядит.
Наслаждаться красотой эффекта «Edge Sheen», несколько интерактивных элементов должны быть рядом друг с другом, используя эффект. Итак, я сделал демонстрацию нескольких элементов в асимметричной решетке. Наслаждаться!
Кроме того, вот демонстрация видео эффекта
Фото Алекс Хусейн от Пэтэльс
дальнейшее чтение
Свободный дизайн – раскрыть выделение , по Майкл – Кодепен.
Microsoft Fluent Design (раскрыть выделение) по Шепшун – Кодепен.
свободно-показать-эффект по d2phap – Github
Оригинал: “https://dev.to/svijaykoushik/hiding-to-reveal-3n11”