It has been a long time since I last posted. But that doesn’t mean I haven’t created stuff in the mean time. For this post I have a 3D Product Display system. A simple menu on the left handed side and thumbnails in a 3D space on the right. Each link in the menu can represent multiple thumbnails. I’ll teach you how you can make something like this, but will not go into great detail on how the 3d space was created. I am saving that for another post.

You can see the final result on: My codepen

Clicking a link

When you click on a link in the left menu, it will of course light up. Just like a normal link would do. But it also raises certain thumbnails on the right side. This means that each link has a set of thumbnails it is associated with. There are multiple ways you could accomplish this, even without JavaScript. I choose to include jQuery as the project that this initially was going to be used in already had it loaded.

How can we tell the links in the menu what thumbnail to raise?

If you can count to 10, this step would be no problem. Go over to my codepen post and fork it. This enables you to make changes to my code and see it in action. For now we focus on how to set the thumbnails. In the code for the menu you can see an attribute called data-highlight="1,3,5" . What this means in English is: “Raise thumbnail number 1,3 and 5”. On the web we read from the top to bottom and from left to right. This means that the first thumbnail that is present in the code will be raised. And so on for number 3 and 5.

But I can also click on the thumbnails!

True, what better way to show off you product and have it highlight all the key features on the left side. Or if you show off your portfolio to see under what categories it falls.

The way this is set up is essentially the same as for the menu links. You have a  data-highlight attribute with numbers. These numbers represent the index of the menu items. So if the number 1 is entered in the data-highlight attribute, the first menu item will be made active. It’s that simple.

How does this work?

Whenever a link is clicked, be it the menu link or the thumbnail a script is fired. This script extracts the  data-highlight attribute from the clicked element. It splits the string it extracted and creates a loop for all the entry’s. But first it will reset all cards and links to their default positions.

With the use of the handy nth-child()  (more info) css psuedo-selector we can count elements in the source code. So for example, we have clicked on an element with one entry in the  data-highlight attribute. For this example let’s say it has 5 as a value. The script would generate the following line of javascript:

This means, that in the thumbnails the fifth card will get an active class.

It’s that easy, and you can extend this concept to many more places. Now I can hear you thinking, what if the order changes. Or if I have to make changes I have to count every card, every time. True and all of this will be a pain in the bottom, but this script was created as a proof of concept. It can easily be made more manageable with labels. Which shouldn’t be that hard to implement. But that is not what this post is for. See you next time!


0 thoughts on “3D Product Display with a hover effect”

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Codepen

Reachable mobile menu, what to look out for

On mobile devices the screen estate is small, and it has to be as the mobile screens are not that big (see image below). Common screen sizes are around the 360 pixels in width, this does Read more...

Freebie

Free fancy login screen with a gooey loader

Sometimes you need to lock up a part of your website or application. Now there are 2 options, have a simple login form and call it a day or go all in with a fancy Read more...

Freebie

Animate page based on the users scroll position

Today I am going to give away a freebie. I am planning on doing this regularly, so if anyone has any suggestions on what they would like to see. Leave a comment if you have Read more...