Image Tilt #1

Component Structure

• IT1 COMPONENT (Section): A full viewport height container designed to center its contents. It is the primary wrapper for the image tilt effect, ensuring that the effect is displayed prominently within the viewport.

• IT1 CONTAINER (Container): Directly holds the image wrapper, aligning it centrally both vertically and horizontally within the section.

  • IT1 IMAGE WRAPPER (Div): Applies a perspective style through the it1__img-wrapper class, setting up the necessary 3D space for the tilt effect to occur.

    • IT1 IMAGE (Image): The target image for the tilt effect, referenced with the it1__img class. The image is sourced from an external URL and is the focal point for the interactive tilt animations.

Animation Structure

Events

1. IT1 - MOUSELEAVE: Resets the tilt effect on the image to its original state when the mouse leaves the .it1__img-wrapper area. This event ensures that the image returns to a flat position, with no rotation on the X or Y axes.

2. IT1 - MOUSEMOVE: Triggers the tilt effect based on the mouse's position relative to the .it1__img-wrapper. The image's rotation on the Y-axis (horizontal tilt) and X-axis (vertical tilt) is dynamically calculated based on the mouse position, creating an interactive 3D effect as the user moves the cursor over the image. The calculated rotation ensures that the tilt mirrors the direction of cursor movement, enhancing the perception of depth and interactivity.