Webleb - UI Elements - Animated Weather Card

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,300,0,0'><link rel="stylesheet" href="./style.css">

</head>
<body>
<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
	<h1>Animated Weather Card</h1>
</header>
<div class="container mt-5">
	<div class="card">
		<div class="card-body">
			<div class="backgroundNight"></div>
			<div class="background"></div>
			<div class="temperature cardInfo"><span id="temperature">21</span>°C</div>
			<div class="weatherType cardInfo"><span id="weatherType">Sunny</span></div>
			<div class="currentDay cardInfo"><span id="currentDay">Today</span></div>
			<div id="thunderstorm">
				<div id="lightning"></div>
			</div>
			<div class="sun"></div>
			<div class="moon"></div>
			<div id="cloud"> </div>
			<canvas id="rain"></canvas>
			<div id="snow"> </div>
			<div class="hours-container">
				<div class="hours">
				</div>
			</div>
		</div>
	</div>
</div>
<div class="container mt-5">

</body>
</html>

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");

body {
	background: #f5f5f5;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 300;
}

header {
	padding: 16px;
	text-align: center;
}

h1,
h2,
h3,
h4,
h5 {
	font-weight: 700;
}

.card {
	position: relative;
	overflow: hidden; /* Ensure vertical scrolling */
	height: 566px;
	width: 350px;
	margin: auto;
	border: none;
	border-radius: 32px;
}

.sun,
.moon {
	position: absolute;

left: 50%;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	transform-origin: 0px 220px;
	transition: all 1s;
	transform: rotate(-90deg); /* Initial rotation of -90 degrees */
}

.sun {
	bottom: 300px;
	background: #fceabb;
	box-shadow: 0px 0px 40px 15px #fceabb;
	opacity: 1;
}

.moon {
	bottom: 250px;
	background: url("https://drive.google.com/thumbnail?id=1nbYvuzW1fU3iiXoxKeMSb4TvP7rkryuy&sz=w1000");
	background-size: contain;
	box-shadow: 0px 0px 20px 5px #ffffff;
	opacity: 0;
}

@keyframes rise-set {
	0% {
		transform: rotate(-90deg);
	}
	100% {
		transform: rotate(90deg);
	}
}

.hours-container {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	overflow-x: scroll;
	white-space: nowrap;
	backdrop-filter: blur(20px);
}

.hours {
	display: flex;
	padding: 8px;
}

.hours-container {
	scroll-behavior: smooth;
}

.hour {
	padding: 5px 10px;
	cursor: pointer;
	margin: 2px;
	transition: background-color 0.3s ease;
	border-radius: 16px;
	height: 107px;
	min-width: 80px;
	text-align: center;
}

.hour:hover {
	background-color: rgba(255, 255, 255, 0.3);
}

.active {
	background-color: rgba(255, 255, 255, 0.7);
}

.last {
	min-width: 150px;
}

.background {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(0deg, #fefefe 0%, #00a4e4 74%);
	z-index: 0;
	transition: all 2s linear;
}

.backgroundNight {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(0deg, #4c5177 0%, #051428 74%);
	z-index: -1;
	transition: all 2s linear;
}

.card,
.card-body {
	background: transparent !important;
	padding: 0;
}

.rain {
	width: 100%;
	height: 100%;
	opacity: 0;
}

.drop {
	background: -webkit-gradient(
		linear,
		0% 0%,
		0% 100%,
		to(rgba(255, 255, 255, 0.6)),
		from(rgba(255, 255, 255, 0))
	);
	background: -moz-linear-gradient(
		top,
		rgba(255, 255, 255, 0.6) 0%,
		rgba(255, 255, 255, 0) 100%
	);
	width: 1px;
	height: 30px;
	position: absolute;
	bottom: 0px;
	-webkit-animation: fall 0.3s linear infinite;
	-moz-animation: fall 0.3s linear infinite;
}

/* animate the drops*/
@-webkit-keyframes fall {
	to {
		margin-top: 500px;
	}
}
@-moz-keyframes fall {
	to {
		margin-top: 500px;
	}
}

.temperature {
	position: absolute;
	z-index: 2;
	right: 24px;
	top: 24px;
	text-align: right;
	font-size: 40px;
	font-weight: 600;
}

.weatherType {
	position: absolute;
	z-index: 2;
	right: 24px;
	top: 72px;
	text-align: right;
	font-size: 16px;
	line-height: 34px;
	text-transform: capitalize;
}

.currentDay {
	position: absolute;
	z-index: 2;
	left: 8px;
	bottom: 144px;
	text-align: left;
	font-size: 16px;
	line-height: 34px;
}

.hour span {
	position: relative;
	display: flex;
	text-align: center;
	color: black;
}

.hour .timeSpan {
	font-size: 14px;
	font-weight: 300;
}
.hour .tempSpan {
	font-size: 14px;
	font-weight: 700;
}

.hour:last-child::after {
	width: 300px;
	height: 1px;
	content: "";
}

.hour .material-symbols-rounded {
	font-size: 32px;
	line-height: 40px;
}

.hour[data-weather="sunny"] .material-symbols-rounded::after {
	content: "sunny";
}

.hour[data-weather="clear-night"] .material-symbols-rounded::after {
	content: "clear_night";
}

.hour[data-weather="partly-cloudy"] .material-symbols-rounded::after {
	content: "partly_cloudy_day";
}

.hour[data-weather="partly-cloudy-night"] .material-symbols-rounded::after {
	content: "partly_cloudy_night";
}

.hour[data-weather="cloudy"] .material-symbols-rounded::after {
	content: "cloud";
}

.hour[data-weather="foggy"] .material-symbols-rounded::after {
	content: "foggy";
}

.hour[data-weather="rainy"] .material-symbols-rounded::after {
	content: "rainy";
}

.hour[data-weather="snowy"] .material-symbols-rounded::after {
	content: "ac_unit";
}

.hour[data-weather="thunderstorm"] .material-symbols-rounded::after {
	content: "thunderstorm";
}

.card {
	color: black;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
		rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
	border: none;
}

.credit {
	box-shadow: none;
	border-radius: 0;
}

a {
	color: black;
}

#cloud {
	position: absolute;
	z-index: 0;
	width: 100%;
	height: 100%;
	background-image: url("");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
	filter: brightness(200%) drop-shadow(0 0 10px rgba(255, 255, 255, 01));
	top: 0;
	transition: all 2s;
}

#snow {
	opacity: 0;
	top: 0;
	position: absolute;
	pointer-events: none;
	z-index: 0;
	width: 100%;
	height: 100%;
	transition: all 2s;
}

#rain {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	transition: all 2s;
}

#lightning {
	position: absolute;
	top: -200px;
	left: 0;
	width: 100%;
	height: 150%;
	background: radial-gradient(
		closest-side,
		rgba(255, 255, 255, 1),
		rgba(255, 255, 255, 0.5)
	);
	opacity: 0;
	pointer-events: none;
	animation: lightningFlash var(--lightning-duration) linear infinite;
}

@keyframes lightningFlash {
	0%,
	100% {
		opacity: 0;
	}
	24% {
		opacity: 0;
	}
	25% {
		opacity: 1;
	}
	26% {
		opacity: 0;
	}
	28% {
		opacity: 1;
	}
	29% {
		opacity: 0;
	}
}

$(document).ready(function () {
	const hoursData = [
		{ day: "tod", hour: 0, weather: "clear-night", temp: 11, time: "00:00" },
		{
			day: "tod",
			hour: 1,
			weather: "partly-cloudy-night",
			temp: 10,
			time: "01:00"
		},
		{ day: "tod", hour: 2, weather: "rainy", temp: 9, time: "02:00" },
		{ day: "tod", hour: 3, weather: "cloudy", temp: 8, time: "03:00" },
		{
			day: "tod",
			hour: 4,
			weather: "partly-cloudy-night",
			temp: 7,
			time: "04:00"
		},
		{ day: "tod", hour: 5, weather: "clear-night", temp: 7, time: "05:00" },
		{ day: "tod", hour: 6, weather: "sunny", temp: 12, time: "06:00" },
		{ day: "tod", hour: 7, weather: "sunny", temp: 12, time: "07:00" },
		{ day: "tod", hour: 8, weather: "sunny", temp: 13, time: "08:00" },
		{ day: "tod", hour: 9, weather: "partly-cloudy", temp: 14, time: "09:00" },
		{ day: "tod", hour: 10, weather: "cloudy", temp: 16, time: "10:00" },
		{ day: "tod", hour: 11, weather: "rainy", temp: 17, time: "11:00" },
		{ day: "tod", hour: 12, weather: "rainy", temp: 19, time: "12:00" },
		{ day: "tod", hour: 13, weather: "rainy", temp: 20, time: "13:00" },
		{ day: "tod", hour: 14, weather: "partly-cloudy", temp: 20, time: "14:00" },
		{ day: "tod", hour: 15, weather: "partly-cloudy", temp: 20, time: "15:00" },
		{ day: "tod", hour: 16, weather: "partly-cloudy", temp: 19, time: "16:00" },
		{ day: "tod", hour: 17, weather: "cloudy", temp: 20, time: "17:00" },
		{ day: "tod", hour: 18, weather: "cloudy", temp: 19, time: "18:00" },
		{ day: "tod", hour: 19, weather: "cloudy", temp: 18, time: "19:00" },
		{ day: "tod", hour: 20, weather: "rainy", temp: 17, time: "20:00" },
		{ day: "tod", hour: 21, weather: "rainy", temp: 15, time: "21:00" },
		{ day: "tod", hour: 22, weather: "rainy", temp: 12, time: "22:00" },
		{ day: "tod", hour: 23, weather: "rainy", temp: 10, time: "23:00" },

{ day: "tom", hour: 0, weather: "thunderstorm", temp: 8, time: "00:00" },
		{ day: "tom", hour: 1, weather: "thunderstorm", temp: 6, time: "01:00" },
		{ day: "tom", hour: 2, weather: "thunderstorm", temp: 4, time: "02:00" },
		{ day: "tom", hour: 3, weather: "thunderstorm", temp: 3, time: "03:00" },
		{ day: "tom", hour: 4, weather: "thunderstorm", temp: 2, time: "04:00" },
		{ day: "tom", hour: 5, weather: "cloudy", temp: 2, time: "05:00" },
		{ day: "tom", hour: 6, weather: "cloudy", temp: 0, time: "06:00" },
		{ day: "tom", hour: 7, weather: "cloudy", temp: -1, time: "07:00" },
		{ day: "tom", hour: 8, weather: "partly-cloudy", temp: -1, time: "08:00" },
		{ day: "tom", hour: 9, weather: "partly-cloudy", temp: -1, time: "09:00" },
		{ day: "tom", hour: 10, weather: "snowy", temp: 0, time: "10:00" },
		{ day: "tom", hour: 11, weather: "snowy", temp: 1, time: "11:00" },
		{ day: "tom", hour: 12, weather: "snowy", temp: 1, time: "12:00" },
		{ day: "tom", hour: 13, weather: "partly-cloudy", temp: 3, time: "13:00" },
		{ day: "tom", hour: 14, weather: "partly-cloudy", temp: 5, time: "14:00" },
		{ day: "tom", hour: 15, weather: "cloudy", temp: 7, time: "15:00" },
		{ day: "tom", hour: 16, weather: "cloudy", temp: 9, time: "16:00" },
		{ day: "tom", hour: 17, weather: "rainy", temp: 9, time: "17:00" },
		{ day: "tom", hour: 18, weather: "rainy", temp: 10, time: "18:00" },
		{ day: "tom", hour: 19, weather: "cloudy", temp: 10, time: "19:00" },
		{ day: "tom", hour: 20, weather: "cloudy", temp: 9, time: "20:00" },
		{ day: "tom", hour: 21, weather: "rainy", temp: 8, time: "21:00" },
		{ day: "tom", hour: 22, weather: "rainy", temp: 7, time: "22:00" },
		{ day: "tom", hour: 23, weather: "rainy", temp: 5, time: "23:00" },
		{ day: "tom", hour: 0, weather: "rainy", temp: 3, time: "00:00" }
	];

// Iterate over the data and create the HTML dynamically
	hoursData.forEach((data) => {
		const hourDiv = $("<div>", {
			class: "hour d-flex flex-column align-items-center",
			"data-day": data.day,
			"data-hour": data.hour,
			"data-weather": data.weather,
			"data-temp": data.temp
		});

const timeSpan = $("<span class='timeSpan'>").text(data.time);
		const iconSpan = $("<span>", { class: "material-symbols-rounded" });
		const tempSpan = $("<span class='tempSpan'>").text(data.temp + "°C");

hourDiv.append(timeSpan, iconSpan, tempSpan);
		$(".hours").append(hourDiv);
	});
	const background = $(".background");
	const backgroundNight = $(".backgroundNight");
	const sun = $(".sun");
	const moon = $(".moon");
	const hoursContainer = $(".hours-container");
	const hours = $(".hour");
	const rain = $("#rain");
	const cloud = $("#cloud");
	const snow = $("#snow");
	const thunderstorm = $("#thunderstorm");
	const temperatureDisplay = $("#temperature");
	const weatherTypeDisplay = $("#weatherType");
	const currentDay = $("#currentDay");
	const initialHour = 11;

// Function to handle scroll and wheel events
	function handleScrollEvent() {
		const sl = hoursContainer.scrollLeft();
		const hourIndex = Math.round(sl / hours.outerWidth());
		const currentHour = hours.eq(hourIndex);

toggleSunMoon(parseInt(currentHour.data("hour")));
		highlightHour(hourIndex);
		updateWeatherAndTemperature(currentHour);
	}

// Function to highlight the selected hour
	function highlightHour(index) {
		hours.removeClass("active"); // Remove active class from all hours
		hours.eq(index).addClass("active"); // Add active class to the selected hour
	}

function updateWeatherAndTemperature(currentHour) {
		const temperature = currentHour.data("temp");
		const weather = currentHour.data("weather");
		const day = currentHour.data("day");

temperatureDisplay.text(temperature);
		weatherTypeDisplay.text(weather.replace(/-/g, " "));

// Reset elements to default state
		rain.css("opacity", "0");
		snow.css("opacity", "0");
		cloud.css("opacity", "0");
		thunderstorm.css("opacity", "0");
		background.css("filter", "none");
		sun.css("filter", "none");
		moon.css("filter", "none");

// Handle weather visibility and background filters
		if (weather === "rainy") {
			rain.css("opacity", "1");
			cloud.css("opacity", "0.8");
			background.css("filter", "grayscale(0.5) brightness(0.5)");
			moon.css("filter", "brightness(0.8)");
		} else if (weather === "snowy") {
			snow.css("opacity", "1");
			cloud.css("opacity", "0");
			background.css("filter", "grayscale(0.5) opacity(0.4)");
			sun.css("filter", "grayscale(0.9)");
		} else if (weather === "cloudy") {
			cloud.css("opacity", "0.9");
			background.css("filter", "grayscale(0.5) brightness(0.5)");
			moon.css("filter", "brightness(0.8)");
		} else if (weather === "thunderstorm") {
			cloud.css("opacity", "0.8");
			thunderstorm.css("opacity", "1");
			background.css("filter", "grayscale(1) brightness(0.1)");
			sun.css("filter", "grayscale(0.9)");
		} else if (weather === "partly-cloudy" || weather === "partly-cloudy-night") {
			cloud.css("opacity", "0.5");
		}

// Handle day text update
		if (day === "tom") {
			currentDay.text("Tomorrow");
		} else {
			currentDay.text("Today");
		}
	}

// Initial setup for the first hour
	function init() {
		toggleSunMoon(initialHour); // Toggle sun/moon for initial position (07:00)
		highlightHour(initialHour); // Highlight the first hour initially
		updateWeatherAndTemperature(hours.eq(2));
	}

// Function to generate drops
	function createRain() {
		const nbDrop = 800;
		for (let i = 1; i <= nbDrop; i++) {
			const dropLeft = randRange(0, 1600);
			const dropTop = randRange(-1000, 1400);

rain.append('<div class="drop" id="drop' + i + '"></div>');
			$("#drop" + i).css({ left: dropLeft, top: dropTop });
		}
	}

// Function to generate a random number range
	function randRange(minNum, maxNum) {
		return Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum;
	}

// Event listeners
	hoursContainer.on("scroll", handleScrollEvent);
	hoursContainer.on("wheel", function (event) {
		event.preventDefault(); // Prevent default scrolling behavior
		hoursContainer.scrollLeft(
			hoursContainer.scrollLeft() + event.originalEvent.deltaY
		);
		handleScrollEvent();
	});
	hours.on("click", function () {
		const hour = parseInt($(this).data("hour"));
		toggleSunMoon(hour);
		highlightHour(hours.index(this));
		updateWeatherAndTemperature($(this));
	});

// Make it rain
	createRain();
	init();
	hoursContainer.scrollLeft(81 * initialHour);
});

function setRandomLightningDuration() {
	const lightning = document.getElementById("thunderstorm");
	const minDuration = 1; // minimum duration in seconds
	const maxDuration = 4; // maximum duration in seconds
	const randomDuration =
		Math.random() * (maxDuration - minDuration) + minDuration;
	thunderstorm.style.setProperty("--lightning-duration", `${randomDuration}s`);
}

// Set an initial random duration
setRandomLightningDuration();

// Change the duration periodically
setInterval(setRandomLightningDuration, 5000); // Change every 5 seconds

particlesJS("cloud", {
	particles: {
		number: { value: 5, density: { enable: true, value_area: 100 } },
		color: { value: "#ffffff" },
		shape: {
			type: "image",
			stroke: { width: 2, color: "#00ffff" },
			polygon: { nb_sides: 5 },
			image: {
				src: "https://i.ibb.co/vzP35N4/fluffyvloud.png",
				width: 100,
				height: 100
			}
		},
		opacity: {
			value: 1,
			random: true,
			anim: {
				enable: true,
				speed: 10,
				opacity_min: 0.0081,
				sync: false
			}
		},
		size: {
			value: 800,
			random: false,
			anim: { enable: true, speed: 10, size_min: 2, sync: false }
		},
		line_linked: {
			enable: false,
			distance: 0,
			color: "#ffffff",
			opacity: 0.4,
			width: 1
		},
		move: {
			enable: true,
			speed: 6,
			direction: "left",
			random: true,
			straight: true,
			out_mode: "out",
			bounce: false,
			attract: { enable: false, rotateX: 60, rotateY: 120 }
		}
	},
	interactivity: {
		detect_on: "canvas",
		events: {
			onhover: { enable: false, mode: "bubble" },
			onclick: { enable: false, mode: "push" },
			resize: true
		},
		modes: {
			grab: { distance: 0, line_linked: { opacity: 1 } },
			bubble: {
				distance: 0,
				size: 2,
				duration: 2,
				opacity: 8,
				speed: 3
			},
			repulse: { distance: 200, duration: 0.4 },
			push: { particles_nb: 4 },
			remove: { particles_nb: 2 }
		}
	},
	retina_detect: true
});

// Adjust initial positions of the particles
function adjustInitialPositions() {
	const particlesArray = window.pJSDom[0].pJS.particles.array;
	particlesArray.forEach((p) => {
		p.x = Math.random() * window.innerWidth;
		p.y = Math.random() * window.innerHeight;
	});
}

// Wait until particles are initialized and then adjust positions
setTimeout(adjustInitialPositions, 1000);

particlesJS("snow", {
	particles: {
		number: {
			value: 2000,
			density: {
				enable: true,
				value_area: 800
			}
		},
		color: {
			value: "#fff"
		},
		shape: {
			type: "circle",
			stroke: {
				width: 0,
				color: "#000000"
			},
			polygon: {
				nb_sides: 5
			}
		},
		opacity: {
			value: 1,
			random: false,
			anim: {
				enable: false,
				speed: 1,
				opacity_min: 0.1,
				sync: false
			}
		},
		size: {
			value: 2,
			random: true,
			anim: {
				enable: false
			}
		},
		line_linked: {
			enable: false
		},
		move: {
			enable: true,
			speed: 3,
			direction: "bottom",
			random: false,
			straight: false,
			out_mode: "out",
			bounce: false,
			attract: {
				enable: false,
				rotateX: 600,
				rotateY: 1200
			}
		}
	},
	retina_detect: true
});

var canvas = $("#rain")[0];

if (canvas.getContext) {
	var ctx = canvas.getContext("2d");
	var w = canvas.width;
	var h = canvas.height;
	ctx.strokeStyle = "rgba(255,255,255,0.5)";
	ctx.lineWidth = 1;
	ctx.lineCap = "round";

var init = [];
	var maxParts = 300;
	for (var a = 0; a < maxParts; a++) {
		init.push({
			x: Math.random() * w,
			y: Math.random() * h,
			l: Math.random() * 1,
			xs: -4 + Math.random() * 4 + 2,
			ys: Math.random() * 10 + 10
		});
	}

var particles = [];
	for (var b = 0; b < maxParts; b++) {
		particles[b] = init[b];
	}

function draw() {
		ctx.clearRect(0, 0, w, h);
		for (var c = 0; c < particles.length; c++) {
			var p = particles[c];
			ctx.beginPath();
			ctx.moveTo(p.x, p.y);
			ctx.lineTo(p.x + p.l * p.xs, p.y + p.l * p.ys);
			ctx.stroke();
		}
		move();
	}

setInterval(draw, 3);
}

Validating your code, please wait...

HTML

CSS