Allow CSS3 animations on the caption via update to jquery.flexslider.js #865

Closed
wants to merge 2 commits into
from

Conversation

Projects
None yet

To allow CSS3 animations on the caption every time a slide is changed, I removed the caption paragraph from the DOM and reattached in. This allows users to add CSS3 animations such as slide ins directly to the caption and it ensures it will work with every slide change.

http://jsfiddle.net/fastone/u2Kfa/

Fastone45 added some commits Oct 1, 2013

@Fastone45 Fastone45 Update jquery.flexslider.js to allow CSS3 animations on the caption
To allow CSS3 animations on the caption every time a slide is changed, I removed the caption paragraph from the DOM and reattached in. This allows users to add CSS3 animations such as slide ins directly to the caption and it ensures it will work with every slide change.
939decf
@Fastone45 Fastone45 Corrected spelling error: slide instead of clide in notes of controlNav 43c78be

dyaa commented Oct 9, 2013

So i'll be able to use animation.css with it !!

but can you please tell me how i'll be able to reattach it in

Does it using jQuery .html() !!

Thanks for the interest Dyaa!

If you're using the standard flexslider html code, these changes should detach and reattach the object for you. To utilize the changes, you just need to add CSS animation to the .flex-caption class. Here's a good explanation of the problem and solution this provides: http://css-tricks.com/restart-css-animation/

It uses jQuery detach() and appendTo() to detach and reattach the object with the flex-caption class inside the object with the flex-active-slide class (the currently active slide).

For clarification (here is a JSFiddle: http://jsfiddle.net/fastone/u2Kfa/ ):

A simple way to see this update in action would be to:

  1. Add captions to your slides with a paragraph with the .flex-caption class inside the li.

  2. Add some CSS3 animation to your caption like this:

.flex-caption {
position: relative;
-webkit-animation: slideIn;
-moz-animation: slideIn;
-o-animation: slideIn;
animation: slideIn;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}
@-webkit-keyframes slideIn { 0% { left: 9%; opacity: 0; }
100% { left: 0; opacity: 1; } }
@-moz-keyframes slideIn { 0% { left: 9%; opacity: 0; }
100% { left: 0; opacity: 1; } }
@-o-keyframes slideIn { 0% { left: 9%; opacity: 0; }
100% { left: 0; opacity: 1; } }
@Keyframes slideIn { 0% { left: 9%; opacity: 0; }
100% { left: 0; opacity: 1; } }

  1. Use the updated JavaScript file. (Without the updated JS file, you will notice that the first two steps cause the animation to run when the page is first loaded but each of the following slide loads won't trigger the animation.)

A working example of what Ryan has done can be found here:

http://flexslider.mykeargyle.com/

Ryan and I have worked closely together on adding some extra options to the Flex Slider, this has been the result. I have an "out of the box" zip file that is basically plug and play. Some minor styling changes will be required for your specific projects but it's basically drag and drop, ready to go.

Great example Myke! I like the styling and additional HTML layers you added.

dyaa commented Oct 13, 2013

It's awesome man 👍

Thank you !

i think that @woothemes will have to merge it !

Thank you so much:)

This was much needed, well for me it was ;)

There is a problem when you use more than one slide on a page. It will just keep creating flexi-caption div and resulting slowing the computer. It seems it runs into a unlimited loop and makes you computer crush.

Instead of doing this, you can just apply the animation in your css like this.

.flex-active-slide .flex-caption {
max-width: 320px;
position: relative;
-webkit-animation: slideIn;
-moz-animation: slideIn;
-o-animation: slideIn;
animation: slideIn;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}

Thanks for the support @dyaa and @andrewandrei

dyaa commented Dec 5, 2013

@woothemes what about to merge ?

Owner

mattyza commented Dec 5, 2013

We’ll explore merging this during our next development cycle. :)

Matt Cohen
Chief Product Officer at WooThemes

http://woothemes.com/
http://matty.co.za/

On Thursday 05 December 2013 at 1:46 PM, Dyaa Eldin Moustafa wrote:

@woothemes (https://github.com/woothemes) what about to merge ?


Reply to this email directly or view it on GitHub (woothemes#865 (comment)).

Is it possible to do this for Flexslider WP plugin? I do not see any options to add it :]

Owner

mattyza commented Jan 9, 2014

Which WordPress plugin are you referring to, Aaron? WooSlider? :)

Matt Cohen
Chief Product Officer at WooThemes

http://woothemes.com/
http://matty.co.za/

On Thursday 09 January 2014 at 5:02 AM, Aaron Hall wrote:

Is it possible to do this for Flexslider WP plugin? I do not see any options to add it :]


Reply to this email directly or view it on GitHub (woothemes#865 (comment)).

Sorry yes. Wooslider. :)

Aaron Hall
Sent from my MacBook Wheel

On Jan 9, 2014, at 1:56 AM, Matty notifications@github.com wrote:

Which WordPress plugin are you referring to, Aaron? WooSlider? :)

Matt Cohen
Chief Product Officer at WooThemes

http://woothemes.com/
http://matty.co.za/

On Thursday 09 January 2014 at 5:02 AM, Aaron Hall wrote:

Is it possible to do this for Flexslider WP plugin? I do not see any options to add it :]


Reply to this email directly or view it on GitHub (woothemes#865 (comment)).


Reply to this email directly or view it on GitHub.

Owner

mattyza commented Jan 10, 2014

We’ll explore this in a future release, sure. I’d like to examine the optimisation and load time implications before we merge or commit to anything. :)

Matt Cohen
Chief Product Officer at WooThemes

http://woothemes.com/
http://matty.co.za/

On Thursday 09 January 2014 at 8:35 PM, Aaron Hall wrote:

Sorry yes. Wooslider. :)

Aaron Hall
Sent from my MacBook Wheel

On Jan 9, 2014, at 1:56 AM, Matty <notifications@github.com (mailto:notifications@github.com)> wrote:

Which WordPress plugin are you referring to, Aaron? WooSlider? :)

Matt Cohen
Chief Product Officer at WooThemes

http://woothemes.com/
http://matty.co.za/

On Thursday 09 January 2014 at 5:02 AM, Aaron Hall wrote:

Is it possible to do this for Flexslider WP plugin? I do not see any options to add it :]


Reply to this email directly or view it on GitHub (woothemes#865 (comment)).


Reply to this email directly or view it on GitHub.


Reply to this email directly or view it on GitHub (woothemes#865 (comment)).

wiznia commented Jan 17, 2014

Just to clarify, this addition will not work if you have more than one slider on the page since it targets every element that has the flexslider class!

Avik-B commented Feb 14, 2014

wow, nice one thnx guys, keep it up :)

This is great but can it be made to only work on a specified slider? I have two instances of Flexslider on a page and the CSS caption animation is triggered when either slider transitions.

As per the request by @kimruddock above, here's some more robust code to allow this to work with multiple flexsliders per page.

var our_slideinner = $(slider).find(".flex-active-slide .slide-inner" )
var caption = $(slider).find(".flex-active-slide .slide-inner .flex-caption" ).detach();
caption.appendTo(our_slideinner);

Let me know if you'd like me to branch this for you.

Is it possible to use a custom animation for the changing between images? What would it take? Is the slide and fade animation javascript?

pencroft commented Apr 4, 2014

Hi Fastone / all,

Thanks v much for this, in the past I must confess I have mainly leeched from github without actually signing up for an account, but your post prompted me to finally start giving something back as I think I might be (nearly) getting good enough to make a decent contribution sometimes!!

The issue I found with your idea was that the append() function was obviously dropping the caption back to the end of the div, but I only wanted to slide one element in a series. So it was getting dropped at the bottom instead of the middle where it was originally.

So I replaced the detach() and append() with a single line:
$( ".flex-active-slide .flex-caption" ).replaceWith( $( ".flex-active-slide .flex-caption" ) );

And that seems to work a treat. With some additions I think I will get it to let you say slide the first line of a caption in from the left and the second from the right or whatever. Worth pursuing? And have I missed something that will ultimately lead to my destruction? :)

pencroft commented Apr 4, 2014

I'm going with:
$( ".flex-active-slide .flex-caption" ).each( function () { $(this).replaceWith($(this)); } );

If anyone wants to correct me about how inefficient that is, be my guest!!
This way, you could have say [div class='flex-caption slideinleft'] and < [div class='flex-caption dropintop'] or as many as you like for each slide. Have got it working with animate.css so the possibilities for animations are extensive.

I am currently recreating the much more complex layer sliders they use on a lot of themeforest templates these days like Slider Revolution and Layerslider but with much simpler code / fewer data controls and flex slider. Am doing a demo site now, if anyone is interested when I'm finished I will post the link.

pencroft,
how are you adding that code into flex slider.js?
like this (including the code above for multiple slideshows)?

var our_slideinner = $(slider).find(".flex-active-slide .slide-inner" )
var caption = $( ".flex-active-slide .flex-caption" ).each( function () { $(this).replaceWith($(this)); } );

I'd love to see how you are replacing layer slider with flex slider and css3 animations. Please include a link to your demo site!

actually you don't have to edit the javascript . you just can easily add css animation for it. because when slider go to the next slide, it would add class named "flex-active-slide" on the active list. so you could set css, for example :

.flex-active-slide .flex-caption {
position: relative;
-webkit-animation: slideIn;
-moz-animation: slideIn;
-o-animation: slideIn;
animation: slideIn;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}

I agree with @iwatchallit . No need to modify the .js file for flex slider to create caption animations. I was able to get css animation or transition to work by simply adding .flex-active-slide .flex-caption and turning off css in the slider settings.

i.e.: http://madmen6raphics.com/clients/aguas/

also please note I applied a cloning fix to my .js file that was creating a clone before the first image of my slider.

cloning fix: kty/FlexSlider@067bdde

I changed the js and css given by Fastone, the animation works only for the first title, other titles are not animating. Can you please inform, how to apply animation for flex caption like layerslider?

jeffikus closed this Apr 1, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment