Background Image

Эффект "живого фото" на CSS3

Script

by — Category Script on

"Живые" фото стали достаточно популярны в последнее время, зачастую прибегают к использованию Gif-анимации, но хорошая картина получится достаточно тяжелой, по этому можно пойти другим путем, и реализовать интересную "живую" фотографию используя при этом исключительно трансформации CSS3.


Разметка HTML 

 <div class="da-container">
  <img class="da-img background" src="изображение" />
  <img class="da-img old-woman" src="изображение" />
  <img class="da-img dying-girl" src="изображение" />
  <img class="da-img standing-girl" src="изображение" />
  <img class="da-img pillow" src="изображение" />
  <img class="da-img spirit" src="изображение" />
</div>

CSS

 .fa-container {
   left: 290px;
  position: relative;
  top: 100px;
  -webkit-transform-origin: 50% 0 0;
  -ms-transform-origin: 50% 0 0;
  transform-origin: 50% 0 0;
  -webkit-animation: fa-photo 12s ease-in-out 2s infinite alternate;
  -moz-animation: fa-photo 12s ease-in-out 2s infinite alternate;
  -ms-animation: fa-photo 12s ease-in-out 2s infinite alternate;
  -o-animation: fa-photo 12s ease-in-out 2s infinite alternate;
  animation: fa-photo 12s ease-in-out 2s infinite alternate;
}
.fa-img {
  position: absolute;
  
}
.fa-img.old-woman {
  -webkit-transform-origin: 165px 320px 0;
  -ms-transform-origin: 165px 320px 0;
  transform-origin: 165px 320px 0;
  -webkit-animation: fa-oldwoman 5s ease-in-out 2s infinite alternate;
  -moz-animation: fa-oldwoman 5s ease-in-out 2s infinite alternate;
  -ms-animation: fa-oldwoman 5s ease-in-out 2s infinite alternate;
  -o-animation: fa-oldwoman 5s ease-in-out 2s infinite alternate;
  animation: fa-oldwoman 5s ease-in-out 2s infinite alternate;
}
.fa-img.spirit {
  zoom: 1;
  filter: alpha(opacity=0);
  opacity: 0;
  -webkit-transform-origin: 560px 260px 0;
  -ms-transform-origin: 560px 260px 0;
  transform-origin: 560px 260px 0;
  -webkit-animation: fa-spirit 10s linear 6s 1 normal;
  -moz-animation: fa-spirit 10s linear 6s 1 normal;
  -ms-animation: fa-spirit 10s linear 6s 1 normal;
  -o-animation: fa-spirit 10s linear 6s 1 normal;
  animation: fa-spirit 10s linear 6s 1 normal;
}
.fa-img.standing-girl {
  -webkit-transform: translate(0, 0) rotate(0) scale(1, 1) skew(4deg, 0);
  -ms-transform: translate(0, 0) rotate(0) scale(1, 1) skew(4deg, 0);
  transform: translate(0, 0) rotate(0) scale(1, 1) skew(4deg, 0);
  -webkit-transform-origin: 90% 100% 0;
  -ms-transform-origin: 90% 100% 0;
  transform-origin: 90% 100% 0;
  -webkit-animation: fa-standing-girl 8s ease-in-out 2s infinite alternate;
  -moz-animation: fa-standing-girl 8s ease-in-out 2s infinite alternate;
  -ms-animation: fa-standing-girl 8s ease-in-out 2s infinite alternate;
  -o-animation: fa-standing-girl 8s ease-in-out 2s infinite alternate;
  animation: fa-standing-girl 8s ease-in-out 2s infinite alternate;
}
/* ************************************* */
/* Animations
/* ************************************* */
@-webkit-keyframes fa-photo {
  0% {
    -webkit-transform: translate(0, 0) rotate(0) scale(1, 1) skew(0, 0);
    -ms-transform: translate(0, 0) rotate(0) scale(1, 1) skew(0, 0);
    transform: translate(0, 0) rotate(0) scale(1, 1) skew(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(-4deg) scale(1, 1) skew(0, 0);
    -ms-transform: translate(0, 0) rotate(-4deg) scale(1, 1) skew(0, 0);
    transform: translate(0, 0) rotate(-4deg) scale(1, 1) skew(0, 0);
  }
}
@-webkit-keyframes fa-oldwoman {
  0% {
    -webkit-transform: translate(0, 0) rotate(0) scale(1, 1) skew(0, 0);
    -ms-transform: translate(0, 0) rotate(0) scale(1, 1) skew(0, 0);
    transform: translate(0, 0) rotate(0) scale(1, 1) skew(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(12deg) scale(1.1, 1) skew(0, -12deg);
    -ms-transform: translate(0, 0) rotate(12deg) scale(1.1, 1) skew(0, -12deg);
    transform: translate(0, 0) rotate(12deg) scale(1.1, 1) skew(0, -12deg);
  }
}
@-webkit-keyframes fa-spirit {
  0% {
    -webkit-transform: translate(0, 0) rotate(0) scale(1, 1) skew(0, 0);
    -ms-transform: translate(0, 0) rotate(0) scale(1, 1) skew(0, 0);
    transform: translate(0, 0) rotate(0) scale(1, 1) skew(0, 0);
    zoom: 1;
    filter: alpha(opacity=0);
    opacity: 0;
  }
  50% {
    -webkit-transform: translate(-20px, -50px) rotate(12deg) scale(1, 1) skew(0, 0);
    -ms-transform: translate(-20px, -50px) rotate(12deg) scale(1, 1) skew(0, 0);
    transform: translate(-20px, -50px) rotate(12deg) scale(1, 1) skew(0, 0);
    zoom: 1;
    filter: alpha(opacity=100);
    opacity: 1;
  }
  90% {
    -webkit-transform: translate(-30px, -90px) rotate(6deg) scale(1, 1) skew(0, 0);
    -ms-transform: translate(-30px, -90px) rotate(6deg) scale(1, 1) skew(0, 0);
    transform: translate(-30px, -90px) rotate(6deg) scale(1, 1) skew(0, 0);
    zoom: 1;
    filter: alpha(opacity=70);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translate(-30px, -100px) rotate(6deg) scale(1, 1) skew(0, 0);
    -ms-transform: translate(-30px, -100px) rotate(6deg) scale(1, 1) skew(0, 0);
    transform: translate(-30px, -100px) rotate(6deg) scale(1, 1) skew(0, 0);
    zoom: 1;
    filter: alpha(opacity=0);
    opacity: 0;
  }
}
@-webkit-keyframes fa-standing-girl {
  0% {
    -webkit-transform: translate(0, 0) rotate(0) scale(1, 1) skew(4deg, 0);
    -ms-transform: translate(0, 0) rotate(0) scale(1, 1) skew(4deg, 0);
    transform: translate(0, 0) rotate(0) scale(1, 1) skew(4deg, 0);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(0) scale(1, 1) skew(-6deg, 4deg);
    -ms-transform: translate(0, 0) rotate(0) scale(1, 1) skew(-6deg, 4deg);
    transform: translate(0, 0) rotate(0) scale(1, 1) skew(-6deg, 4deg);
  }
} 

 ПРОВЕРЕНО!


View demo
Понравился материал?
Поделитесь с друзьями

С этим материалом смотрят:
    Как придать изображению 3d эффект?

    Как придать изображению 3d эфф...

    Небольшой код, который может пригодится в портфолио ...

    View More
    0 434 11:48
    Крутой эффект при наведении на фото

    Крутой эффект при наведении на...

    В уроке речь пойдет о простых, но необычных эффектах...

    View More
    1 391 13:58
    Эффект пульсации или мерцания на CSS3

    Эффект пульсации или мерцания ...

    Данный скрипт очень подойдёт для реалистичности эффе...

    View More
    0 919 13:49
    Таблица изображений с ховер эффектом следования

    Таблица изображений с ховер эф...

     Идея заключается в том, чтобы заставить информ...

    View More
    0 367 15:58
Метки: effect, photo, Live
Feedback: 0

Leave a Comment

Имя *:
Email *:
Код *:
Menu