Close

Parallax Depth Cards

This is an example of a web form with parallax depth cards layout, designed using CSS, HTML and JavaScript. JavaScript functions have been used to implement the card warping animations based on mouse movement, in a hover event. The body of the form is given the styles of margin as 40px 0, font family as "Raleway", font size as 14px, font weight as 500, and background color as #BCAAA4. The title is given the styles of the same font family, font size as 24px, font weight as 700, color as #5D4037, and text align as center. The card is given the styles of position as relative, flex as 0 0 240px, width as 240px, height as 320px, background color as #333, overflow as hidden, border radius as 10px, and box shadow as rgba(black, 0.66) 0 30px 60px 0, inset #333 0 0 0 5px, inset rgba(white, 0.5) 0 0 0 6px. Cursor is set as pointer to get the hand cursor effect on cards. Parallax depth effect has been achieved by using $hoverEasing, and $returnEasing variables. Source: https://codepen.io/andymerskin/pen/XNMWvQ/

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published.