CSS & JS Animations

CSS and JS animations in this project manage the initial application loading state and create interactive UI elements. The system coordinates CSS3 @keyframes for visual transitions with jQuery-driven DOM manipulations to control element positioning and visibility. The primary focus of these animations is to enhance user engagement through a preloader sequence and dynamic button behaviors.

Preloader and Initialization

The preloader system hides the main content until the initial scripts and assets are ready. It uses a fixed-position overlay and a multi-element CSS animation.

Visual Architecture

The preloader consists of a container (#preloader) and a spinner containing five rectangular div elements. Each rectangle scales vertically using a staggered delay to create a wave effect.

• Overlay: The #preloader uses a fixed position with a high z-index (9999999) and a background color of #ef6a8a. Sources: css/spinload.css:2-9, index.html:33-35.
• Keyframe Animation: The stretchdelay keyframe scales the elements from scaleY(0.4) to scaleY(1.0) over 1.2 seconds. Sources: css/spinload.css:57-70.
• Staggered Timing: Rectangles 2 through 5 have specific animation-delay values (from -1.1s to -0.8s) to synchronize the motion. Sources: css/spinload.css:36-55.

Transition Logic

A JavaScript timeout manages the transition from the loading state to the main content display.

Interactive Button Animations

The application features interactive buttons that dynamically change position to influence user selection.

Positional Swapping and Random Movement

The "No" button implements logic to avoid being clicked. It utilizes two distinct movement patterns based on the number of interactions.

1. Coordinate Swapping: The switchButton function captures the left and top CSS properties of both the "Yes" and "No" buttons and swaps them. Sources: js/myJs.js:46-56.
2. Random Displacement: The moveButton function calculates random X and Y coordinates within screen boundaries and applies them to the "No" button. Sources: js/myJs.js:58-72.

CSS Transitions

To ensure smooth movement, CSS transitions are applied to the button selectors. The "No" button has a shorter duration (0.1s) than the "Yes" button (0.3s) to increase the difficulty of interaction.
Sources: css/style.css:6-21

Sources: css/style.css:12, css/style.css:19

Dynamic Text Simulation

The application simulates user typing within a SweetAlert2 modal to force specific input values.

Input Generation Logic

When the user focuses on the reason input field (#txtReason), a setInterval triggers the textGenerate function every 10ms. This function maps the current length of the input field to a predefined string (textConfig.text9), effectively overwriting user input with the configured text.

Modal and Background Animations

The project uses SweetAlert2 (Swal) to handle modal transitions and animations, complemented by blurred background effects.

• Background Blur: The #bg element uses a -webkit-filter: blur(4px) to provide depth behind the active content. Sources: css/style.css:34.
• Modal Transitions: The firstQuestion function initiates the UI by hiding the .content class and revealing it with a 200ms animation after the user acknowledges the initial popup. Sources: js/myJs.js:31-44.
• Animated Backdrops: The result popup utilizes a GIF backdrop (img/giphy2.gif) to provide a dynamic visual response. Sources: js/myJs.js:122

The combination of CSS keyframes for the preloader, JavaScript-calculated coordinates for button evasion, and interval-based text generation creates a highly interactive and controlled user flow. Sources: js/myJs.js:1-150, css/style.css:1-75.