Как создать анимацию при наведении курсора, чтобы сначала появлялся темный фон на весь экран, а затем, при наведении курсора в радиусе около 400 пикселей, появлялась картинка рядом с курсором? Как реализовано это на первом экране сайта https://brander.ua/, где используется две картинки? Существует ли готовая библиотека для такого эффекта?
Для создания анимации масштабирования изображения можно использовать CSS свойство `transform` и CSS анимации.
Пример кода:
```html
<div class="image-container">
<img src="image.jpg" alt="Image">
</div>
```
```css
.image-container {
position: relative;
width: 200px; /* изначальный размер изображения */
height: 200px; /* изначальный размер изображения */
overflow: hidden;
}
.image-container img {
width: 100%;
height: 100%;
transition: transform 0.5s ease; /* добавляем анимацию */
}
.image-container:hover img {
transform: scale(1.2); /* масштабирование на 20% при наведении курсора */
}
```
Что касается анимации с темным фоном и появлением картинки, можно использовать JavaScript для добавления CSS классов при наведении на определенную область и применения соответствующих стилей.
Создать анимацию при наведении на фон можно с помощью CSS свойств `transition` и `opacity`.
Пример кода:
```html
<div class="image-wrapper">
<div class="background"></div>
<img src="image.jpg" alt="Image" class="hidden">
</div>
```
```css
.image-wrapper {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0; /* изначально невидимый фон */
transition: opacity 0.5s ease; /* добавляем анимацию */
}
.image-wrapper:hover .background {
opacity: 0.4; /* при наведении курсора фон становится видимым */
}
.hidden {
display: none; /* скрываем изображение по умолчанию */
}
.image-wrapper:hover .hidden {
display: block; /* при наведении курсора изображение становится видимым */
position: absolute;
top: 50px; /* нужные координаты корректируйте сами */
left: 50px; /* нужные координаты корректируйте сами */
transition: transform 0.5s ease; /* добавляем анимацию */
}
```
На сайте https://brander.ua/ используется JavaScript для добавления, перемещения и анимации различных элементов.
Существует множество готовых библиотек JavaScript, которые могут помочь в реализации подобных эффектов. Некоторые из них включают:
- Animate.css: https://animate.style/
- GSAP: https://greensock.com/gsap/
- Hover.css: https://ianlunn.github.io/Hover/
Эти библиотеки предоставляют большое количество готовых анимаций, которые могут быть применены к элементам вашего сайта.
mask-image используется для создания маски в форме круга, которая позволяет видеть только определенную часть фоновой картинки. Используйте mask-size для указания нужного размера круга. Создайте скрипт, который будет отслеживать событие mouseover и определять положение курсора, чтобы задать соответствующее положение маски с помощью параметра mask-position. Для плавности можно использовать свойства, такие как плавное увеличение mask-size от нуля до нужного размера и плавное изменение mask-position с помощью анимации. Для совместимости в разных браузерах добавьте свойства mask-* с префиксом webkit. Вы можете посмотреть и использовать все эти свойства на сайте, чтобы адаптировать их под свои нужды.