I not too long ago helped my buddies with their model, www.laughwithtic.com, and wished to create one thing distinctive for his or her pre-launch. My design drew inspiration from traditional dress-up video games, specializing in a playful, interactive ingredient.Initially, we featured a Rat character as the principle mannequin. Customers might merely drag-and-drop a choice of t-shirts onto the rat. This strategy was efficient and added a recent ingredient to the positioning.
Evolving the Design: From Rat to Human
A couple of weeks later, I noticed a video by @samdape on X, showcasing the same UI structure, however enhanced with an actual human character at an angle. This instantly impressed me to revamp our pre-launch expertise, transitioning to a human mannequin in that dynamic pose.
To additional improve the interplay, I built-in a number of delicate refinements. A slight shadow behind the character provides depth. When a T-shirt is dragged, it subtly skews and shakes, making the interplay really feel extra tactile. Maybe essentially the most partaking element is how the mannequin raises her hand as you drag a t-shirt close by, signaling readiness for the change. These small touches contribute to an expertise that feels immersive and surprising. This whole system is constructed with vanilla JS, HTML, and CSS, working on the straightforward precept of adjusting PNG photos based mostly on drag-and-drop collisions.
The Tech Behind the Interplay
The core of this expertise is a vanilla JavaScript-driven drag-and-drop mechanism, designed to permit customers to visually attempt totally different t-shirts on a central mannequin.
Right here’s a breakdown of its key phases:
- Initiation: When a person clicks or touches a t-shirt, it turns into the lively ingredient. Its zIndex is raised, and a grabbed CSS class is utilized for quick visible suggestions.
- Dragging: The lively t-shirt’s place repeatedly updates to observe the cursor.
- Skewing Impact: Horizontal dragging applies CSS courses that subtly skew the t-shirt, including a dynamic really feel. These courses are eliminated if motion pauses.
- Mannequin Readiness: The system continuously checks for collision with the mannequin. If the t-shirt hovers over the mannequin, the mannequin’s picture modifications to a “prepared” model (e.g., elevating a hand), offering clear suggestions.
- Dropping: Upon launch, collision with the mannequin is checked.
- On Mannequin: If dropped on the mannequin, the mannequin’s picture updates to put on the brand new t-shirt. The dragged t-shirt then resets to its unique structure place.
- Off Mannequin: If dropped elsewhere, the t-shirt animates again to its preliminary place. The mannequin reverts to its default state if it was in a “prepared” pose.
- Picture Preloading: All t-shirt and mannequin photos (together with hover states) are preloaded on web page load utilizing a devoted operate, guaranteeing easy visible transitions with out sparkles.
This mix of occasion dealing with, CSS for nuanced visible results, and dynamic picture swapping creates an enticing and interactive try-on expertise. You possibly can take a look at the total web site at www.laughwithtic.com.
I hope you discover the interplay each enjoyable and galvanizing!
Take a look at the GitHub repo right here.
