Waypoints + SVG

Watch a video that explains how to use waypoints then implement waypoints on a website with an SVG graphic.

Fork & clone

Start the lesson by forking and cloning the jquery-waypoints-svg repository.

Fork & clone the “jquery-waypoints-svg” repo.

The repository will have some starter files to get you on your way and include requirements for Markbot so you can be sure you’ve completed the lesson.

  1. Fork, clone & Markbot

    This includes some starter code that you can get by forking and cloning the repository. You’ll use Markbot to double check everything is done properly.

1 Using waypoints

Watch this video on implementing waypoints on a website.

2 Create a waypoints animation

Using the files in the forked & cloned repository, implement the necessary JavaScript to make the waypoints work.

Make the prehistoric creatures be invisible by default then become visible when they scroll into view.

Drop it into Markbot & submit

Drop the final, coded exercise into Markbot and fix all the errors until Markbot gives you all green (and maybe a little yellow).

After you’ve fixed all the problems, go ahead and submit the assignment. You’ll immediately get your grade.

  1. Submit

    Whenever you’ve passed all Markbot’s specific tests go ahead and submit this lesson for marks.