Un código de NotYoEA

1,670 NotYoEA

Abrir en el editor Publica tu código

Recomendado

31 January 2026

Cargador WebGL de Tattletail Unity con barra de progreso

18 August 2024

Casilla de verificación / ¿Desarrollador o diseñador?

19 September 2023

Animación de texto al desplazarse

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EnglPlay</title>
    <link rel="stylesheet" href="css/styleIndex.css">
</head>
<body>
    <header>
        <div class="logo">
            <img src="images/logo.png" alt="Logo">
            <span class="platform-name">EnglPlay</span>
        </div>
        <div class="search-container">
            <input type="text" placeholder="Buscar Actividades...">
            <button class="btn-buscar">Buscar</button>
        </div>
        <nav>
            <ul>
                <li><a href="#" id="all-activities-button">Todas las actividades</a></li>
                <li><a href="#">Tipos de actividades</a></li>
                <li><a href="#">Centro de ayuda</a></li>
                <li><a href="#">Blog</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <div class="carousel">
            <button class="arrow left-arrow">◀</button>
            <div class="carousel-inner">
                <div class="banner" style="background-image: url('images/G1.png');">
                    <h1>Prueba el nuevo <br> Mapa Interactivo</h1>
                    <button class="btn-jugar">Jugar</button>
                </div>
                <div class="banner" style="background-image: url('images/G2.png');">
                    <h1>Explora nuestros <br> Juegos Educativos</h1>
                    <button class="btn-jugar">Empezar</button>
                </div>
                <div class="banner" style="background-image: url('images/G3.png');">
                    <h1>Aprende mientras <br> te diviertes</h1>
                    <button class="btn-jugar">Descubrir</button>
                </div>
                <div class="banner" style="background-image: url('images/G4.png');">
                    <h1>Aprende mientras <br> te diviertes</h1>
                    <button class="btn-jugar">Descubrir</button>
                </div>
                <div class="banner" style="background-image: url('images/G5.jpg');">
                    <h1>Aprende lo básico en inglés</h1>
                    <div class="roulette-container">
                        <canvas id="roulette" width="500" height="500"></canvas>
                        <button class="btn-spin">Girar</button>
                    </div>
                </div>
            </div>
            <button class="arrow right-arrow">▶</button>
        </div>
        <section id="activities" class="activities-section">
            <div class="activities-grid">
                <div class="activity" style="background-image: url('images/G1.png');">
                    <h2>Mapa Interactivo</h2>
                </div>
                <div class="activity" style="background-image: url('images/G2.png');">
                    <h2>Juegos Educativos</h2>
                </div>
                <div class="activity" style="background-image: url('images/G3.png');">
                    <h2>Diviértete</h2>
                </div>
                <div class="activity" style="background-image: url('images/G3.png');">
                    <h2>Diviértete</h2>
                </div>
                <div class="activity" style="background-image: url('images/G4.png');">
                    <h2>Aprende Inglés</h2>
                </div>
            </div>
        </section>
    </main>
    <script src="js/scriptIndex.js"></script>
    <script src="js/roulette.js"></script>
</body>
</html>

CSS

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

body, html {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #32CD32;
    padding: 10px 20px;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

.platform-name {
    font-size: 24px;
    color: white;
    font-weight: bold;
}

.search-container {
    display: flex;
    align-items: center;
}

.search-container input {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px 0 0 5px;
    outline: none;
}

.btn-buscar {
    background-color: #FFD700;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 0 5px 5px 0;
    color: black;
}

nav ul {
    display: flex;
    list-style: none;
}

nav ul li {
    margin: 0 10px;
}

nav ul li a {
    text-decoration: none;
    color: white;
    font-size: 16px;
    padding: 10px 20px;
    background-color: #228B22; /* Verde más oscuro */
    border-radius: 5px;
    transition: background-color 0.3s;
}

nav ul li a:hover {
    background-color: #196619; /* Un verde aún más oscuro para el hover */
}

main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 100vh;
    text-align: center;
    overflow: hidden;
}

.carousel.hidden {
    height: 0;
    overflow: hidden;
    transition: height 0.5s ease-out;
}

.carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 500%; /* Para asegurar que todas las diapositivas quepan en el contenedor */
    height: 100%;
}

.banner {
    min-width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    position: relative;
}

.banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
    z-index: 1;
}

.banner h1,
.banner .btn-jugar {
    position: relative;
    z-index: 2;
}

.banner h1 {
    font-size: 36px;
    margin-bottom: 20px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Sombra del texto */
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
    border-radius: 5px;
}

.btn-jugar {
    background-color: #32CD32;
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 5px;
}

.arrow {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    padding: 10px;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    transition: background 0.3s, transform 0.3s;
}

.arrow:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: translateY(-50%) scale(1.1);
}

.left-arrow {
    left: 10px;
}

.right-arrow {
    right: 10px;
}

.roulette-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    position: relative;
    z-index: 3;
}

#roulette {
    border: 5px solid #000;
    border-radius: 50%;
}

.btn-spin {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #32CD32;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    z-index: 4;
}

.banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.banner h1,
.banner .btn-jugar {
    position: relative;
    z-index: 2;
}

.banner h1 {
    font-size: 36px;
    margin-bottom: 20px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
}

.activities-section {
    opacity: 0;
    transform: translateY(-100px);
    transition: all 0.5s ease-out;
    padding: 20px;
    background-color: #f9f9f9;
    display: none;
}

.activities-section.active {
    opacity: 1;
    transform: translateY(0);
    display: block;
}

.activities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.activity {
    background-size: cover;
    background-position: center;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    border-radius: 10px;
}

.carousel {
    transition: transform 0.5s ease-out;
    overflow: hidden;
    position: relative;
}

.carousel.hidden {
    transform: translateY(100%);
    height: 0;

}

.fullscreen-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 9999;
    animation: zoomOut 1s forwards, darken 1s forwards;
}

@keyframes zoomOut {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
    }
}

@keyframes darken {
    from {
        background-color: rgba(0, 0, 0, 0);
    }
    to {
        background-color: rgba(0, 0, 0, 0.7);
    }
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    opacity: 0;
    animation: fadeIn 1s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

let currentSlide = 0;
const slides = document.querySelectorAll('.carousel-inner .banner');
const totalSlides = slides.length;

const clickSound = new Audio('sfx/click-sound.wav');
const playSound = new Audio('sfx/play-sound.wav');

clickSound.volume = 0.05;
playSound.volume = 0.05;

document.querySelector('.left-arrow').addEventListener('click', () => {
    currentSlide = (currentSlide > 0) ? currentSlide - 1 : totalSlides - 1;
    updateSlide();
    clickSound.play();
});

document.querySelector('.right-arrow').addEventListener('click', () => {
    currentSlide = (currentSlide < totalSlides - 1) ? currentSlide + 1 : 0;
    updateSlide();
    clickSound.play();
});

document.querySelectorAll('.btn-jugar').forEach(button => {
    button.addEventListener('click', (event) => {
        playSound.play();
        const banner = event.target.closest('.banner');
        const backgroundImage = window.getComputedStyle(banner).backgroundImage;
        
        const fullscreenDiv = document.createElement('div');
        fullscreenDiv.className = 'fullscreen-background';
        fullscreenDiv.style.backgroundImage = backgroundImage;
        document.body.appendChild(fullscreenDiv);
        
        const overlayDiv = document.createElement('div');
        overlayDiv.className = 'overlay';
        document.body.appendChild(overlayDiv);

setTimeout(() => {
            fullscreenDiv.remove();
            overlayDiv.remove();
        }, 1000);
    });
});

function updateSlide() {
    const carouselInner = document.querySelector('.carousel-inner');
    const offset = -currentSlide * 100;
    carouselInner.style.transform = `translateX(${offset}%)`;
}

document.getElementById('all-activities-button').addEventListener('click', () => {
    const carousel = document.querySelector('.carousel');

carousel.style.height = `${carousel.scrollHeight}px`;

setTimeout(() => {

carousel.classList.add('hidden');
        carousel.style.height = '0';

setTimeout(() => {
            
            carousel.style.display = 'none';
            document.getElementById('activities').classList.add('active');
            document.getElementById('activities').scrollIntoView({ behavior: 'smooth' });
        }, 500);
    }, 0);

clickSound.play();
});

updateSlide();