WordPress.org

Ready to get started?Download WordPress

Forums

WP Parallax Content Slider
[resolved] Defining element timings (17 posts)

  1. RichardILD
    Member
    Posted 1 year ago #

    Hey there,

    I'm new to using parallax, and a little confused as to how to get the individual elements (<h2>, <p>, and image) to move in and out at different times. I tried changing values in the CSS, even tried using the style.css from the demo slider at http://jltweb.info/realisations/wp-parallax-content-plugin/. But all elements still move as one. Is there a javascript conflict, perhaps?

    Thanks

    http://wordpress.org/extend/plugins/wp-parallax-content-slider/

  2. wp-maverick
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,
    what browser do you use?

  3. RichardILD
    Member
    Posted 1 year ago #

    I'm using Chrome.

  4. wp-maverick
    Member
    Plugin Author

    Posted 1 year ago #

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

  5. RichardILD
    Member
    Posted 1 year ago #

    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.

  6. RichardILD
    Member
    Posted 1 year ago #

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

  7. wp-maverick
    Member
    Plugin Author

    Posted 1 year ago #

    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 ;)

  8. RichardILD
    Member
    Posted 1 year ago #

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

    Thanks.

  9. wp-maverick
    Member
    Plugin Author

    Posted 1 year ago #

    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
  10. RichardILD
    Member
    Posted 1 year ago #

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

  11. wp-maverick
    Member
    Plugin Author

    Posted 1 year ago #

    OK, let us know ;)

  12. RichardILD
    Member
    Posted 1 year ago #

    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.

  13. wp-maverick
    Member
    Plugin Author

    Posted 1 year ago #

    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

  14. RichardILD
    Member
    Posted 1 year ago #

    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.

  15. RichardILD
    Member
    Posted 1 year ago #

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

    Nice one, dude.

  16. wp-maverick
    Member
    Plugin Author

    Posted 1 year ago #

    Great,
    thanks, you are my first beta tester :)

  17. RichardILD
    Member
    Posted 1 year ago #

    Ooh, I'm honoured. Thank you. :-)

    I'll keep you posted of any new bugs or developments.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.