Привет, меня зовут Стивен.
Веб-сайт Apple всегда был хорошим способом узнать что-то новое, например, на странице с описанием продукта недавно выпущенного iPhone 12.эффект затухания текста, на этот раз мы расскажем, как достигается этот эффект.
Видеоверсия этой инструкции находится по адресуWOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO, добро пожаловать, нажмите три раза и следуйте!
часть HTML
Откройте редактор CodePen и добавьте заголовок в раздел HTML.
Разделы CSS
Затем вы можете сосредоточиться на части CSS и добавитьbodyселектор, установите цвет фона на черный,marginустановить как0,displayустановить какflex,justify-contentа такжеalign-itemsустановить какcenter,min-heightустановить как100vhдля центрирования содержимого на странице вверх, вниз, влево и вправо. !
тогда присоединяйтесьh1селектор, шрифтfont-familyУстановите на... да, вы угадали,Helvetica.marginа такжеpaddingустановить как0, установлен размер текста48px, цвет белый.
Снова отрегулируйте расстояние между словами,letter-spacingустановить как0.3px.
Тогда ключ здесь, установите фон градиентного цвета,background-imageустановить какlinear-gradient(), градиент градиента75deg, цвет делится на четыре сегмента:
два белых и два полностью прозрачных белых, а затемbackground-size, установленное в горизонтальном направлении300%, вертикальное направление100%.
Здесь это означает, что цвет градиента фона увеличивается в три раза по ширине, а затем мы переходим черезbackground-position-xОтрегулируйте его положение.
0%, вы увидите, что вся строка текста покрыта белым цветом, что эквивалентно градиентному фону, состоящему из0%к33.3%Цвет этого абзаца между:
установить как50%Если да, то это33.3%к66.67%Цвет между ними, так что это градиент от белого к прозрачному:
установить как100%,то есть66.67%прибыть100%цвет между ними. Прозрачный цвет в прозрачный цвет, результат также прозрачный цвет:
Так что нам просто нужно поставить этоbackground-position-x,Зависит от100%динамически меняться на0%, можно добиться эффекта постепенного ввода текста.
Что ж, поняв принцип градиентного цвета, вы можете применять градиентный цвет к тексту. Будуbackground-clipустановить какtext, затем установите цвет самого текста на прозрачныйtransparent.
тогда присоединяйтесьh1:hoverселектор, будетbackground-position-xустановить как0%. Наконец, добавьте настройки перехода анимацииtransition: 2s background-position-x ease-in-out.
Проверьте это, теперь вы можете сделать этот эффект затухания текста:
Если вы хотите, чтобы этот эффект постепенного появления срабатывал только при прокрутке страницы, мы можем внести некоторые изменения.
Срабатывает при прокрутке страницы
Сначала добавьтеclassпо имениstickyиз<div>, с этим заголовком:
затем вbodyв селекторе убериflex, установите высоту страницы, например.3раз,300vh.
Присоединяйся.stickyселектор, наборpositionдаsticky,topда0, то есть когдаstickyэто<div>сверху страницы0pxЗапускается вверху страницы. высота установлена на100vh,displayустановить какflex,justify-contentа такжеalign-itemsустановить какcenter:
В разделе JavaScript добавьтеdocument.addEventListener()Слушайте события прокрутки страницыscroll, а затем создайте переменную, которая будетdocument.documentElement.scrollTopПоделить наscrollHeightминусclientHeight, так что этоscrolledКогда страница прокручивается до конца,1, при прокрутке вверх0:
Тогда как обновлять при прокруткеbackground-position-xШерстяная ткань? Присоединяйсяconst h1, назначенный какdocument.querySelector('h1')Будуh1Вернись. черезh1.style.setProperty(),настраивать-percentage, это наш обычайCSSимя переменной, установленное значение${scrolled * 100}%:
В разделе CSS добавьте:rootселектор, инициализировать-percentageдля0%,Потомbackground-position-xустановить какcalc(100% - var(--percentage)),Будуtransitionа такжеh1:hoverудалены настройки:
Давайте посмотрим на завершенный эффект этого случая
Это все для этого эпизода.
Пожалуйста, обратите вниманиеМинимальный класс CodingStartup:
- Станция Б:space.bilibili.com/451368848
- YouTube: YouTube.com/кодирование начало…
- Самородки:Талант /user/249773…