Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

FX

Mottie edited this page · 14 revisions

Sections: Default Options | Using animate.css | FX Builder

Default Options

$('#slider')
  .anythingSlider({
    // slider options
  })
  .anythingSliderFx({
    // FX definitions
    // 'class or ID'  : [ 'predefined-FX', 'distance', 'time', 'easing' ]
  },{
    // FX options
    easing     : 'swing', // Default FX easing
    timeIn     : 400,     // Default time for in FX animation
    timeOut    : 350,     // Default time for out FX animation - when using predefined FX, this number gets divided by 2
    stopRepeat : false,   // When true, the FX will not repeat when clicking on the current navigation tab.
    outFxBind  : 'slide_init',    // When outFx animations are called
    inFxBind   : 'slide_complete' // When inFx animations are called
    dataAnimate: 'data-animate'   // data attribute containing the animate.css class names to add for in and out fx
  });
  • Note: Setting the stopRepeat option to true does the following:
    • FX will not repeat when clicking on the current navigation tab
    • Out FX will not activate on page load (this includes triggering animate.css animation)

AnythingSlider FX using the animate.css library

  • Please refer to the animate.css demo page for a better idea of what's available.
  • As of AnythingSlider version 1.7.21, the FX extension was updated to allow using the animate.css library.
  • When setting up the slider, include the FX extension and the following inline data attribute. Inside the data attribute, the in animation and out animation inside separated by a comma.

    <ul id="slider">
      <!-- data-animate="IN animation, OUT animation" can be applied
           to the panel or ANY element inside the panel -->
      <li data-animate="rotateInDownLeft, rotateOutDownRight"> </li>
      <li data-animate="rotateIn, rotateOut"> </li>
      <li data-animate="flipInX, flipOutX"> </li>
      <li data-animate="rotateInUpLeft, rotateOutUpRight"> </li>
    </ul>

    Initialize the script

    $('#slider')
      .anythingSlider({
        animationTime      : 0,  // no jQuery animation - no sliding left/right
        delayBeforeAnimate : 500 // add delay before switching so you can see the css3 animation
      })
      .anythingSliderFx(
        {},    // no fx animation, it's all css baby!
        {
          dataAnimate: 'data-animate' // data attribute containing the in and out animation.css class names to use
        }
      );

AnythingSlider FX Builder

  • The bookmarklet on this page allows you to run the FX builder on any of your pages that have AnythingSlider.
  • The builder allows you to try out and plan the specific effects (FX) you want to apply to your slider.
  • Add effects to the slider. Test individual or all listed FX live.
  • When building is complete, click the code button and the builder will output the actual FX code to paste inside of the anythingSliderFX options.
  • For more detailed instructions, look at this readme file

More Coming Soon...

Something went wrong with that request. Please try again.