Как добавить сюда анимацию?
https://codepen.io/anon/pen/vwNLOb вот такой код, но как сделать чтобы фото менялись плавно?
Дополнительно:
как идея, добавить
img{ transition: all 1s ease-in-out } |
img{ transition: all 1s ease-in-out }
потом по нажатию кнопки сделать у img display: none и далее по событию img.onload поменять display на блок.
Будет эффект затухания, не знаю точно какой вам нужен
Ну как-то так. Набросал на коленке.
.pic { display: inline-block; } .pic img { opacity: 1; transition: opacity 1s linear; } .pic img.invisible { opacity: 0; } button { padding: 1em; } button.active { background: tomato; } |
.pic { display: inline-block; } .pic img { opacity: 1; transition: opacity 1s linear; } .pic img.invisible { opacity: 0; } button { padding: 1em; } button.active { background: tomato; }
document.body.addEventListener('click', e => { if (!e.target.matches('button')) return const img = document.querySelector('.pic img') img.classList.add('invisible') img.ontransitionend = () => { img.onload = () => img.classList.remove('invisible') img.src = e.target.dataset.src document.querySelectorAll('button').forEach(btn => btn.classList.remove('active')) e.target.classList.add('active') } }) |
document.body.addEventListener('click', e => { if (!e.target.matches('button')) return const img = document.querySelector('.pic img') img.classList.add('invisible') img.ontransitionend = () => { img.onload = () => img.classList.remove('invisible') img.src = e.target.dataset.src document.querySelectorAll('button').forEach(btn => btn.classList.remove('active')) e.target.classList.add('active') } })
P.s. недостатком данного кода является то, что загрузка следующей картинки начинается только после того, как первая исчезла. Это можно оптимизировать, но не всёж за Вас решать :-)
А ещё не обязательно каждый раз искать элементы в DOM, если они не динамически генерируются.
- спасибо, еще зеленый я)
- vittallyyaaa, если ответ подходит Вам в качестве решения, то стоит его таковым отметить для других пользователей сервиса. Одни не будут тратить время на ознакомление с вопросом чтобы помочь, другие - когда столкнуться с похожим вопросом более легко найдут решение.
- Вадим, еще вопрос, можно как-то это реализовать с видео? Вместо фото загрузил туда анимации через , изменил скрипт под аидео, но плавно они не меняются
- vittallyyaaa, всё возможно. Но я даже проверять и исправлять не буду, потому что загружать принудительно видео для пользователя это плохая практика. Лучше - загружать постер от видео и кнопку play, по нажатию на которую уже подменять постер на видео.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для добавления анимации на ваш веб-сайт, вам потребуется использовать CSS и возможно JavaScript. Вот несколько способов, как вы можете добавить анимацию на ваш сайт:
1. CSS анимации:
Вы можете использовать CSS ключевые кадры (@keyframes) для создания анимации. Например, вы можете создать анимацию, которая будет перемещать элемент по экрану или изменять его цвет. Вот пример CSS анимации для изменения цвета фона элемента:
@keyframes changeColor { 0% { background-color: red; } 50% { background-color: blue; } 100% { background-color: green; } } .element { animation: changeColor 3s infinite; }
2. CSS transitions:
Вы также можете использовать CSS transitions для добавления плавных переходов между стилями элементов. Например, вы можете создать плавное появление элемента при наведении курсора. Вот пример CSS transitions для этой цели:
.element { transition: opacity 0.5s ease; } .element:hover { opacity: 0.5; }
3. JavaScript анимации:
Если вам нужно создать более сложные анимации, вы можете использовать JavaScript библиотеки, такие как jQuery или GreenSock. Например, вы можете создать анимацию, которая будет масштабировать элемент при клике на него. Вот пример использования jQuery для этой цели:
$('.element').click(function() { $(this).animate({ width: '200px', height: '200px' }, 1000); });
Надеюсь, эти примеры помогут вам добавить анимацию на ваш веб-сайт. Если у вас возникнут дополнительные вопросы, не стесняйтесь задать их.