Javascript effects: waypoints




Using waypoints on our website: Javascript will detect a specific scroll location and trigger a function.

Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/javascript-effects/

Original source


44 responses to “Javascript effects: waypoints”

  1. Thanks for your tutorial. I still have a little issue with my waypoints. I'm working with some fade-in texts. When I refresh the page, the waypoints are some sort of disabled and the text is shown right away. Only when I'm resizing the window, the waypoints are working. Do I have forgotten some code, maybe some for the window?

  2. А что если прокрутить с низу вверх ? тогда анимация работает наоборот, исчезает когда не надо. Я очень начинающий разработчк =) Спасибо за урок!

  3. Thomas, this tutorial was massively helpful, thank you so much! I can tell that Waypoints is exactly what I need to build this project I'm working on. But sadly, I can't even get the script to run in the first place, so I am pressed against the door and I can see inside, but I can't get in!

    Can I ask your help? I'm working on this project: and it just keeps giving the error that says "Uncaught TypeError: Cannot read property 'each' of undefined"

    If you have a moment, it would be so appreciated! I am a noob and I'm tired of banging my head against the keyboard!

  4. Thanks Thomas. What if you had a page that scrolled left and right rather than up and down and wanted to activate an animation in a similar way? Can this be modified to accommodate this, or do you recommend a different solution?

  5. Question, what if you dealing with multiple divs going down a page and lets say you want to change the background color for each individual one, do you need to set an offset for each one or is there a more efficient way of doing it? great video!

  6. Nice tutorial ! Work fine for me but i've a little problem. Maybe you can help me. I set the offset, but when i refresh the page in a different position from the top (example half page), the script starts running from that position, and 30% is no longer relevant. How can i resolve it?

  7. Great tutorial, I'll definitely use it in my future projects! I do have a request for a tutorial. I'd like to make a website where you have several sections on the website and where the browser will scroll to when you scroll up or down. Something like the "smooth scrolling" tutorial, but then as scrolling up or down as the input. I've seen it done before, is it really hard? Could you maybe make a tutorial on it?

  8. Hey Thomas. Loved your short, simple, yet helpful tutorial. As of this writing,I will probably have been dabbling with jquery/js for one or two days. Just doing this for fun but it is so interesting. I had a question but it was answered when I visited the link you provided. Thank you so much.

  9. really helpful. im an upcoming professional Webdesigner and pretty familiar with html5/css3 but im struggling at the Moment with jquery/JS. im always glad if i find such nice tutorials like this.

  10. THANK YOU SO MUCH. Normally when I try things out I just copy and paste code and see how it works. For some reason their documentation didn't make sense to me, but after this video, everything clicked. I guess I need to start learning some JS now and stop copying pasting things and learn by trail and error…

Leave a Reply