Зміна зображень за таймером
CSS3
Продовжуємо вивчати CSS і сьогодні спробуємо реалізувати дуже цікаву річ - будемо по таймеру міняти 2 картинки. Зробити таке на CSS до недавнього часу було просто неможливо. Отже, поїхали.
Наш приклад по верстці і коду CSS буде мало чим відрізнятися від статті про зміні прозорості при наведенні . Верстка залишається колишня.
<Div id = "img_container"> <img class = "bottom" src = "html5.jpg" /> <img class = "top" 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 style = "text-align: center;"> animation-name: cf3FadeInOut; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 5s; animation-direction: alternate; }У підсумку ми отримаємо 2 картинки, які змінюються в циклі з ефектом fade кожні 5 секунд. Як змінити цей код за себе думаю зрозуміло. Ну а подивитися його в роботі можна, натиснувши кнопку ДЕМО.
І ще - для одного з моїх проектів потрібно купа контенту. Гарного контенту, seo-оптимізованого. Такий був знайдений - seo копірайт .
