Camilla Schoeser
106 lines
3.4 KiB
HTML
106 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Présentation Animée</title>
|
|
|
|
<!-- CSS -->
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
|
|
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
|
|
|
|
<!-- Swiper JS -->
|
|
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Conteneur des images de fond -->
|
|
<div class="bg-container">
|
|
<img src="bg1.jpg" class="bg-image active">
|
|
<img src="bg2.jpg" class="bg-image">
|
|
<img src="bg3.jpg" class="bg-image">
|
|
</div>
|
|
|
|
<section class="slide" data-bg="0">
|
|
<h1 data-aos="fade-up">My experience in The Netherlands</h1>
|
|
<h2 data-aos="fade-up">Blabla</h2>
|
|
</section>
|
|
|
|
<section class="slide" data-bg="1">
|
|
<p data-aos="fade-right">Voici mon premier point important.</p>
|
|
<img src="image1.jpg" data-aos="zoom-in">
|
|
</section>
|
|
|
|
<section class="slide" data-bg="2">
|
|
<p data-aos="fade-left">Un autre point avec une image.</p>
|
|
<img src="image2.jpg" data-aos="fade-up">
|
|
</section>
|
|
|
|
<section class="slide" data-bg="3">
|
|
<!-- Swiper Slider -->
|
|
<div class="slider-container">
|
|
<div class="swiper mySwiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide"><img src="image1.jpg" alt="Image 1"></div>
|
|
<div class="swiper-slide"><img src="image2.jpg" alt="Image 2"></div>
|
|
<div class="swiper-slide"><img src="image3.jpg" alt="Image 3"></div>
|
|
</div>
|
|
|
|
<!-- Flèches de navigation -->
|
|
<div class="swiper-button-next"></div>
|
|
<div class="swiper-button-prev"></div>
|
|
|
|
<!-- Pagination -->
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
<!-- AOS Animations -->
|
|
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
|
|
<script>
|
|
AOS.init();
|
|
</script>
|
|
|
|
<!-- Script pour changement d'image fluide -->
|
|
<script>
|
|
const images = document.querySelectorAll(".bg-image");
|
|
const sections = document.querySelectorAll(".slide");
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
let bgIndex = entry.target.getAttribute('data-bg');
|
|
images.forEach((img, index) => {
|
|
img.classList.toggle("active", index == bgIndex);
|
|
});
|
|
}
|
|
});
|
|
}, { threshold: 0.5 });
|
|
|
|
sections.forEach(section => {
|
|
observer.observe(section);
|
|
});
|
|
</script>
|
|
|
|
<!-- Script Swiper -->
|
|
<script>
|
|
var swiper = new Swiper(".mySwiper", {
|
|
loop: true,
|
|
navigation: {
|
|
nextEl: ".swiper-button-next",
|
|
prevEl: ".swiper-button-prev",
|
|
},
|
|
pagination: {
|
|
el: ".swiper-pagination",
|
|
clickable: true,
|
|
},
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|