Scribd Logo
Upload

Welcome to Scribd!

  • 1 views

    didiy

    Uploaded by

    maylaamadeh

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    didiy

    Uploaded by

    maylaamadeh
    1 views3 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    1 views3 pages

    didiy

    Uploaded by

    maylaamadeh

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    of 3

    1.a)<!

    DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carrossel de Imagens</title>
    <style>
    .carrossel-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    }
    .carrossel-wrapper {
    display: flex;
    transition: transform 0.5s ease;
    }
    .carrossel-slide {
    flex: 0 0 100%;
    }
    .carrossel-slide img {
    width: 300px; /* Ajuste o tamanho conforme necessário */
    height: auto;
    }
    </style>
    </head>
    <body>
    <div class="carrossel-container">
    <div class="carrossel-wrapper">
    <div class="carrossel-slide"><img src="Nanyyyy.JPG" alt="Imagem
    1"></div>
    <div class="carrossel-slide"><img src="Nanyyyy.JPG" alt="Imagem
    2"></div>
    <div class="carrossel-slide"><img src="Nanyyyy.JPG" alt="Imagem
    3"></div>
    </div>
    </div>

    <script>
    const carrosselWrapper = document.querySelector('.carrossel-wrapper');
    const slides = document.querySelectorAll('.carrossel-slide');
    let currentIndex = 0;
    const slideWidth = slides[0].clientWidth;
    const intervalTime = 3000; // Intervalo de 3 segundos (3000 ms)

    function slideNext() {
    currentIndex = (currentIndex + 1) % slides.length;
    carrosselWrapper.style.transition = "transform 0.5s ease-in-out";
    carrosselWrapper.style.transform = `translateX(-${currentIndex *
    slideWidth}px)`;
    }

    setInterval(slideNext, intervalTime);

    // Resetar o carrossel quando chegar ao último slide


    carrosselWrapper.addEventListener('transitionend', () => {
    if (currentIndex === slides.length - 1) {
    carrosselWrapper.style.transition = "none";
    currentIndex = 0;
    carrosselWrapper.style.transform = `translateX(0)`;
    }
    });
    </script>
    </body>
    </html>

    1.b)
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Partículas em Movimento Aleatório com GSAP</title>
    <style>
    body {
    margin: 0;
    overflow: hidden;
    }

    .particle {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: absolute;

    }
    </style>
    </head>
    <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></
    script>
    <script>
    const numParticles = 50;
    const container = document.body;

    for (let i = 0; i < numParticles; i++) {


    const particle = document.createElement('div');
    particle.classList.add('particle');
    container.appendChild(particle);

    const initialX = Math.random() * window.innerWidth;


    const initialY = Math.random() * window.innerHeight;

    gsap.set(particle, { x: initialX, y: initialY });

    gsap.to(particle, {
    x: 'random(0, window.innerWidth)',
    y: 'random(0, window.innerHeight)',
    duration: 'random(2, 4)',
    repeat: -1,
    yoyo: true,
    ease: 'power1.inOut'
    });
    }
    </script>
    </body>
    </html>

    1.c)

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .progress-bar {
    width: 100%;
    height: 30px;
    background-color: #f0f0f0;
    position: relative;
    }

    .filler {
    width: 0;
    height: 100%;
    background-color: #4caf50;
    transition: width 2s ease-in-out;
    }
    </style>
    </head>
    <body>
    <div class="progress-bar">
    <div class="filler"></div>
    </div>

    <script>
    function animateProgressBar() {
    const filler = document.querySelector('.filler');
    let width = 0;
    const interval = setInterval(function() {
    if (width >= 100) {
    clearInterval(interval);
    } else {
    width++;
    filler.style.width = width + '%';
    }
    }, 20); // Ajuste o valor para a velocidade da animação
    }

    animateProgressBar();
    </script>
    </body>
    </html>

    You might also like