5 ms·
Pure CSS 3D effect
- scorxn 17y agoView Source: http://www.romancortes.com/ficheros/meninas.html http://www.romancortes.com/ficheros/meninas.html Edit: And images: http://www.romancortes.com/ficheros/meninas_sprites.png http://www.romancortes.com/ficheros/meninas_sprites.png http://www.romancortes.com/ficheros/meninas_bg1.jpg http://www.romancortes.com/ficheros/meninas_bg1.jpg Edit 2: http://www.romancortes.com/ficheros/meninas_bg2.jpg http://www.romancortes.com/ficheros/meninas_bg2.jpg
- quizbiz 17y agoWhat about the wall on the right? How did he do that? It's as if it's an animated image, just just changing positions of an image.
- axod 17y agoAs far as I can see, * Create a load of vertical elements, some overlapping. * on each one, have a hover css rule that adjusts the background position of various things. Clever, not sure why it's better than just using javascript though.
- deleted 17y ago[deleted]
- axod 17y ago>> "Because if the elements are images, they can be cached locally or called remotely -- thus speeding up the process of zoom in real-time." Can you explain that a bit more, I don't understand at all what you're saying. CSS: Create a ton of elements to have a :hover style that adjusts the background image positions. JS: use a mouseover handler and adjust the background image positions. No need for all those extra elements and :hover rules. >> "there's nothing that JavaScript can do that CSS can't do better." I'm not really sure if you're joking here or what.
- deleted 17y ago[deleted]
- deleted 17y ago[deleted]
- indiejade 17y agoI'm actually in no position to be arguing this, but it comes up perpetually within communities. I don't have a CS degree, but I've been working with code for . . . well, I don't want to date the age of myself. I don't like JavaScript. It's too garrulous, periphrastic, and it behaves like a puppet "director" attempting to recursively "show" the user where to look or go "next" on a page. Whenever I see JavaScript pages/ Django "hints" I'm like "SHUT UP!" I'm not an idiot. Most people are not as stupid as you're attempting to make them seem with those annoying little "hints." Why not use design and fonts and style to "capture" the imagination and attention of users? Users will get it. CSS can and does this, in a subtle nature. JavaScript wants users to sit through a PowerPoint presentation, shouting at 100X Decibels in their ears at all times, and to direct their hand movements via the mouse. CSS "focus" handlers allows users to navigate at their own pace, the natural flow of code, quietly . . . These are UI issues, but essentially that's the argument that most people who hail on the side of JavaScript take: in reality, they have only an illusion of control. Quote: CSS: Create a ton of elements to have a :hover style that adjusts the background image positions. --- Nope. The easiest way is to create one element identifier: either a #Div or a .Class -- and reference that recursively.
- cmgarcia 17y agoI couldn't read the non-English portion of the post, but I took it only for the face value; being clever. Not necessarily better.
- Semiapies 17y agoI'm pretty sure I've seen this effect elsewhere. (It was off an HN item some months back. It wasn't actually the story, it was just the header on the linked blog.)
- mbrubeck 17y agoProbably this one: http://www.cssquirrel.com/2009/12/04/the-parallax-header-how-i-do-it/ http://www.cssquirrel.com/2009/12/04/the-parallax-header-how...
- Semiapies 17y agoNo, I'm fairly sure the one I saw used a photograph of a road. That is certainly the same effect, though.
- rimantas 17y agoThere were a few which worked on browser window resizing, not mouseover. I think the first one brought to my attention was http://therissingtonpodcast.co.uk/ http://therissingtonpodcast.co.uk/ (footer), then http://www.silverbackapp.com/ http://www.silverbackapp.com/ and http://dromaeo.com/ http://dromaeo.com/
- chaosmachine 17y agoThis is sort of like the internet equivalent of a popup book.
- unalone 17y agoI see nothing wrong with that. More tools means more art means more fun.
- chaosmachine 17y agoI agree.
- diN0bot 17y agoa little while back, possibly through hn, i found an artist who took 2 or 3 still photos simultaneously from different perspectives. kind of like a...dang, i'm failing at google and wikipedia today....you know the camera with two lenses that provides a 3d effect, only that requires looking at each image separately with each eye. the artist in this case turns the two images into an animated gif. spooky cool effect. i'm trying harder to find the link.....(eit) still can't find it!!! a much cooler post by the OP http://www.romancortes.com/ficheros/starry.html http://www.romancortes.com/ficheros/starry.html
- dkokelley 17y agoCould it be http://en.wikipedia.org/wiki/Stereoscopy http://en.wikipedia.org/wiki/Stereoscopy
- bodhi 17y agoI think you're right, and diN0bot was referring to "Wiggle stereoscopy". Here's a few more examples, that to me are more effective than the one on the wikipedia page: http://www.stereomaker.net/sample/ani/ani_e.htm http://www.stereomaker.net/sample/ani/ani_e.htm
- cloudkj 17y agoCool effect. Creating this type of 3D effect for any arbitrary image, however, is much harder since you need to manually splice out individual images and sprites, compute position coordinates, and generate the various CSS3 styles and DOM elements. It would be cool if there was some kind of utility/library to help do this. Also, I'm not quite familiar with all the new features of CSS3. Which CSS3-specific constructs are being used here? Looking at the source, the main things I see are just many hover styles being declared, with specific positions and dimensions.
- nathanwdavis 17y agoI've seen this effect used litely on other sites before to create the perception of depth in a background, but still 2D. This is the first I've seen the technique used to create a 3D view. Very cool!! Check out the source ( http://www.romancortes.com/ficheros/meninas.html http://www.romancortes.com/ficheros/meninas.html ) and you'll see it was no simple task.
- mikeryan 17y agoUse the right tool. This is a cool effect but it can be done very simply in Javascript. The CSS for this is a mess after adding line breaks it's 500+ individual CSS selectors and gads of additional markup to track the position of the cursor. Someone spent a lot of time on this though.
- babyboy808 17y agoIt's just showing what can be achieved in CSS, but I agree, I would use JavaScript for a real world solution.
- gstar 17y agoVery similar to Start3d, http://www.start3d.com http://www.start3d.com - which can apparently generate these images as well as display them for 3d glasses.
- deleted 17y ago[deleted]
- gfodor 17y agoThis is clearly a can and not a should thing -- to all you folks saying "...but Javascript"