WordPress.org

Ready to get started?Download WordPress

Forums

The Welcomizer
Trigger when on Screen (10 posts)

  1. Veftaxop
    Member
    Posted 8 months ago #

    Hello! Great plugin! As the title says I would like to know how to make an event trigger when it appears on screen. For example, my site has a one page theme and I want an image to have an animation the moment it appears on the screen while the user is scrolling. The trigger onScroll does not work so could you suggest something? Thank you in advance!

    http://wordpress.org/plugins/the-welcomizer/

  2. Sebastien Laframboise
    Member
    Plugin Author

    Posted 8 months ago #

    Hi Veftaxop,

    Thank you, you're right about this, I thought about it once. I would propose a code solution, but it's not really the solution unless you're in a hurry.

    Here's what I propose for the next version:

    A new type('other' or 'custom' or perhaps just blank) will be added to elements along with(id, class, name, tag), and it will be possible to write anything, like the word ,window, and much more, and this will make the trigger onScroll functional.

    Is this a good solution?

  3. Veftaxop
    Member
    Posted 8 months ago #

    First of all thank you very much for the response. Secondly, I am actually in a hurry, so any suggestion is welcome. Last but not least, I am very sorry but I didn't understand the solution you propose. To be more specific, by next version you mean that the solution you propose is not possible now, and what do you mean that writing anything will make the on Scroll work? :/ . Thank you in advance for your next reply.

  4. Sebastien Laframboise
    Member
    Plugin Author

    Posted 8 months ago #

    That's fine, don't worry.

    Here is a temporary solution.

    Create your animation as you did, and set the trigger by event to manually.

    Put this code below into the text box of your jQuery animation or other animation, and set the text box to onReady.

    $(window)
            .bind('scroll', function(){
                [put your function name here]
            });

    Under the jQuery textbox, click Functions, and then choose your animation. This will copy the function name at the end of the code, click inside the text box, cut and paste the last line at the right place shown above.

  5. Veftaxop
    Member
    Posted 8 months ago #

    Thank you for your thorough explanation. Could explain to me the scroll function you suggested? Does it get into effect when the user scrolls for the first time or when the user scrolls until the object to be animated is on screen? I appears to me that it is the first. Is it possible to do the second one? Or am I doing something wrong? I am sorry if I am tiring you but it is my first experience with jQuery. Thank you very much.

  6. Sebastien Laframboise
    Member
    Plugin Author

    Posted 8 months ago #

    It is possible to handle this with some of your own variables, but perhaps you should try document instead of window and see if that's what you want.

    $(document).bind('scroll', [put your function name here] );

    We all had a first experience with jQuery, and I am no expert. Any questions or comments are welcomed.

  7. Veftaxop
    Member
    Posted 8 months ago #

    It didn't correct the problem, it appears to be triggered in the first scroll regardless if the object is on screen. Anyway, thank you very much for your help, and if you have any more suggestions please share. :D .Is there anything where I can give you a thumps up or something similar for your support?

  8. Sebastien Laframboise
    Member
    Plugin Author

    Posted 8 months ago #

    I guess that I didn't really understood, I have tested this code, try it and make your adjustment if needed.

    var twiz_scroll = 0;
    
    $(window)
            .bind('scroll', function(){
                if( twiz_scroll == 1 ){
                     [put your function name here]
                }
                twiz_scroll++;
            });
  9. Veftaxop
    Member
    Posted 8 months ago #

    Hello again, this doesn't help no matter what changes I make because it seems that the scroll function returns true in the first scrolling movement. What i need is something like this:

    $(window)
            .bind('<strong>onScreen</strong>', function(){
                     [put your function name here]
            });

    Where onScreen is a function that detects if my element is on screen. I found a js file that return true if the an element is on screen and I uploaded in the library but I cant find it in the options where all the functions can be selected. Thank you for your effort and help.

  10. Sebastien Laframboise
    Member
    Plugin Author

    Posted 8 months ago #

    Alright then. By the way, only built-in Library are integrated in the UI. Any other uploaded Library is supported by the user. If you or anyone else believe that a specific library should be built-in in the plugin, let me know. A new version is coming soon.

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.