Русский
Русский
English
Статистика
Реклама

Перевод Трюки CSS и JavaScript, которые вдохнут жизнь в ваш статический сайт

Последние несколько недель я работал над своим сайтом и хотел придать ему некоторый динамизм. Эта статья не о создании веб-страницы. Я покажу готовые сниппеты с объяснениями.




3D-анимация на JS


Первый трюк замечательный трёхмерный эффект на JS.


Как видите, когда указатель мыши проходит по этой карточке, элементы внутри нее обретают трёхмерность.

Как это делается

Сначала создаётся HTML div:

<div class="card">  <div class="header">    <img src='image.png' alt="image">  </div>  <div class="info">    <h1 class="title"><a href="http://personeltest.ru/aways/hackerone.com/hensis">Hackerone</a></h1>    <h3>Started on 6/20 Signal : 5.67 Reputation : 360 Impact : 26.25</h3>  </div></div>

Здесь у нас есть основной класс (card) и два других класса внутри card (header and info). Header будет классом, содержащим изображение (в нашем примере логотип Medium), а info будет содержать текст в карточке. Теперь давайте добавим CSS, чтобы карта выглядела лучше.

.card {    transform-style: preserve-3d;    min-height: 64vh;    width: 20vw;    border-radius: 30px;    padding: 0rem 5rem;    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2), 0px 0px 50px rgba(0, 0, 0, 0.2);}

Здесь я объявил высоту, ширину, границу, отступ и тень. Обновите страницу, и вы увидите результаты. Последний шаг добиться 3D-эффекта при наведении курсора мыши на карту. Для этого я воспользовался JS:

// declaring variablesconst card = document.querySelector(".card");const title = document.querySelector(".title");const header = document.querySelector(".header img");const description = document.querySelector(".info h3");// Animate Incard.addEventListener("mouseenter", (e) => {  card.style.transition = "none";  title.style.transform = "translateZ(3px)";  header.style.transform = "translateZ(3px) rotateZ(0deg)";  description.style.transform = "translateZ(3px)";});// Animate Outcard.addEventListener("mouseleave", (e) => {  card.style.transition = "all 0.5s ease";  card.style.transform = `rotateY(0deg) rotateX(0deg)`;  title.style.transform = "translateZ(0px)";  header.style.transform = "translateZ(0px) rotateZ(0deg)";  description.style.transform = "translateZ(0px)";});

  1. Объявите переменные.
  2. Создайте два прослушивателя событий для card.
  3. В mouseenter переведите Z на 3 пикселя для title, header и description. Вы также можете решить, вращать эти элементы или нет (rotateZ).
  4. По событию mouseleave верните всё в нормальное состояние.

Вот и все: у вас есть красивая трёхмерная анимация. Конечно, сейчас она сырая. Можно везде добавить CSS, чтобы изменить ширину, цвет и т. д.

Откройте для себя Vanta.js для анимации фона


Устали от статичных цветов и изображений на фоне веб-страницы? VantaJs разработана, чтобы оживить фон:



Как это делается

Это довольно просто. Добавьте в HTML такой код:

<script src="http://personeltest.ru/aways/cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script><script src="http://personeltest.ru/aways/cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script><script>  VANTA.GLOBE({  el: "#htmlid",  mouseControls: true,  touchControls: true,  gyroControls: true,  minHeight: 200.00,  minWidth: 200.00,  scale: 1.00,  scaleMobile: 1.00  })</script>

Это установит фон Vanta.js Globe для идентификатора htmlid.
В Vanta.js есть 13 готовых фонов

Чтобы переключаться между ними, измените VANTA.GLOBE на VANTA.[Backgroundname]. Конечно, перед этим нужно добавить соответствующий cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.[backgroundname].min.js.

ScrollReveal


Для тех, кто не знал об этой фантастической библиотеке JS, ScrollReveal может отображать элементы при прокрутке веб-страницы:



Как это делается

  1. Добавьте в заголовок вашего HTML.
  2. В файле JS напишите:

ScrollReveal().reveal('.htmlclass',{ delay: 400 })

Код отобразит элемент с классом .htmlclass с задержкой 400мс при прокрутке страницы.

Изменение размера и цвета букв


Этот небольшой трюк с CSS действительно впечатляет при правильном использовании:



Как это делается

Создайте несколько новых HTML-элементов span и укажите их класс:

<span class="change">T</span><span class="change">e</span><span class="change">s</span><span class="change">t</span>


3. Применяя CSS :hover, мы изменяем размер букв и их цвет:

.blast:hover {    color:#08fdd8;    font-size: 30px;}

Теперь, когда вы наведёте указатель на буквы, вы увидите, как они меняют размер и цвет. Чтобы добиться еще более динамичного эффекта, я предлагаю создать отдельный класс для каждой буквы с разными размерами и цветами. Кроме того, вы можете применить CSS :hover к каждому типу элемента в HTML. Например, я тоже применил его к своей контактной форме:



Свойство animation


Дополнили материал описанием свойства из статьи Криса Койера.

Свойство animation в CSS можно использовать для анимации многих других свойств CSS, таких как color, background-color, height, или width. Каждая анимация должна быть определена с помощью @keyframes, которое затем вызывается с помощью свойства animation, например:

.element {  animation: pulse 5s infinite;}@keyframes pulse {  0% {    background-color: #001F3F;  }  100% {    background-color: #FF4136;  }}


Каждое правило @keyframes определяет, что должно происходить в определённые моменты анимации. Например, 0 % это начало анимации, а 100 % её конец. Этими ключевыми кадрами можно управлять либо с помощью сокращённого свойства animation, либо с помощью его восьми подсвойств, чтобы обеспечить больший контроль над ключевыми кадрами.

Подсвойства


  • animation-name: объявляет имя правила @keyframes, которым нужно управлять.
  • animation-duration: продолжительность одного цикла анимации.
  • animation-time-function: устанавливает предустановленные кривые ускорения, такие как ease или linear.
  • animation-delay: время между загрузкой элемента и началом анимационной последовательности (интересные примеры).
  • animation-direction: устанавливает направление анимации после цикла. Его значение по умолчанию сбрасывается в каждом цикле.
  • animation-iteration-count: сколько раз должна быть выполнена анимация.
  • animation-fill-mode: устанавливает, какие значения применяются до/после анимации.
    Например, вы можете установить последнее состояние анимации так, чтобы оно оставалось на экране, или можете настроить его на переключение назад, когда анимация началась.
  • animation-play-state: приостановить/воспроизвести анимацию.

Затем эти подсвойства можно применять так:

@keyframes stretch {  /* declare animation actions here */}.element {  animation-name: stretch;  animation-duration: 1.5s;   animation-timing-function: ease-out;   animation-delay: 0s;  animation-direction: alternate;  animation-iteration-count: infinite;  animation-fill-mode: none;  animation-play-state: running; }/*  is the same as:*/.element {  animation:     stretch    1.5s    ease-out    0s    alternate    infinite    none    running;}


Вот полный список значений, которые может принимать каждое из этих вложенных свойств:

animation-timing-function ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0))
animation-duration Xs или Xms
animation-delay Xs или Xms
animation-iteration-count X
animation-fill-mode forwards, backwards, both, none
animation-direction normal, alternate
animation-play-state paused, running, running


Несколько шагов


Если анимация имеет одинаковые начальные и конечные свойства, полезно разделять запятыми значения 0 и 100 % внутри @keyframes:

@keyframes pulse {  0%, 100% {    background-color: yellow;  }  50% {    background-color: red;  }}


Несколько анимаций


Вы можете разделить значения запятыми, чтобы также объявить несколько анимаций в селекторе. В приведённом ниже примере мы хотим изменить цвет круга в @keyframe, одновременно перемещая его из стороны в сторону с помощью другого свойства.

.element {  animation:     pulse 3s ease infinite alternate,     nudge 5s linear infinite alternate;}


Производительность


Анимация большинства свойств является проблемой производительности, поэтому мы должны соблюдать осторожность перед анимацией любого свойства. Однако есть определённые комбинации, которые можно безопасно анимировать:

  • transform: translate()
  • transform: scale()
  • transform: rotate()
  • opacity

Какие свойства можно анимировать?


На MDN есть список свойств CSS, которые могут быть анимированы. Они имеют тенденцию быть цветами и числами. Пример неанимируемого свойства - background-image.


Поддержка браузерами


Эти данные о поддержке браузера взяты с сайта Caniuse, где имеется более подробная информация. Число означает, что браузер поддерживает функцию в этой версии и выше.

Настольные
Chrome
Firefox
IE
Edge
Safari
4*
5*
10
12
5.1*

Мобильные
Android Chrome
Android Firefox
Android
iOS Safari
87
83
4*
6.0-6.1*

Префиксы


Хотя поддержка этого свойства в современных браузерах достаточно хороша, мы, возможно, захотим поддерживать как можно больше старых браузеров. В этом случае нужно использовать префиксы поставщиков:

.element {  -webkit-animation: KEYFRAME-NAME 5s infinite;  -moz-animation:    KEYFRAME-NAME 5s infinite;  -o-animation:      KEYFRAME-NAME 5s infinite;  animation:         KEYFRAME-NAME 5s infinite;}@-webkit-keyframes KEYFRAME-NAME {  0%   { opacity: 0; }  100% { opacity: 1; }}@-moz-keyframes KEYFRAME-NAME {  0%   { opacity: 0; }  100% { opacity: 1; }}@-o-keyframes KEYFRAME-NAME {  0%   { opacity: 0; }  100% { opacity: 1; }}@keyframes KEYFRAME-NAME {  0%   { opacity: 0; }  100% { opacity: 1; }}


Такие трюки подойдут для того, чтобы вдохнуть жизнь в ваш сайт-визитку или сайт пет-проекта, над которым вы работаете. Если у вас есть какие-то свои трюки призываю делиться ими в комментах. И не забывайте о промокоде HABR, который дает дополнительную скидку 10% к той, что указана на баннере.

image



Источник: habr.com
К списку статей
Опубликовано: 17.12.2020 20:07:58
0

Сейчас читают

Комментариев (0)
Имя
Электронная почта

Блог компании skillfactory

Веб-дизайн

Css

Javascript

Программирование

Skillfactory

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru