Pure CSS Apple TV parallax effect (picturepan2.github.io)

6 years ago from Yan Zhu

8 comments

Thomas Michael Semmler, 6 years ago
"pure CSS" - requires 5 additional divs.
jk its nice.
2 points
Matt D. Smith, 6 years ago
Pretty sweet! Could be made even smoother with some easing on the gradients and adding more hit area for top middle, right middle, bottom middle, and left middle. Regardless—love it.
1 point
- Yan Zhu, 6 years ago
  Thank you. Yes, I think it is a tradeoff between smoothness/fidelity and code complexity. At least it works without JS. Anyone can improve it.
  Btw, more Pure CSS components are coming to Spectre.css.
  1 point
Joe Baker, 6 years ago
Looks like it's popping out of my screen. Nicely done, but as others have stated. Really could use some easing.
0 points
Chase Giunta, 6 years ago
This is great, but I'm not sure "parallax" is the right term to use here...?
0 points
Nic Trent, 6 years ago
Where's the CSS though?
0 points
- Yan Zhu, 6 years ago
  Source code. https://picturepan2.github.io/spectre/css/spectre-exp.css
  1 point
- No Name, 6 years ago
  I just hacked it together in a CodePen:
  http://codepen.io/arixking/pen/EWKzvR
  1 point

Now playing