Scribd
Upload
14 views

Didiy

Uploaded by

maylaamadeh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
14 views

Didiy

Uploaded by

maylaamadeh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 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