Плавная смена картинок css: Плавная смена картинок при наведении курсора

Автоматическая смена картинок на CSS. Смена изображений по таймеру

Автоматическая смена картинок при помощи CSS до недавнего времени была невозможной. Если была такая потребность, то делалось это исключительно силами JavaScript.  JavaScript — это язык программирования, который специально создавался для того, чтобы анимировать веб-страницы. До его прихода в веб-разработку, веб-страницы были статичными и не обладали современной динамикой. 

Проблема  JavaScript в том, что этот язык немного сложнее чем CSS, плюс его скрипты больше нагружают браузер пользователя.   CSS «легче», поэтому если есть возможность для простой анимации воспользоваться силами  CSS, то лучше это сделать.

Автоматическая смена картинок — это вид простой анимации, где необязательно применять возможности JavaScript. Поэтому сегодня мы покажем как можно наладить смену изображений, используя возможности  CSS.

Смена картинок с помощью  CSS

Смена картинок с помощью  CSS может быть реализована несколькими методами.

Сегодня мы покажем 2 вариации  автоматизации. Любую из них вы сможете использовать у себя на сайте, доработав под собственные нужды.

Первое с чего нужно начать — это разметка HTML. У нас она такая:

 <div>

<img src=»first.jpg» />

<img src=»second.jpg» />

</div>

Прежде чем заняться анимированием картинок, нужно им задать определенные стили. В нашем случае они такие:

.imgContainer {

position:relative;

height:300px;

width:500px;

margin:10 auto;

}

 

.imgContainer img {

position:absolute;

left:0;

-webkit-transition: opacity 2s ease-in-out;

-moz-transition: opacity 2s ease-in-out;

-o-transition: opacity 2s ease-in-out;

transition: opacity 2s ease-in-out;

}

После того как основные стили были заданы, можно реализовать смену картинок с помощью CSS. Стили будут такими:

@-webkit-keyframes myImgAnimation {

 

0% {

opacity:1;

}

40% {

opacity:1;

}

50% {

opacity:0;

}

100% {

opacity:0;

}

}

 

@-moz-keyframes myImgAnimation {

0% {

opacity:1;

}

40% {

opacity:1;

}

50% {

opacity:0;

}

100% {

opacity:0;

}

}

 

@-o-keyframes myImgAnimation {

0% {

opacity:1;

}

40% {

opacity:1;

}

50% {

opacity:0;

}

100% {

opacity:0;

}

}

 

@keyframes myImgAnimation {

0% {

opacity:1;

}

40% {

opacity:1;

}

50% {

opacity:0;

}

100% {

opacity:0;

}

}

 

#imgСontainer img. firstImg {

-webkit-animation-name: myImgAnimation;

-webkit-animation-timing-function: ease-in-out;

-webkit-animation-iteration-count: infinite;

-webkit-animation-duration: 6s;

-webkit-animation-direction: alternate;

 

-moz-animation-name: myImgAnimation;

-moz-animation-timing-function: ease-in-out;

-moz-animation-iteration-count: infinite;

-moz-animation-duration: 6s;

-moz-animation-direction: alternate;

 

-o-animation-name: myImgAnimation;

-o-animation-timing-function: ease-in-out;

-o-animation-iteration-count: infinite;

-o-animation-duration: 6s;

-o-animation-direction: alternate;

 

animation-name: myImgAnimation;

animation-timing-function: ease-in-out;

animation-iteration-count: infinite;

animation-duration: 6s;

animation-direction: alternate;

}

На этом первый вариант смены картинок с помощью CSS закончен. По факту мы имеем  две картинки, которые будут непрерывно заменять друг друга через каждые 6 секунд. По сути это и есть реализация анимации по таймеру.  Кода CSS на первый взгляд покажется много, но это потому что пока мы вынуждены писать практически один и тот же код, но для разных браузеров. Если оставить только общий CSS-код, то в разных браузерах стили могут отображаться с искажением. Надеемся, что в скором времени это исправят и можно будет писать единственные стили под разные браузеры. 

Давайте рассмотрим еще одну реализацию схемы картинок с помощью CSS. На этот раз возьмем три картинки. У нас получится вот такая HTML-разметка:

<div>

<img src=»first.jpg» />

<img src=»second.jpg» />

<img src=»third.jpg» />

</div>

Обратите внимание, что в этом случае HTML-разметка немного отличается от первого варианта и выглядит немного проще.  

Стили CSS будут такими:

@keyframes myImgAnimation {

  0% { opacity: 0; }

  12.12% { opacity: 1; }

  35.35% { opacity: 1; }

  45.45% { opacity: 0; }

  100% { opacity: 0; }

}

 

. imgContainer { position:relative; width:70%;}

. imgContainer img { position:absolute; width:100%; left:0; right:0; opacity:0; animation-name: myImgAnimation; animation-duration: 10s; animation-iteration-count: infinite; }

. imgContainer img:nth-child(1) { animation-delay: 0s; }

. imgContainer img:nth-child(2) { animation-delay: 4s; }

. imgContainer img:nth-child(3) { animation-delay: 7s; }

На этом все. Данный код можно самостоятельно немного «подкрутить». Например, можно изменить скорость смены изображений, добавить или убрать изображения и т.  д.

Заключение

Сегодня мы рассмотрели, как реализуется автоматическая смена картинок силами чистого CSS. Вся прелесть CSS в том, что вариантов реализовать автоматическую смену изображений очень много. Если лучше изучить возможности таблицы стилей, тогда в некоторых случаях простой анимации можно не использовать возможности JavaScript, а ограничиваться знаниями CSS. 

Понятно, что чистый CSS-код еще не скоро заменит функциональные возможности JavaScript, но предпосылки к этому есть.

Смена изображений по таймеру — CSS анимация

CSS3

Продолжаем изучать CSS и сегодня попробуем реализовать очень интересную вещь — будем по таймеру менять 2 картинки. Сделать такое на CSS до недавнего времени было просто невозможно. Итак, поехали.

Наш пример по верстке и коду CSS будет мало чем отличаться от статьи о изменении прозрачности при наведении. Верстка остается прежняя.

<div>
<img src="html5.  jpg" />
<img src="css3.jpg" />
</div>

И CSS стили мы не трогаем. Единственное — удаляем блок с hover. В итоге в CSS должны быть описаны следующие стили

#img_container {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}

#img_container img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

А вот теперь самое время заняться наше анимацией. Я не буду подробно расписывать как все это работает, если интересно — пишите в комментариях. Просто приведу конечный CSS код

#img_container {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}

#img_container img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

@-webkit-keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

@-moz-keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

@-o-keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

@keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

#img_container img.
   top {
-webkit-animation-name: cf3FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 5s;
-webkit-animation-direction: alternate;

-moz-animation-name: cf3FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 5s;
-moz-animation-direction: alternate;

-o-animation-name: cf3FadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 5s;
-o-animation-direction: alternate;
<p>animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 5s;
animation-direction: alternate;
}

В итоге мы получим 2 картинки, которые меняются в цикле с эффектом fade каждые 5 секунд. Как изменить этот код по себя думаю понятно. Ну а посмотреть его в работе можно, нажав кнопку ДЕМО.

И еще — для одного из моих проектов потребовалось куча контента. Хорошего контента, seo-оптимизированного. Такой был найден — seo копирайт.

Меток нет. Похожие записи

Запись опубликована в рубрике CSS и все, что связано со стилями. Добавьте в закладки постоянную ссылку.

image-rendering — CSS: каскадные таблицы стилей

Свойство CSS image-rendering устанавливает алгоритм масштабирования изображения. Свойство применяется к самому элементу, к любым изображениям, установленным в других его свойствах, и к его потомкам.

Пользовательский агент будет масштабировать изображение, когда автор страницы указывает размеры, отличные от его естественного размера. Масштабирование также может происходить из-за взаимодействия с пользователем (масштабирование). Например, если естественный размер изображения составляет 100×100 пикселей , , но его фактические размеры 200×200px (или 50×50px ), то изображение будет увеличено (или уменьшено) с использованием алгоритма, заданного параметром image-rendering . Это свойство не влияет на немасштабированные изображения.

 /* Значения ключевых слов */
рендеринг изображения: авто;
визуализация изображения: четкие края;
рендеринг изображения: пиксельный;
/* Глобальные значения */
рендеринг изображения: наследовать;
визуализация: начальная;
рендеринг изображения: вернуться;
рендеринг изображения: обратный слой;
рендеринг изображения: не установлен;
 

Значения

авто

Алгоритм масштабирования зависит от UA. Начиная с версии 1.9 (Firefox 3.0), Gecko использует билинейную передискретизацию (высокое качество).

гладкая Экспериментальный

Изображение должно быть масштабировано с помощью алгоритма, который максимизирует внешний вид изображения. В частности, допустимы алгоритмы масштабирования, которые «сглаживают» цвета, такие как билинейная интерполяция. Это предназначено для изображений, таких как фотографии.

высококачественный Экспериментальный

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

острые края

Изображение масштабируется по алгоритму ближайшего соседа.

пиксельный

Используя алгоритм ближайшего соседа, изображение масштабируется до следующего целого числа, кратного его исходному размеру или равного ему, а затем уменьшается до целевого размера, как для smooth . При масштабировании до целых кратных исходному размеру это будет иметь тот же эффект, что и четких краев .

Примечание: Значения optimizeQuality и optimiseSpeed ​​, представленный в ранней версии (и полученный из его SVG-аналога image-rendering ), определяется как синонимы значений smooth и pixelated соответственно.

 image-rendering = 
 auto | 
 гладкий | 
 высококачественный | 
 пикселей | 
 crisp-edges 

Настройка алгоритмов масштабирования изображения

На практике правила pixelated и crisp-edges можно комбинировать, чтобы обеспечить некоторый запасной вариант друг для друга. (Просто добавьте фактические правила к резервному варианту.) Canvas API может предоставить резервное решение для пиксельный с помощью ручной обработки данных изображения или с помощью imageSmoothingEnabled .

 <дел>
  <изображение
   
    alt="Небольшое фото какого-то бело-желтого цветка на зеленом фоне. Изображение примерно на 33 % меньше размера, в котором оно отображается. Это масштабирование приводит к тому, что изображение выглядит размытым, с заметными размытыми краями между объектами. "
    src="blumen.jpg" />
  <изображение
   
    alt="То же фото, что и предыдущее изображение, которое также масштабируется на ту же величину. Браузеры, которые поддерживают значение пикселизации для свойства рендеринга изображения, отображают изображение как очень пикселизированное. Отдельные пиксели четко видны, а края выглядят более четкими. "
    src="blumen.jpg" />
  <изображение
   
    alt="То же фото, что и предыдущие изображения, которое также масштабируется на ту же величину.  Браузеры, которые поддерживают значение четких краев для свойства рендеринга изображения, отображают изображение как очень пикселизированное. В этих примерах практически нет заметного разница между пиксельной версией и версией с четкими краями».
    src="blumen.jpg" />