css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

So I thought it was about time I made a better version of my most popular pen.


  1. Dear JP Nothard,

    What you have designed is incredible, however, I have one request. it is possible that you could make something that works the same for images? I've tried to convert what you already have into something that works via image, but I am terribly hopeless! Thank you in advance.


  2. Hey Buddy. thanks for this snippet. Would you include some text color transformation? I tried by me self but I don't have enough knowledge to do that successfully .THX

    check this example. they add/remove a custom class to do this: http://dunked.com/

  3. This is a great pen. I'm pretty novice with Javascript, so where can you add the 'scrollOffset' in your updated JS? Or what can you use to add a scrollOffset?

  4. Hi, could anyone please advise how I would be able to use this on a wordpress page? (I don't want to embed a shortcode. I would like to implement this on on of the pages on a wordpress site) Thanks a lot in advance! Niki

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.