WordPress.org

Support

Support » Plugins and Hacks » WP Parallax Content Slider » [Resolved] Defining element timings

[Resolved] Defining element timings

Viewing 15 replies - 1 through 15 (of 16 total)
  • Plugin Author wp-maverick

    @wp-maverick

    Hi,
    what browser do you use?

    I’m using Chrome.

    Plugin Author wp-maverick

    @wp-maverick

    OK,
    When you say that “all elements move as one”, is it due to your changes or a bug with the original code?

    Well, all the elements were moving as one before I made any changes. Then I changed the timings under the /* Slide in from the right*/ values, but no change. So I copied the style.css from your demo slider and used that, but still no change.

    Don’t know if it helps but this is the site I’m working on. http://project17.tempoprojects.co.uk/

    Plugin Author wp-maverick

    @wp-maverick

    Timing is entirely managed via the CSS styles.

    Animations are just set with different delays and sometimes with a different length.
    They are launched automatically in “auto switch mode” or when a user clicks on an arrow or a navigation dot.

    Every element in the slide has is own animation, for specific context (eg. element p when slide goes from right to left will use the animation called toLeftAnim2) :

    .da-slide-toleft p {
        -webkit-animation: toLeftAnim2 0.6s ease-in 0.3s both;
        -webkit-animation-name: toLeftAnim2;
        -webkit-animation-duration: 0.6s;
        -webkit-animation-timing-function: ease-in;
        -webkit-animation-delay: 0.3s;
        -webkit-animation-iteration-count: initial;
        -webkit-animation-direction: initial;
        -webkit-animation-fill-mode: both;
    }

    Others slides elements in the same context move faster or slower, and with different delays because in theirs own animations (eg: .da-slide-toleft h2, with the animation toLeftAnim1), CSS values are different:

    .da-slide-toleft h2 {
        -webkit-animation: toLeftAnim1 0.6s ease-in both;
        -webkit-animation-name: toLeftAnim1;
        -webkit-animation-duration: 0.6s;
        ...
        -webkit-animation-delay: initial;
        ....
    }

    NB: this CSS code is not the one in the stylesheet but a summary extracted from Chrome Dev tool to illustrate the example 😉

    Okay. Hopefully that’s enough for me to get it working. I’ll have a play around.

    Thanks.

    Plugin Author wp-maverick

    @wp-maverick

    OK, you must have done something to the JS file because classes on the div.da-slide are not auto-updated correctly.
    To launch animations, a javascript is necessary to change classes on this wrapper. These classes are those you’ll find in the CSS file:

    • .da-slide-toleft
    • .da-slide-toright
    • .da-slide-fromright
    • .da-slide-fromleft

    Okay, I’ll try and figure out what the issue is from there.

    Plugin Author wp-maverick

    @wp-maverick

    OK, let us know 😉

    Initial investigation seems to suggest that there is a conflict with something in the Reverie framework. Just swapped themes with Twentytwelve and the slider is working normally. That’s a bummer since I use Reverie a lot.

    Plugin Author wp-maverick

    @wp-maverick

    hmm,
    If you want, you can be beta tester of the future 1.0 release.
    You’ll have to get the gitHub version (Download as zip):
    https://github.com/jlethuau/wp-parallax-content-slider

    I’ve made a lot of code improvements, especially on JS loading.

    Can you test it with “Reverie” and tell me if it’s better?

    Thanks

    Okay, thanks. I might give that a try.

    It’s definitely a javascript conflict with one of the files in Reverie’s js folder. There are a lot of scripts in there, and some aren’t needed. I’m still working through trying to identify which file(s) cause the conflict. Foundation.min.js could be an issue.

    I’ll keep you posted.

    Good news, the 1.0 release appears to be working just fine with Reverie.

    Nice one, dude.

    Plugin Author wp-maverick

    @wp-maverick

    Great,
    thanks, you are my first beta tester 🙂

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘[Resolved] Defining element timings’ is closed to new replies.
Skip to toolbar