CODEWITHSUNDEEP
jqueryanimation3d
hEShaN
hEShaN

Reputation: 581

3D animation on website

First of all i am an undergraduate and for my third year project I am building an E-commerce spare parts web. For advanced searching i hope to include a vehicle image that is similar to following attachment and then upon the hovering of mouse over different parts of the vehicle image i need to pop up the particular part and then 'on click' i need to search for that particular part. Could you please suggest a way to achieve the above requirement. Do i need to use flash or can i do it with jquery? Thank you very much.

This is Sample image of structure

Upvotes: 0

Views: 388

Answers (1)

Paul Allen
Paul Allen

Reputation: 351

You could use jQuery in combination with CSS animations. It is pretty simple jQuery because you simply add and remove classes. Here is a codepen I made for displaying different cards when clicked. http://codepen.io/sketchbookkeeper/pen/dpjPrK

Here is the basic idea starting with the CSS

 //CSS  for part after `open` class is added in jQuery
.part.open {
  animation-name: myAnimation;
  animation-duration: 2s;
  transform: scale(2,2);
  margin-top: 90px;
 }
 //CSS animation
 @keyframes myAnimation {
 //when the animation begins 
 0% {
   transform: scale(1,1);
   margin-top: 0px;
  }
  //when the animation is completed
  100% {
   transform: scale(2,2);
   margin-top: 90px;
  }
 }

In jQuery 

$('.part').onclick = function () {
    if ($('.part).classList.contains('open')) {
       $(',part).remove('open');
    } else {
       $('.part').add('open');
    }
};

You could expand on this method to show or hide a search bar when a part is clicked. In my pen, I used jQuery to also center the card in the window.

Upvotes: 1

Related Questions