Interactie gemaakt

#7 Helaas niet aan de darkmode toegekomen op een kleine body verandering na dan. Wel scroll animations gemaakt!

index.html

@@ -33,46 +33,46 @@
 
     </header>
 
-    <section class="banner">
+    <section class="banner" class="hidden">
             <!-- slideshow front page -->
      <!-- Hier moeten nog alt-texten bij -->
     <div class="slideshowfront"> </div>
 
-    <div class="breadandbutter">
-        <img src="assets/Overig/b&b-black.svg">
-        <img src="assets/Overig/b&b-white.svg">
 
-        <div class="blackspace"></div>
+    </section class="hidden">
+        <div class="breadandbutter">
+            <img src="assets/Overig/b&b-black.svg" class="logo-lightmode">
+            <img src="assets/Overig/b&b-white.svg" class="logo-darkmode">
+        </div>
 
-    </div>
-    </section>
-
-    <section>
+    <section class="hidden">
         <h1>The Future of <span>Accesibitily<span></h1>
                 <p>On November 28, we hosted our first Bread & Butter event—a moment to share insights and connect with clients. This edition focused on “The Future of Accessibility”, featuring a workshop by the inspiring <span> Fresco Sam-Sin </span> and a talk from Tizian Fendt, UX Designer at JUST.</p>
                 <p> Together, we explored innovative ideas and actionable strategies to make accessibility a priority in today’s ever-evolving world. Stay tuned for our next Bread & Butter event, where we’ll continue fostering meaningful conversations and empowering our community with knowledge. </p>
     </section>
 
-    <section>
+    <section class="hidden">
         <h2> Why accessiblity matters </h2>
                 <p>Accessibility matters because 1.3 billion people worldwide, including 2 million in the Netherlands, experience significant disabilities, and over half of Dutch smartphone users rely on accessibility settings to navigate their devices. </p>
     </section>
 
-    <section class="quote">
+    <section  class="hidden" class="quote">
+        <div class="textballoon">
         <h2>Digital Accessibility improves the experience for all users, not just those with disabilities.</h2>
             <p>Tizian Fendt, UX designer at JUST</p>
+        </div>
             <img class="sample" src="assets-student/61ffd1e68159f61573be4a90_portfolio-hero.jpg">
         </section>
 
-    <section>
+    <section class="hidden" class="mindsetshift" >
         <h2> Why we need a minset shift </h2>
             <p>Neglecting to prioritize accessibility not only excludes a significant portion of your audience but also means missing out on a range of advantages that can greatly enhance your digital presence. Accessible design leads to a better overall user experience for everyone, as it ensures your website is intuitive and easy to navigate. 
                 It also often results in faster loading times, as accessibility improvements typically streamline functionality and optimize performance. 
                 Additionally, websites that prioritize accessibility tend to rank higher on Google, as search engines reward sites with better usability and structure. This improved SEO translates to greater visibility, helping you reach more potential customers. 
                 Ultimately, by embracing accessibility, you not only foster inclusivity but also enjoy higher conversion rates, as more users can engage seamlessly with your content or services.</p>
     </section>
 
-    <section class="next-events">
+    <section class="hidden" class="next-events" >
         <h2>Join our next events</h2>
             <p>Do you want to join our next Bread & Butter event? Leave your email and we’ll keep you up to date.</p>
 

script/script.js

@@ -1,5 +1,31 @@
-const clicking = document.querySelector('.breadandbutter')
+const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+        console.log(entry)
+        if (entry.isIntersecting) {
+        entry.target.classList.add('show');
+    } 
+    else {
+        entry.target.classList.remove('show');
+    }
+    });
+});
+
+const hiddenElements = document.querySelectorAll('.hidden')
+hiddenElements.forEach((el) => observer.observe(el));
+
+
+const pagebody = document.getElementsByTagName('body')[0];
+const togglebtn = document.getElementById('theme');
+const pageSection = document.getElementsByTagName('section')[0];
+
+togglebtn.addEventListener('click', (e) => {
+    pagebody.classList.toggle('lightmode');
+    pageSection.classList.toggle('lightmode');
+})
+
+
+// turning bread and butter
+
+
+// scroll CSS animation
 
-    clicking.addEventListener('click', function(){
-        turn.classList.add('turning');
-    });