Animated background in slider

Asked on October 29, 2015 in How To.

I am working on http://drsteyn.co.za/DentalImplants/ (WIP at the moment – very rough!)

I would like to ideally have an animated background image in the slider – I was looking at a CSS animation with 3 images that fade in and out in the same place (before and after images). Would it be best to get a plugin to do this, or is it possible to do so using CSS? I am looking at Cloud slider and Animated Content.

Kind regards
Chantal

Chantal Layers User
Reply
  • Possible Answers to Your Question:

  • 1 Answer(s)
    Answered on October 29, 2015.

    Hi there,

    This is tough with CSS because it takes more work than it is worth to load a sprite image in the featued image space, size its container with CSS, set the background position, then apply all the animation and background position resets.  The slider itself is an animation tool, for instance you create three slides, each with a different featured image, then set the slider to auto-slide in the interval you want your animation to take and use the fade slide effect.  There are extensions that are definitely better suited for advanced slides, Master Slider is a good free one. Layers Essential Addons has an advanced Layers slider that may do what you;re looking for (You can find it on the Extension tab under Marketplace in WordPress)

    Another way  to achieve this in the stock slider  is with animated gifs or cinemagraph jpgs.

    Thanks – overcomplicating things as usual 🙂 back to the late nineties 🙂

    on October 30, 2015.
    Reply