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

A little slicey transition slider using a simple add class deal.

Wanted to see if I could get this interaction butter smooth, with just css transitions, as oppose to a animation lib like Velocity or GSAP.

Have to smooth out the timings a bit and decide on the best approach for mobile (just stack, add touch events, make images full viewport, etc.

Supports scrollwheel (scroll jacking), nav buttons and arrow keys.

Can also increase the content wrapper to make the images fill viewport in their non animating state, which is kinda cool as well.

Comments

  1. I really like it, it's really nice but scroll wheel not working.

  2. Second what Daniel said above. Scroll wheel no worky but nice work nonetheless! Thank you!

  3. @draison, @pleabargain,

    Ha. It's working for me on OS X trackpad. Are you using an actual mousewheel?

    I though on DOMMouseScroll , MouseWheel would cover both instances on desktop? Would it matter if you reduced the ScrollTreshold var to like 20ish? Maybe debounce instead of using the is-sliding body class to bail?

    Realize I'd have to add some touch events for mobile swipe.

  4. Today it's working fine. I don't understand why this happens.

  5. scroll working on trackpad.

  6. @StephenScaff Problem is here: if (s.delta >= s.scrollThreshold) { ... You are using s.delta as incrementing value while scrollThreshold is static 40. So I need to do 40 scroll-moves to change slide)

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

You must be logged in to comment.
Loading...
Loading...