Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • February 8, 2017 at 4:01 am #744166
    alexanderduenchem

    Hey guys,

    im trying to get a Ken Burns effect to work via CSS Keyframe in the FullScreen Slider. I dont want to use the Layerslider because i like the transitions of the Fullscreen slider. Could you please help out? So far i got:

    @keyframes kenburns {
    0% {
      opacity: 0;
    }
    5% {
      opacity: 1;
    }
    95% {
        transform: scale3d(1.5, 1.5, 1.5) translate3d(-190px, -120px, 0px);
        animation-timing-function: ease-in;
        opacity: 1;
    }
    100% {
        transform: scale3d(2, 2, 2) translate3d(-170px, -100px, 0px);
        opacity: 0;
    }
}

    i gave the slider the class “kenslide” so my css is:

     .kenslide .av-single-slide .slide-1  .active-slide img {
      animation: kenburns 20s infinite;}

    Thank you very much!

    February 13, 2017 at 6:31 am #746132
    Vinay

    Hey alexanderduenchem,

    Unfortunately it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However if its really important for you to get this done, you can instead try using the Ken Burns slider or always hire a freelancer to do the job for you :)

    Best regards,
    Vinay

    February 13, 2017 at 7:21 am #746150
    Ismael

    Hey!

    Please try the following css code instead.

    .kenslide .av_slideshow_full .active-slide img {
     animation: kenburns 20s infinite;
 }

 @keyframes kenburns {
    0% {
      opacity: 0;
    }
    5% {
      opacity: 1;
    }
    95% {
        transform: scale3d(1.5, 1.5, 1.5) translate3d(-190px, -120px, 0px);
        animation-timing-function: ease-in;
        opacity: 1;
    }
    100% {
        transform: scale3d(2, 2, 2) translate3d(-170px, -100px, 0px);
        opacity: 0;
    }
}

    NOTE: This is going to work for the Full Width Easy Slider only.

    Cheers!
    Ismael

    February 13, 2017 at 7:42 am #746172
    Ismael

    Hi!

    UPDATE: You can actually apply this in the full screen slider. Please use the following code.

    .kenslide .active-slide {
     animation: kenburns 20s infinite;
}

    Regards,
    Ismael

    February 13, 2017 at 12:04 pm #746327
    alexanderduenchem

    Hi ismael,

    thank you for your reply. I tried the code above – it works, but the whole slide is then zooming (with the heading, text and buttons) i just want the background-image to zoom in.

    Best regards

    February 15, 2017 at 5:58 am #747269
    Ismael

    Hey!

    but the whole slide is then zooming (with the heading, text and buttons)

    Yes, unfortunately, this will affect everything inside the “.active-slide” container including the captions. If you don’t mind, you can use the full width easy slider instead of the full screen slider. Use the first version of the code.

    .kenslide .av_slideshow_full .active-slide img {
     animation: kenburns 20s infinite;
 }

    Regards,
    Ismael

    February 15, 2017 at 10:03 pm #747694
    alexanderduenchem

    Hey Ismael,

    thank you. I would not mind, i tried it with the full width easy slider. Unluckily still there is the same problem on my end: the captions and buttons are zoomed not just the image.

    Best Regards
    Alex

    EDIT: Sorry didnt flushed the cash! We’re already there! Just the image is zooming. But still the image is moving out of the div somehow.

    February 15, 2017 at 10:18 pm #747701
    alexanderduenchem

    Guuuuuuuys I did it! <3

    Made some changes in the css so this is the new code:

    @keyframes kenburns {
    0% {
      opacity: 0;
    }
    5% {
      opacity: 1;
    }
    100% {
        transform: scale3d(1.1, 1.1, 1.1) translate3d(-50px, -120px, 0px);
        animation-timing-function: ease-in;
        opacity: 1;
    }
    
}

.kenslide .av_slideshow_full .active-slide img {
    animation: kenburns 30s infinite;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    -webkit-iteration-count:1;
}

    Thanks for your help. It looks good!

    February 16, 2017 at 9:01 am #747846
    Ismael

    Hi!

    Awesome! Thanks for sharing. :)

    Cheers!
    Ismael

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Ken Bruns Keyframe’ is closed to new replies.