Learn how to use variables, conditional logic and functions to write flexible JavaScript. Check out my “Get a Developer Job” course: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBE-HALF-OFF
Have you put together a neat page infused with JavaScript awesomeness and want to move it from your computer to online so the world can see your JS chops? I’ve partnered with A Small Orange and can now offer my students 20% savings on any hosting plan. Hint: the shared “Small” plan is one of the best bangs for your buck around! http://p.asmallorange.com/learnwebcode/specialoffer
Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/
Follow LearnWebCode on Twitter for resources and updates:
Tweets by learnwebcode
Link to the example files shown in the video:
Link to the first JavaScript with jQuery lesson:
Note: The reveal effect shown in this lesson is not terribly useful in real world applications. Most tablets and smartphones cannot run code during the middle of a swipe scroll event so the effect will only run seamlessly on traditional computers / laptops. In short, I wouldn’t necessarily use this effect on a production website, but it is a good playground for the sake of learning more about JavaScript variables, functions, and conditional logic.
Also, I recommend not using jQuery’s “animate” method whenever possible. Instead, you can simply use jQuery to add/remove a class at the desired moments, and instead use CSS transitions or animations. We’ll cover this strategy in future lessons. The jQuery animate method is more dependable in older browsers and devices, but the CSS method provides smoother performance.
Finally, we created the “on scroll reveal” functionality in this lesson from scratch as a learning exercise. If, however you’re interested in a more robust and pre-built solution, be sure to search for the existing jQuery plugin named “jQuery WayPoints.”
source
