Presentación de diapositivas (moderna)

1,611 0 zegarkidawida Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Recomendado

5 September 2025

Contenedor de animación de objetos de imagen HTML

15 July 2025

Ejemplo de formulario de inicio de sesión animado HTML

16 April 2026

Ejemplo de página de inicio HTML para War Thunder Mobile

HTML

<div class="slideshow-container">
	<div class="slide active">
		<div class="slide-background" style="background-image: url('https://picsum.photos/1920/1080?random=1')"></div>
		<div class="slide-overlay"></div>
		<div class="slide-content">
			<div class="slide-number">01</div>
			<h2 class="slide-title">Cosmic Dreams</h2>
			<p class="slide-description">Journey through infinite possibilities where reality bends and imagination soars beyond the stars.</p>
		</div>
		<div class="slide-image">
			<img src="https://picsum.photos/400/300?random=1" alt="Slide 1">
		</div>
	</div>

<div class="slide">
		<div class="slide-background" style="background-image: url('https://picsum.photos/1920/1080?random=2')"></div>
		<div class="slide-overlay"></div>
		<div class="slide-content">
			<div class="slide-number">02</div>
			<h2 class="slide-title">Urban Pulse</h2>
			<p class="slide-description">Feel the rhythm of city life where neon lights dance with shadows in the endless metropolitan symphony.</p>
		</div>
		<div class="slide-image">
			<img src="https://picsum.photos/400/300?random=2" alt="Slide 2">
		</div>
	</div>

<div class="slide">
		<div class="slide-background" style="background-image: url('https://picsum.photos/1920/1080?random=3')"></div>
		<div class="slide-overlay"></div>
		<div class="slide-content">
			<div class="slide-number">03</div>
			<h2 class="slide-title">Ocean Depths</h2>
			<p class="slide-description">Dive into mysterious waters where ancient secrets whisper through currents of time and space.</p>
		</div>
		<div class="slide-image">
			<img src="https://picsum.photos/400/300?random=3" alt="Slide 3">
		</div>
	</div>

<div class="slide">
		<div class="slide-background" style="background-image: url('https://picsum.photos/1920/1080?random=4')"></div>
		<div class="slide-overlay"></div>
		<div class="slide-content">
			<div class="slide-number">04</div>
			<h2 class="slide-title">Desert Mirage</h2>
			<p class="slide-description">Witness the dance of heat and sand where mirages reveal hidden truths in the vast golden expanse.</p>
		</div>
		<div class="slide-image">
			<img src="https://picsum.photos/400/300?random=4" alt="Slide 4">
		</div>
	</div>

<div class="slide">
		<div class="slide-background" style="background-image: url('https://picsum.photos/1920/1080?random=5')"></div>
		<div class="slide-overlay"></div>
		<div class="slide-content">
			<div class="slide-number">05</div>
			<h2 class="slide-title">Forest Magic</h2>
			<p class="slide-description">Step into enchanted woods where every leaf tells a story and magic flows through ancient roots.</p>
		</div>
		<div class="slide-image">
			<img src="https://picsum.photos/400/300?random=5" alt="Slide 5">
		</div>
	</div>
</div>

CSS

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "Arial", sans-serif;
	background: #000;
	overflow: hidden;
	cursor: none;
}

.slideshow-container {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

.slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
	transform: scale(1.1) rotate(2deg);
}

.slide.active {
	opacity: 1;
	visibility: visible;
	transform: scale(1) rotate(0deg);
}

.slide.prev {
	transform: scale(0.9) rotate(-2deg) translateX(-50px);
	opacity: 0;
	visibility: hidden;
}

.slide.next {
	transform: scale(0.9) rotate(2deg) translateX(50px);
	opacity: 0;
	visibility: hidden;
}

.slide-background {
	position: absolute;
	top: -10%;
	left: -10%;
	width: 120%;
	height: 120%;
	background-size: cover;
	background-position: center;
	transform: skewX(-15deg);
	transition: transform 1.5s cubic-bezier(0.23, 1, 0.32, 1),
		opacity 1.2s cubic-bezier(0.23, 1, 0.32, 1);
	opacity: 0;
}

.slide.active .slide-background {
	transform: skewX(-5deg) scale(1.05);
	opacity: 1;
}

.slide-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1));
	transform: skewX(-10deg);
	transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.slide.active .slide-overlay {
	transform: skewX(-3deg);
}

.slide-content {
	position: absolute;
	top: 50%;
	left: 15%;
	transform: translateY(-50%);
	color: white;
	z-index: 10;
	opacity: 0;
	transform: translateY(-50%) translateX(-100px) skewX(-20deg);
	transition: all 1.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.slide.active .slide-content {
	opacity: 1;
	transform: translateY(-50%) translateX(0) skewX(-5deg);
}

.slide-number {
	font-size: 8rem;
	font-weight: 900;
	line-height: 0.8;
	opacity: 0.7;
	margin-bottom: 1rem;
	transform: skewX(-25deg);
	background: linear-gradient(45deg, #ff0, #ffd);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.9))
		drop-shadow(2px 2px 4px rgba(0, 0, 0, 1))
		drop-shadow(-2px -2px 4px rgba(0, 0, 0, 0.8));
}

.slide-title {
	font-size: 4rem;
	font-weight: 700;
	margin-bottom: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	transform: skewX(-15deg);
	text-shadow: 0 0 30px rgba(0, 0, 0, 0.9), 2px 2px 8px rgba(0, 0, 0, 1),
		-2px -2px 8px rgba(0, 0, 0, 0.8), 4px 4px 15px rgba(0, 0, 0, 0.7);
}

.slide-description {
	font-size: 1.2rem;
	line-height: 1.6;
	max-width: 500px;
	opacity: 0.9;
	transform: skewX(-8deg);
	text-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 1px 1px 4px rgba(0, 0, 0, 1);
}

.navigation {
	position: fixed;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 15px;
	z-index: 100;
}

.nav-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	cursor: pointer;
	transition: all 0.3s ease;
	transform: skewX(-25deg);
}

.nav-dot.active {
	background: #ff6b6b;
	transform: scale(1.5) skewX(-10deg);
	box-shadow: 0 0 20px rgba(255, 107, 107, 0.8);
}

.nav-arrow {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	width: 60px;
	height: 60px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	cursor: pointer;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	transform: translateY(-50%) skewX(-20deg);
}

.nav-arrow:hover {
	border-color: #ff6b6b;
	background: rgba(255, 107, 107, 0.2);
	transform: translateY(-50%) skewX(-10deg) scale(1.1);
	box-shadow: 0 0 20px rgba(255, 107, 107, 0.3);
}

.nav-arrow.prev {
	left: 40px;
}

.nav-arrow.next {
	right: 40px;
}

.nav-arrow::after {
	content: "";
	width: 12px;
	height: 12px;
	border-top: 2px solid white;
	border-right: 2px solid white;
}

.nav-arrow.prev::after {
	transform: rotate(-135deg);
	margin-left: 5px;
}

.nav-arrow.next::after {
	transform: rotate(45deg);
	margin-right: 5px;
}

.progress-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	height: 4px;
	background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
	z-index: 100;
	transform-origin: left;
	transform: scaleX(0) skewX(-10deg);
	transition: transform 5s linear;
}

.slide-image {
	position: absolute;
	top: 50%;
	right: 10%;
	width: 400px;
	height: 300px;
	transform: translateY(-50%) skewX(-15deg) scale(0.8);
	opacity: 0;
	transition: all 1.5s cubic-bezier(0.23, 1, 0.32, 1);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.slide.active .slide-image {
	transform: translateY(-50%) skewX(-5deg) scale(1);
	opacity: 1;
}

.slide-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.custom-cursor {
	position: fixed;
	width: 20px;
	height: 20px;
	background: #ff6b6b;
	border-radius: 50%;
	pointer-events: none;
	z-index: 1000;
	mix-blend-mode: difference;
	transition: transform 0.1s ease;
}

@media (max-width: 768px) {
	.slide-title {
		font-size: 2.5rem;
	}

.slide-number {
		font-size: 4rem;
	}

.slide-content {
		left: 5%;
		right: 5%;
	}

.slide-image {
		width: 250px;
		height: 180px;
		right: 5%;
	}

.nav-arrow {
		width: 50px;
		height: 50px;
	}
}

class SlantedCarousel {
	constructor() {
		this.slides = document.querySelectorAll(".slide");
		this.navDots = document.querySelectorAll(".nav-dot");
		this.prevBtn = document.querySelector(".nav-arrow.prev");
		this.nextBtn = document.querySelector(".nav-arrow.next");
		this.progressBar = document.querySelector(".progress-bar");
		this.cursor = document.querySelector(".custom-cursor");

this.currentSlide = 0;
		this.totalSlides = this.slides.length;
		this.isAnimating = false;
		this.autoPlayInterval = null;

this.init();
	}

init() {
		this.bindEvents();
		this.startAutoPlay();
		this.updateProgress();
	}

bindEvents() {
		// Navigation arrows
		this.prevBtn.addEventListener("click", () => this.prevSlide());
		this.nextBtn.addEventListener("click", () => this.nextSlide());

// Navigation dots
		this.navDots.forEach((dot, index) => {
			dot.addEventListener("click", () => this.goToSlide(index));
		});

// Keyboard navigation
		document.addEventListener("keydown", (e) => {
			if (e.key === "ArrowLeft") this.prevSlide();
			if (e.key === "ArrowRight") this.nextSlide();
		});

// Mouse events for auto-play
		document.addEventListener("mouseenter", () => this.stopAutoPlay());
		document.addEventListener("mouseleave", () => this.startAutoPlay());

// Custom cursor
		document.addEventListener("mousemove", (e) => {
			this.cursor.style.left = e.clientX + "px";
			this.cursor.style.top = e.clientY + "px";
		});

// Touch support
		let startX = 0;
		document.addEventListener("touchstart", (e) => {
			startX = e.touches[0].clientX;
		});

document.addEventListener("touchend", (e) => {
			const endX = e.changedTouches[0].clientX;
			const diff = startX - endX;

if (Math.abs(diff) > 50) {
				if (diff > 0) {
					this.nextSlide();
				} else {
					this.prevSlide();
				}
			}
		});
	}

goToSlide(index) {
		if (this.isAnimating || index === this.currentSlide) return;

this.isAnimating = true;

// Update slides
		this.slides.forEach((slide, i) => {
			slide.classList.remove("active", "prev", "next");

if (i === index) {
				slide.classList.add("active");
			} else if (i < index) {
				slide.classList.add("prev");
			} else {
				slide.classList.add("next");
			}
		});

// Update navigation dots
		this.navDots.forEach((dot, i) => {
			dot.classList.toggle("active", i === index);
		});

this.currentSlide = index;
		this.updateProgress();

setTimeout(() => {
			this.isAnimating = false;
		}, 1500);
	}

nextSlide() {
		const next = (this.currentSlide + 1) % this.totalSlides;
		this.goToSlide(next);
	}

prevSlide() {
		const prev = (this.currentSlide - 1 + this.totalSlides) % this.totalSlides;
		this.goToSlide(prev);
	}

startAutoPlay() {
		this.stopAutoPlay();
		this.autoPlayInterval = setInterval(() => {
			this.nextSlide();
		}, 2000);

this.progressBar.style.transform = "scaleX(1)";
	}

stopAutoPlay() {
		if (this.autoPlayInterval) {
			clearInterval(this.autoPlayInterval);
			this.autoPlayInterval = null;
		}
		this.progressBar.style.transform = "scaleX(0)";
	}

updateProgress() {
		this.progressBar.style.transition = "none";
		this.progressBar.style.transform = "scaleX(0)";

setTimeout(() => {
			this.progressBar.style.transition = "transform 5s linear";
			if (this.autoPlayInterval) {
				this.progressBar.style.transform = "scaleX(1)";
			}
		}, 50);
	}
}

// Initialize carousel when DOM is loaded
document.addEventListener("DOMContentLoaded", () => {
	new SlantedCarousel();
});

// Add some extra visual flair
document.addEventListener("mousemove", (e) => {
	const mouseX = e.clientX / window.innerWidth;
	const mouseY = e.clientY / window.innerHeight;

document.querySelectorAll(".slide-background").forEach((bg, i) => {
		const speed = (i + 1) * 0.5;
		const xPos = (mouseX - 0.5) * 1.5 * speed;
		const yPos = (mouseY - 0.5) * speed;

bg.style.transform += ` translate(${xPos}px, ${yPos}px)`;
	});
});

Comments 0

…