DEV Community

Cover image for CSS 3D - Scrolling on the z-axis

CSS 3D - Scrolling on the z-axis

Vincent Humeau on March 21, 2019

In this article, we are going to create a small 3D scene, where the user can scroll on the z-axis. You can find the final code of this tutorial o...
Collapse
 
nikkiloef profile image
Nikki Loef • • Edited

I'm trying to make a version with my own content.
But this is not working out.

I added the code of the cards to my CSS.

  Card1
  Card2

But in my .js I now still have the link to the 'film file', if I remove that, my own content shows but the scrolling does not work anymore. Can you tell me what I'm doing wrong?

Collapse
 
vinceumo profile image
Vincent Humeau •

Hey, do you have a link to a repo so I can have a look ?

Collapse
 
nikkiloef profile image
Nikki Loef •

Hee Vincent,
It is online at nikkiloef.com
Thank you for taking a look!

Thread Thread
 
vinceumo profile image
Vincent Humeau •

You need to change your js so you look into the length of your cards instead of the films. You should remove axios as well 😉.

jsbin.com/catogajise/3/edit?html,c...

Thread Thread
 
nikkiloef profile image
Nikki Loef •

Thank you for the help!
And for sharing the knowledge in the first place.

Collapse
 
shiling profile image
Shi Ling •

🤯I'm mind blown, this is amazing! Thanks for sharing!

Collapse
 
vinceumo profile image
Vincent Humeau •

No worries, Thanks for checking it out 😃

Collapse
 
saurier profile image
dead weight •

This effect is amazing. I was wondering if you've figured out a way to "autoscroll" through z-space to anchor links on specific divs. What I've found is that adding anchor links to specific divs does nothing without a js smoothing script, but when the script is added, it will "scroll" to a different location each time, moving back and forth even when the same anchor link is clicked in succession. I've tried changing the order of the scripts and trying lots of different scripts. The scroll behavior is also different between browsers as well as codepen Is scrolling to anchor links just not possible when scrolling through z-space?

Anyways, I appreciate the article and what you've already elaborated, so thanks again. I'd just like to know if you uncovered anything inherent in the js or css that prevents it from working correctly, or if I'm chasing a dead end.

codepen.io/saurier/pen/GRgxqNz

Collapse
 
pedromeireis profile image
pedromeireis •

I have a scene with 68 elements. I updated the CSS with 68 children plus the JS with 68 elements for the Scene Height however, on the 50th div, the following images stay on the background without any position on the "tunnel"

Collapse
 
stseagle profile image
Simone Seagle •

This was awesome! I have the perfect project to use it on. Thank you sir!!

Collapse
 
cw00dw0rd profile image
Chris Woodward •

This a very creative use of css and has a really enjoyable result, thanks for sharing!

Collapse
 
marcelgeo profile image
MarcelGeo •

Wow. This article is for me like CSS sci-fi. Wow.

Collapse
 
ajessee profile image
André •

This is one of the coolest things I have seen. Thanks for sharing this!

Collapse
 
dok11 profile image
Oleg Postoev •

Thats was helpful, thanks!

Collapse
 
michael2401 profile image
Michael •

Awesome, I will try it in my next personal project

Collapse
 
vinceumo profile image
Vincent Humeau •

Looking forward to seeing the result 😀

Collapse
 
uddeshjain profile image
Uddesh • • Edited

Sounds great.

Collapse
 
vinceumo profile image
Vincent Humeau •

Thanks 🤟

Collapse
 
lgraziani2712 profile image
Luciano Graziani •

This so cool!!! I really liked it!

Collapse
 
vinceumo profile image
Vincent Humeau •

Thank you Luciano 😃

Collapse
 
joshsgman profile image
Joshua Goldberg •

Awesome post!