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
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”
Amazing! So simple and so cool thank you Thomas. You are great!
Great tutorial! Thank you! I have question about using this with multiple elements. In short, how do I detect the enter and exit of each element? Does it do that automatically using the 'direction' if else statement?
Awesome! Thanks so much for this. I've been banging my head against the wall trying to figure it out and your video was a huge help learning how to properly implement waypoints
Thx Thomas, it's very helpfull for me!
Where did that js-dipper-animate class come from? i'm so confused i triggered the waypoint but the animation i can't seem to do it huhu help please
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?
Excellent tutorial! This immensely helped me!
Thank you for share
I really need this one right now thank you very much
Obrigado cara, realmente, muito obrigado. Me ajudou muito isso. Valeu!
А что если прокрутить с низу вверх ? тогда анимация работает наоборот, исчезает когда не надо. Я очень начинающий разработчк =) Спасибо за урок!
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!
Thanks Thomas. Could you send me some code I could use to make the element slide in from the left, rather than fading in? Paul.
thank you, it was helpful, but how can i use waypoint inside vue2js. thanks
Thank you so much for introducing waypoint to us , I really appreciate it.
Thanks again.
It doesn't work with mobile devices. So don't waste your time
Really Helpful! Thanks!
I was not sure which files import but with your video at 2 min i did resolve my problem , thank you so much !!
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?
Thank you Thomas. I would like to know if this is better than using a scroll event function. In terms of resources.
Sorry for the question but.. what is the plug-in you use for Sublime?
Isn't WOW.js much simpler to use?
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!
Thanks so much! It was very helpful!!
hahaha awesome. thanks. http://codepen.io/drunktuts/full/WxYVmX/
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?
why wont this work?? here is a sample of my jquery:
$(".way").waypoint(function() {
alert("waypoint hit");
});
A very helpful clear instructional step by step tutorial!
Thank you!
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?
awesome tutorial. very helpful, thanks.
Thanks for the tutorial! Could you make another more detailed version of this? This is great to help someone configure it and understand the very basics, but it would be nice to dig in a bit more.
Exactly the kind of video I was looking for. Great tutorial!
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.
Nice tutorial But is waypoint free to use ?
Really helpful. Thats the missing chain to use Waypoints.
Great explanation! This should be made more popular.
Thank you and congrats! 🙂
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.
This is great, I'm using waypoints to trigger analytic events. However this has inspired me to add some waypoint animations too
Thanks for this great tutorial, saved me a lot of headache.
Great intro!
Hey! Nice tutorial indeed. Very informative and easy to understand. Thanks a lot 🙂
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…
Its works, thank You
awesome tutorial