Я работал над своим сайтом последние несколько недель и хотел придать ему немного динамизма.
Эта статья не о создании веб-страницы.
Покажу готовые фрагменты с пояснениями.
3D-анимация с использованием JS.
Первая хитрость — замечательный 3D-эффект в JS.
Как видите, при наведении указателя мыши на эту «карточку» элементы внутри нее становятся трехмерными.
Как это сделано Сначала создается HTML-div:
Здесь у нас есть основной класс (карточка) и два других класса внутри карточки (заголовок и информация).<div class="card"> <div class="header"> <img src='image.png' alt="изображение"> </div> <div class="info"> <h1 class="title"><a href=" https://hackerone.com/hensis ">Hackerone</a></h1> <h3>Started on 6/20 Signal : 5.67 Reputation : 360 Impact : 26.25</h3> </div> </div>
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 variables
const card = document.querySelector(".
card"); const title = document.querySelector(".
title"); const header = document.querySelector(".
header img"); const description = document.querySelector(".
info h3");
// Animate In
card.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 Out
card.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)";
});
- Объявите свои переменные.
- Создайте два прослушивателя событий для карты.
- В mouseenter переместите Z на 3 пикселя для заголовка, заголовка и описания.
Вы также можете решить, вращать эти элементы или нет (rotateZ).
- В событии mouseleave верните все в норму.
Конечно, сейчас сыро.
Вы можете добавлять CSS повсюду, чтобы изменить ширину, цвет и т. д.
Откройте для себя Vanta.js для фоновой анимации
Устали от статичных цветов и изображений на фоне вашей веб-страницы? ВантаДжс создан, чтобы оживить ваш фон:
Как это сделано Это довольно просто.
Добавьте следующий код в свой HTML: <script src=" https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js "></script>
<script src=" https://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 Глобус для htmlid. Vanta.js имеет 13 готовых фонов.
Чтобы переключиться между ними, измените VANTA.GLOBE на VANTA.[Backgroundname].
Разумеется, перед этим нужно добавить соответствующий cdn.jsdelivr.net/npm/vanta@latest/dist/vanta .
[имя фона].
min.js.
ПрокруткаПоказать
Для тех, кто не знал об этой фантастической JS-библиотеке: ПрокруткаПоказать может отображать элементы при прокрутке веб-страницы:
Как это сделано
- Добавьте в заголовок вашего HTML.
- В JS-файле напишите:
ScrollReveal().
reveal('.
htmlclass',{ delay: 400 })
Код будет отображать элемент класса .
htmlclass с задержкой 400 мс при прокрутке страницы.
Изменение размера и цвета букв
Этот небольшой трюк CSS действительно впечатляет, если его правильно использовать:
Как это сделано Создайте несколько новых HTML-элементов диапазона и укажите их класс:
<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. Например, я также применил его к своей контактной форме: 
свойство анимации
Мы дополнили материал описанием свойств от статьи Крис Койер.Свойство анимации в CSS можно использовать для анимации многих других свойств CSS, таких как цвет , фоновый цвет , высота , или ширина .
Каждая анимация должна быть определена с помощью @keyframes, который затем вызывается с использованием свойства анимации, например: .
element {
animation: pulse 5s infinite;
}
@keyframes pulse {
0% {
background-color: #001F3F;
}
100% {
background-color: #FF4136;
}
}
Каждое правило @keyframes определяет, что должно происходить в определенных точках анимации.
Например, 0% — это начало анимации, а 100% — конец.
Этими ключевыми кадрами можно управлять либо с помощью свойства сокращенной записи анимации, либо с помощью его восьми подсвойств, чтобы обеспечить больший контроль над ключевыми кадрами.
Дочерние ресурсы
- анимация-имя: объявляет имя правила @keyframes, которым нужно управлять.
- анимация-длительность: продолжительность одного цикла анимации.
- анимация-время-функция: устанавливает предопределенные кривые ускорения, такие как легкость или линейность.
- анимация-задержка: время между загрузкой элемента и началом последовательности анимации ( интересные примеры ).
- анимация-направление: устанавливает направление анимации после цикла.
Его значение по умолчанию сбрасывается каждый цикл.
- анимация-итерации-счет: сколько раз анимация должна быть выполнена.
- анимация-fill-mode: устанавливает, какие значения применяются до/после анимации.
Например, вы можете установить, чтобы последнее состояние анимации оставалось на экране, или вы можете настроить его на переключение обратно после начала анимации.
- анимация-воспроизведение-состояние: пауза/воспроизведение анимации.
@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 |
легкость, легкость выхода, легкость входа, легкость выхода, линейный, кубическое Безье(x1, y1, x2, y2) (например, кубическое Безье(0,5, 0,2, 0,3, 1,0)) |
animation-duration |
Хс или Хмс |
animation-delay |
Хс или Хмс |
animation-iteration-count |
Икс |
animation-fill-mode |
вперед, назад, оба, ни одного |
animation-direction |
обычный, альтернативный |
animation-play-state |
пауза, бег, бег |
Несколько шагов
Если ваша анимация имеет одинаковые свойства начала и конца, полезно разделить значения 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;
}
Производительность
Анимация большинства свойств это проблема с производительностью , поэтому мы должны быть осторожны, прежде чем анимировать какое-либо свойство.Однако есть определенные комбинации, которые можно безопасно анимировать:
- трансформировать: транслировать()
- преобразование: масштаб()
- преобразование: вращать()
- непрозрачность
Какие свойства можно анимировать?
На МДН есть список свойств CSS, которые можно анимировать .Они, как правило, представляют собой цвета и цифры.
Примером неанимационного свойства является фоновое изображение.
Больше информации
- Анимация на MDN .
- Использование CSS-анимации .
- Анимация в W3C .
- Джанк-перебор для улучшения производительности рендеринга .
- Веб-анимация в действии .
- Пять способов адаптивной анимации .
- Скачки состояний, отрицательные задержки, исходная анимация и многое другое.
. - Запуск CSS-анимации на полпути .
Поддержка браузера
Данные о поддержке браузера взяты с сайта.Могу ли я использовать , где можно получить более подробную информацию.
Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Стол
| Хром | Fire Fox | И.
Е.
|
Край | Сафари |
| 4* | 5* | 10 | 12 | 5.1* |
| Андроид Хром | Андроид Фаерфокс | Андроид | iOS Сафари |
| 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; }
}
Такие трюки подойдут для того, чтобы вдохнуть жизнь в ваш сайт-визитку или сайт любимого проекта, над которым вы работаете.
Если у вас есть какие-то свои хитрости, советую поделиться ими в комментариях.
И не забудьте про промокод ХАБР , что дает дополнительную скидку 10% к указанной на баннере.
- Профессиональная подготовка в области науки о данных
- Обучение аналитика данных
- Профессия Java-разработчик
- Профессия Frontend-разработчик
- Профессия: технический хакер
- Профессия C++-разработчик
- Профессия Разработчик игр на Unity
- Профессия iOS-разработчик с нуля
- Профессия Android-разработчик с нуля
КУРСЫ
- Курс «Python для веб-разработки»
- Продвинутый курс «Машинное обучение Pro + Deep Learning»
- Курс машинного обучения
- Курс «Математика и машинное обучение для науки о данных»
- Курс анализа данных
- Курс DevOps
-
Ebay: Преимущества Покупок На Ebay
19 Oct, 24 -
Поиск Звуков Из Научной Фантастики
19 Oct, 24 -
Определение Пола По Истории Навигации
19 Oct, 24 -
Аср «Запрос-Биллинг»
19 Oct, 24
