Depot43-Unterlagen - Inserate Bereich

Code Elemente - HTML - CSS - JS

            
            

<!doctype html>
<html lang="de">
<head>
  <meta charset=utf-8>
  <title>GSAP - Greensock</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">


	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>

 

  <!-- CSS *************************** -->
  <style>
        div.scrollplatz {
            width:500px;
	   height:1000px;
            background-color:#ccc;
            border:1px solid black;
            display:flex;
            text-align: center;
            justify-content: center;
        }
        section.advers {
            height:0px;
            width:500px;
            overflow:hidden;
            background:transparent;
            border:0px;
        }
  </style>
  </head>

<!-- HTML *************************** -->
<body>
	<div class="scrollplatz">Platz zum scrollen</div>
	<section class="advers"><h2>Das ist ein Inserat</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores perspiciatis tempora quas, possimus beatae illo exercitationem eius cumque. Quos accusamus quae voluptas laboriosam nulla tenetur totam, minima explicabo sapiente sint?</p></section>
	<div class="scrollplatz">Platz zum scrollen</div>

  <!-- Javascript ************************ -->
  <script type="text/javascript">
  
    	  gsap.registerPlugin(ScrollTrigger);

	  gsap.to(".advers", {
		  scrollTrigger: {
			  trigger: ".advers",
			  toggleActions: "restart reverse restart reverse"
		  },
		  height:200,
		  duration:2
	  });
  
  </script>
</body>
</html>




            

Idee

Einen Bereich für Inserate soll vom Inhalt getrennt werde, etwas Aufmerksamkeit generieren indem sich der Bereich beim scrollen öffnet und schliesst.

GSAP - Inserate Bereich

Idee