O'Reilly logo

Web Design Blueprints by Benjamin LaGrone

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Setting the left positions

This function will be used to animate the cloud's movement across the viewport by getting the element's left position and adding to it incrementally on each scroll. It receives in the function call the variable's element and increment. In the function, you will first work with the element's style left property using the split method on the string p.

We need to add some failsafe fallback here in case the value is not a number. This could happen if there isn't any value for the style's left property. To verify whether this value is a number, first use the parseInt function on the value you just created and check that it's not NaN (Not a Number). If this logical step passes, return the value of the bounding rectangle's left ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required