cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
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

Often fixed elements can feel a bit unnatural I wanted to give a bit more weight to the floating object. I tried to capture the momentum feeling of natural browser scrolling. This also doesn't interfere with the default page scroll so there is no 'scroll jacking' going on here.


  1. Strange behavior in Microsoft edge.

  2. @Cristian_H033 Thanks Mate, thats good to know. I don't have a PC to test it on. Its really tricky to get things like this to work consistently.

  3. I think this is a real annoying effect. Last time I was on a page with a similar effect I really started to get in rage as I could not concentrate on the content because of this effect. Sorry, well done, but please don't put such effects on your or your customers pages.

  4. @Aybee I think it depends on the personality of the brand that uses it. Sure it might not be appropriate for everyone but it could be a creative addition to a energetic or playful brand.

  5. @Aybee Thanks for your feedback. In a way I agree and I think designers can often get caught up in flashy effects and forget they can be distracting and frustrating if not used sparingly. Anything which messes with the way scroll feels will have a very hard time keeping everyone happy. I do have to agree with @hey-nick though that for certain brands or experiences this would fit in well and add something. Design is never good or bad without context. I'm glad this started a bit of a conversation!

  6. Very nice effect, I think for sure this is a brand thing like @hey-nick said, definitely not something you might wanna put with a lot of text cam be hard to focus on reading. However great for call to action buttons, brand styles and pictures! Awesome stuff!

  7. Great looking, smooth and elegant effect. It could be annoying of course but as you said we have to consider it in a context. What about IPhone? Does it work on it? As I know there is a problem with scroll animation on that platform.

  8. @Arredatore No mobile support included in this. I cant really see any way to get this to work well on mobile so If it was me I would just disable it with media queries and a window size check in the javascript. Mobile scroll implementation dosen't really lend itself well to effects. If anyone has any ideas I would love to hear them.

    P.S. Just checked this on mobile and it is pretty hilariously broken.

  9. That pretty well works on my android though :)

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

You must be logged in to comment.