Logical Python

Logical Python
Random News

Animated Water Login

logical07 mins

This project creates an animated, water-themed login interface that blends visual effects with smooth entrance animations. Initially, the screen shows a centered welcome image (your “namaste welcome” graphic), and the login form stays hidden. When the user clicks the image, it shrinks away with an animation, revealing a stylish login box that scales into view. The background features a live water ripple effect, giving the page an immersive, fluid feeling. Altogether, the project focuses on aesthetic transitions, user-triggered animations, and a modern transparent UI.

HTML

Copy Code
<div class="user_div noselect" id="user_div">
    <img
        src="4.png"
        alt="user icon"
        id="user"
        onclick="Login(); scale_out()"
        class="noselect"
    />
</div>

The HTML sets up the entire structure by placing a fullscreen background area wrapped in a <body class="water">, which later receives the ripple effect. A central user_div contains the welcome PNG, which acts as the interactive trigger to open the form. The actual login box lives inside a hidden <div id="form"> and includes Bootstrap-styled fields, labels, and a custom checkbox.

The form is centered using Bootstrap’s grid system and wrapped inside a general_container to apply transparency and rounded styling. The heading “Inside Water” appears with a text animation, reinforcing the water theme. When the user clicks the welcome image, JavaScript switches visibility between the icon and the form. The HTML references multiple scripts—jQuery, Bootstrap, the Ripples plugin—and finally the custom script.js that controls animations and interactions. This structure makes the page feel clean, layered, and visually dynamic.

CSS

Copy Code
#user {
    align-self: center;
    clip-path: circle(46% at 50% 50%);
    box-shadow: inset -3px -3px 114px 23px #050b11a8;
    object-fit: cover;
}

#user:hover {
    cursor: pointer;
    box-shadow: inset -3px -3px 100px 1px #ffffff;
}

The CSS defines the entire visual personality of the login page. The .water class loads a high-quality ocean-themed background that fills the screen, ready for the ripple effect to animate over it. The welcome image is styled with circular clipping, inner shadows, and hover highlights, making it look like a glowing button. Animations like scale-in-center and scale-out-center control how elements appear or disappear, creating smooth motion when transitioning from the icon to the form.

The login form container uses a semi-transparent dark background, soft edges, and centered layout to maintain readability while preserving the water-immersed aesthetic. Inputs expand when focused, shifting from bordered to softly glowing styles to guide user interaction. Custom checkboxes are hand-drawn using CSS, giving them a unique animated tick mark. Media queries ensure the layout adapts smoothly across screen sizes. Overall, the CSS transforms a simple form into a dramatic, animated visual experience.

JavaScript

Copy Code
function Login() {
  setInterval(function () {
    document.getElementById("form").style.display = "block";
  }, 600);
  setInterval(function () {
    document.getElementById("user_div").style.display = "none";
  }, 500);
}
function scale_out() {
  var element = document.getElementById("user_div");
  element.classList.remove("scale-in-center");
  element.classList.add("scale-out-center");
}
function scale_in() {
  var element = document.getElementById("user_div");
  element.classList.add("scale-in-center");
}

The JavaScript begins by applying the ripple effect to the background using the jQuery Ripples plugin, giving instant water-like motion. The Login() function is responsible for showing the form and hiding the user icon using timed intervals, so the animations feel staged rather than abrupt. The scale_out() function attaches a CSS animation class that shrinks the welcome icon, while scale_in() does the opposite when the page first loads. Input fields use jQuery focus and blur handlers to temporarily remove placeholder text for a cleaner typing experience.

These interactions ensure the UI feels responsive and animated based on user actions. The script also coordinates the visibility and timing of elements so the login form appears only after the icon animation completes. Altogether, the JavaScript layer ties the visual effects, animations, and UI transitions into a smooth, interactive login experience. (Licence)

Download Code

Related Post