<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
.gsap-effect section { 
  display:flex;
  justify-content:center;
  align-items:center;
  width:90%;
  max-width:800px;
  margin:0 auto;
  color:#222;
  font-size:2.8em;
  font-weight:700;
}

.full {
	height:100vh; 
	background:#e7fffd ;
    padding-top: 40vh;
    text-align: center;
}

.half { 
	height:50vh; 
	background:#e7fffd 
}

.mini { 
	height:25vh; 
	background:#e7fffd 
}

.gsap-effect .banner { 
	color: #E8E8E8; 
	display:flex;
	align-items:stretch;
}

.first-area {
    width:100%;
    perspective: 700px;
    transform-style: preserve-3d;
}

.first-area-front {
    padding:50px;
    background:#222;
    transform: translatez(50px);
    transform-style: preserve-3d;
}

.first-area-front:before {
    position: absolute;
    content: "";
    width: 100%;
    left: 0;
    height: 50px;
    background-color: #98DED9;
    top: -50px;
    transform-origin: center bottom;
    transform: rotatex(90deg);
}

.first-area-front:after {
    position: absolute;
    content: "";
    width: 100%;
    left: 0;
    height: 50px;
    background-color: #98DED9;
    bottom: -50px;
    transform-origin: center top;
    transform: rotatex(-90deg);
}

.second-area {
    width:100%;
    perspective: 700px;
    transform-style: preserve-3d;
  z-index:-1;
}

.second-area-front {
    padding:50px;
    background:#222;
    transform: translatez(-50px);
    transform-style: preserve-3d;
}

.second-area-front:before {
    position: absolute;
    content: "";
    width: 100%;
    left: 0;
    height: 50px;
    background-color: #98DED9;
    top: -50px;
    transform-origin: center bottom;
    transform: rotatex(-90deg);
}

.second-area-front:after {
    position: absolute;
    content: "";
    width: 100%;
    left: 0;
    height: 50px;
    background-color: #98DED9;
    bottom: -50px;
    transform-origin: center top;
    transform: rotatex(90deg);
}

.third-area {
    width:50%;
    perspective: 700px;
    transform-style: preserve-3d;
}

.third-area-front {
    padding:100px 25px;
    text-align:center;
    background:#222;
    transform: translatez(50px);
    transform-style: preserve-3d;
}

.third-area-front:before {
    position: absolute;
    content: "";
    width: 100%;
    left: 0;
    height: 50px;
    background-color: #404040;
    top: -50px;
    transform-origin: center bottom;
    transform: rotatex(90deg);
}

.third-area-front:after {
    position: absolute;
    content: "";
    width: 100%;
    left: 0;
    height: 50px;
    background-color: #404040;
    bottom: -50px;
    transform-origin: center top;
    transform: rotatex(-90deg);
}

.image {
  width:50%;
  background:url( https://courses.goapp.co.il/wp-content/uploads/2024/07/%D7%9E%D7%93%D7%99%D7%9417_resized.gif) no-repeat;
  background-size:cover;
  background-position:center;
  box-shadow: inset 25px 0px 20px 10px rgba(0,0,0,0.41)
}

.fourth-area {
    width:60%;
    perspective: 700px;
    transform-style: preserve-3d;
  z-index:-1;
}

.fourth-area-front {
    padding:25px;
    background:#222;
    transform: translatez(-50px);
    transform-style: preserve-3d;
}

.fourth-area-front:before {
    position: absolute;
    content: "";
    width: 100%;
    left: 0;
    height: 50px;
    background-color: #98DED9;
    top: -50px;
    transform-origin: center bottom;
    transform: rotatex(-90deg);
}

.fourth-area-front:after {
    position: absolute;
    content: "";
    width: 100%;
    left: 0;
    height: 50px;
    background-color: #98DED9;
    bottom: -50px;
    transform-origin: center top;
    transform: rotatex(90deg);
}

.image2 {
  width:40%;
  background:url(https://courses.goapp.co.il/wp-content/uploads/2024/08/DALL%C2%B7E-2024-08-01-11.42.30-A-stunning-innovative-and-magnetic-3D-website-design.-The-homepage-features-a-sleek-futuristic-interface-with-vibrant-dynamic-animations.-Theres--600x600.jpg) no-repeat;
  background-size:cover;
  background-position:center center;
  border:20px solid #e7fffd;
  box-sizing:border-box;
}

@media (max-width: 991px) {
  section {
    font-size:2em;
  }
  .banner {
    flex-direction:column
  }
  .third-area, .fourth-area {
    width:100%
  }
  .image, .image2 {
	  width:100%;
	  height:300px;
  }
}
</style>
<div class="gsap-effect">
	<section class="full">קסם ה GSAP</section>
	<section class="banner">
	  <div class="first-area">
		<div class="first-area-front">
		  הדגמה לאפקט גלילה תלת מימד<br/>תוך שימוש בספריית<br/>GSAP
		</div>
	  </div>
	</section>
	<section class="mini"></section>
	<section class="banner">
	  <div class="second-area">
		<div class="second-area-front">
		  כמובן<br>זו טעימה פצפונת :)
		</div>
	  </div>
	</section>
	<section class="half">רוצה יותר?</section>
	<section class="banner">
	  <div class="third-area">
		<div class="third-area-front">
		  משחקי טקסט<br>מאלפים
		</div>
	  </div>
	  <div class="image"></div>
	</section>
	<section class="half">גלילה צפה</section>
	<section class="banner">
	  <div class="image2"></div>
	  <div class="fourth-area">
		<div class="fourth-area-front">
		  ובכלל<br>שליטה מלאה מלאה<br>בכללל<br>מה שקורה באתר<br>בכל רגע נתון
		</div>
	  </div>
	</section>
	<section class="full"><a href="https://courses.goapp.co.il/%D7%A7%D7%95%D7%A8%D7%A1-%D7%A7%D7%A1%D7%9D-%D7%94-gsap/">כל הפרטים כאן</a>
	</section>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/ScrollTrigger.min.js'></script>
<script>
gsap.registerPlugin(ScrollTrigger);
gsap.set(".first-area", { perspectiveOrigin: "center -100vh"});
gsap.set(".second-area", { perspectiveOrigin: "center -100vh"});
gsap.set(".third-area", { perspectiveOrigin: "center -100vh"});
gsap.set(".fourth-area", { perspectiveOrigin: "left -100vh"});

gsap.to(".first-area", {
  scrollTrigger: {
    trigger: ".first-area",
    scrub: true,
    start: "top bottom",
    end: "bottom top"
  },
  perspectiveOrigin: "center 100vh", 
  ease: "none"
});

gsap.to(".second-area", {
  scrollTrigger: {
    trigger: ".second-area",
    scrub: true,
    start: "top bottom",
    end: "bottom top"
  },
  perspectiveOrigin: "center 100vh", 
  ease: "none"
});

gsap.to(".third-area", {
  scrollTrigger: {
    trigger: ".third-area",
    scrub: true,
    start: "top bottom",
    end: "bottom top"
  },
  perspectiveOrigin: "center 100vh", 
  ease: "none"
});

gsap.to(".fourth-area", {
  scrollTrigger: {
    trigger: ".fourth-area",
    scrub: true,
    start: "top bottom",
    end: "bottom top"
  },
  perspectiveOrigin: "left 100vh", 
  ease: "none"
});
</script>