Time for action – prepping the page for sliding functionality
When scripting is enabled we can enhance the page to add the additional elements that the proximity slider requires. Add the following code to the empty function at the bottom of the HTML page:
var prox = $("#proximity"), scroller = $("<div></div>", { id: "scroller" }), pointerText = "Use your pointer to scroll, moving to the edge scrolls faster!", keyboardMessage = "Use your arrow keys to scroll the images!", message = $("<p></p>", { id: "message", text: keyboardMessage }); prox.addClass("slider").wrapInner(scroller).append(message); var middle = prox.width() / 2; scroller = $("#scroller"); scroller.width(function() { var total = 0; scroller.children().each(function(i, val) { var el ...Get jQuery 1.4 Animation Techniques Beginner's Guide now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
