Un código de NotYoEA

Abrir en el editor Video Publica tu código

Recomendado

21 October 2024

Botón de pedido animado HTML CSS JavaScript

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;
    }
}

JS

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();

Un código de NotYoEA

Recomendado

Botón de luciérnaga

Control deslizante flotante

Botón de pedido animado HTML CSS JavaScript

HTML

CSS

JS

Recomendado

Botón de luciérnaga

Control deslizante flotante

Botón de pedido animado HTML CSS JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS