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

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

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

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

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

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

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

 
 
 
Hackerone
 
Started on 6/20 Signal : 5.67 Reputation : 360 Impact : 26.25
 
 
 

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

Здесь я объявил высоту, ширину, границу, отступ и тень. Обновите страницу, и вы увидите результаты. Последний шаг — добиться 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)"; >); 

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

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

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

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

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

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

ScrollReveal

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

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

ScrollReveal().reveal('.htmlclass',< delay: 400 >)

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

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

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

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

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

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

Теперь, когда вы наведёте указатель на буквы, вы увидите, как они меняют размер и цвет. Чтобы добиться еще более динамичного эффекта, я предлагаю создать отдельный класс для каждой буквы с разными размерами и цветами. Кроме того, вы можете применить 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-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:

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

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

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

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

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

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

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

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

Префиксы

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

.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% к той, что указана на баннере.

Источник

29 Projects To Help You Practice HTML CSS Javascript 2021

Today we will go into learning about UI Page projects to increase design ability and how to apply HTML, CSS, Javascript to actual website development!

Responsive Social Platform UI

You can see the results below.

Fox News Templates

You can see the results below.

Netflix Landing Page Clone

You can see the results below.

Book Store UI

You can see the results below.

Project Management Dashboard UI

You can see the results below.

Microsoft Homepage Clone

You can see the results below.

Task Manager UI with CSS Grid

You can see the results below.

File Sharing Web App

You can see the results below.

Messaging App UI with Dark Mode

You can see the results below.

Booking App UI

You can see the results below.

Job Search Platform UI

You can see the results below.

Skateboard Video Platform

You can see the results below.

Instagram re-design

You can see the results below.

VideoCall App UI

You can see the results below.

Gym Website — Tailwind Starter Kit

You can see the results below.

Task Management Dashboard UI

You can see the results below.

Internal Video Platform UI

You can see the results below.

Gmail Redesign

You can see the results below.

Chat App UI

You can see the results below.

Responsive-Webpage

You can see the results below.

Dashboard Design with Flexbox

You can see the results below.

Services Section

You can see the results below.

Spotify Artist Page UI

You can see the results below.

Twitter Client UI in CSS + HTML

You can see the results below.

Responsive Movie App UI

You can see the results below.

Twitch Redesign Mockup

You can see the results below.

Task Management UI

You can see the results below.

Facebook Profile Page UI Concept

You can see the results below. Related Articles:
HTML Practice Projects for Beginners
Front End Developer Tools
Free Coding Practice Sites

Top comments (17)

3 likes Like Comment button

Men thanks for this amazing resources

3 likes Like Comment button

3 likes Like Comment button

Thank you cool projects, but what about semantic code? No html5 in 2021 year?

3 likes Like Comment button

Amazing job! Nice ideas to practice.

2 likes Like Comment button

2 likes Like Comment button

Wow, this is so good, nice job.

2 likes Like Comment button

Conteúdo muito bom, obrigado

2 likes Like Comment button

2 likes Like Comment button

Great post, Thanks for giving this information.
English to Malayalam typing
Tutubox

2 likes Like Comment button

Holy smokes, where did you find so many great looking designs and the time to code them? The is one of the best collection of designs I’ve seen.

2 likes Like Comment button

1 like Like Comment button

/Sree-Nee/ Aspiring Polymath in Tech & Design. Ask me about Design Systems, Developer Experience, Front-End Engineering or Accessibility.

Excellent curated collection!

1 like Like Comment button

1 like Like Comment button

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

For further actions, you may consider blocking this person and/or reporting abuse

Read next

💨🚀 Accelerate Your Workflow with ChatGPT Prompts 📝 — Ditch the Boilerplate 📃✖️ and Eliminate Duplicates 🔄🚫

ConnectNovu Hackathon 2023

React: A comprehensive Guide to Beginners

File handling 101 in Node Js

More from Niemvuilaptrinh

Once suspended, haycuoilennao19 will not be able to comment or publish posts until their suspension is removed.

Once unsuspended, haycuoilennao19 will be able to comment and publish posts again.

Once unpublished, all posts by haycuoilennao19 will become hidden and only accessible to themselves.

If haycuoilennao19 is not suspended, they can still re-publish their posts from their dashboard.

Once unpublished, this post will become invisible to the public and only accessible to Niemvuilaptrinh.

They can still re-publish the post if they are not suspended.

Thanks for keeping DEV Community safe. Here is what you can do to flag haycuoilennao19:

haycuoilennao19 consistently posts content that violates DEV Community’s code of conduct because it is harassing, offensive or spammy.

Unflagging haycuoilennao19 will restore default visibility to their posts.

DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey.

Built on Forem — the open source software that powers DEV and other inclusive communities.

Made with love and Ruby on Rails. DEV Community © 2016 — 2023.

We’re a place where coders share, stay up-to-date and grow their careers.

Источник