0

necesito poder agregar un efecto cuando cada ciertos segundo cambia la imagen, para que el cambio no sea tan notorio, algún capo que me orientar!

lo que hace esta función es cambiar de imagen cada 5 segundos y es en el cambio que necesito pode aplicar algún tipo de efecto

    var contador=0;
function rotarImagenes(){
    var com = data.length-1;
    if(contador > com){
        contador = 0;
    }
    $('.home_banner_area .box_1620').css({
        "background": 'url("'+data[contador].img_slider+',"',
        'background-size': 'cover',
        'min-height': '650px',
        'border-radius': '12px',
        'position': 'relative',
        'bottom': '-120px'
     })

    contador++;
    }

 onload=function(){
    rotarImagenes();
    setInterval(rotarImagenes,5000);
}
1
  • puedes agregarlo a la propiedad transition a tu css
    – Bryro
    Commented el 17 dic. 2019 a las 16:33

1 respuesta 1

0

Hola podrías agregar a tu css este código(sirve para el efecto).

    .flip-scale-2-ver-right {
    -webkit-animation: flip-scale-2-ver-right 0.5s linear both;
            animation: flip-scale-2-ver-right 0.5s linear both;
     }

@-webkit-keyframes flip-scale-2-ver-right {
  0% {
    -webkit-transform: translateX(0) rotateY(0) scale(1);
            transform: translateX(0) rotateY(0) scale(1);
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
  }
  50% {
    -webkit-transform: translateX(50%) rotateY(-90deg) scale(2);
            transform: translateX(50%) rotateY(-90deg) scale(2);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  100% {
    -webkit-transform: translateX(100%) rotateY(-180deg) scale(1);
            transform: translateX(100%) rotateY(-180deg) scale(1);
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
  }
}
@keyframes flip-scale-2-ver-right {
  0% {
    -webkit-transform: translateX(0) rotateY(0) scale(1);
            transform: translateX(0) rotateY(0) scale(1);
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
  }
  50% {
    -webkit-transform: translateX(50%) rotateY(-90deg) scale(2);
            transform: translateX(50%) rotateY(-90deg) scale(2);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  100% {
    -webkit-transform: translateX(100%) rotateY(-180deg) scale(1);
            transform: translateX(100%) rotateY(-180deg) scale(1);
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
  }
}

Y luego en tu JS deberia aplicarle la clase css de esta manera. O intenta en otro lugar de tu js, pero la idea es agregarle la clase .flip-scale-2-ver-right. Como sigue

$('.home_banner_area .box_1620').addClass('flip-scale-2-ver-right');
$('.home_banner_area .box_1620').css({
    "background": 'url("'+data[contador].img_slider+',"',
    'background-size': 'cover',
    'min-height': '650px',
    'border-radius': '12px',
    'position': 'relative',
    'bottom': '-120px'
 })

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.