روشن و خاموش کردن صفحه وب

نویسنده :

حرکتی جالب و باحال برای صفحات وب  شب و روز شدن صفحه وبسایت

حرکتی جالب و باحال برای صفحات وب 

شب و روز شدن صفحه وبسایت

کد زیر برای CSS میباشد

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

svg {
  scale: .7;
  z-index: 2;
  pointer-events: none;
}

#day, #night {
  width: 240px;
  height: 110px;
  background: white;
  position: absolute;
  z-index: 1;
  cursor: pointer;
  border-radius: 100px;
  background: #9cd6ef;
  border: 6px solid #65c0e7;
}

#night {
  pointer-events: none;
}

#background {
  width: 100%;
  height: 100vh;
  position: absolute;
  background: #d3edf8;
  z-index: -1;
}

@media (max-width: 720px) {
  #day, #night {
    width: 320px;
    height: 150px;
  }
  svg {
    scale: .95;
  }
}

کد زیر فایل جاوا

gsap.set("#moon, .star", {opacity: 0});
gsap.set("#sun, #cloud, #moon", {x: 15});
gsap.set(".star", {x: 35, y: -5});

$("#day").click(function(){
  gsap.to("#sun", 1, {x: -157, opacity: 0, ease: Power1.easeInOut});
  gsap.to("#cloud", .5, {opacity: 0, ease: Power1.easeInOut});
  gsap.to("#moon", 1, {x: -157, rotate: -360, transformOrigin: "center", opacity: 1, ease: Power1.easeInOut});
  gsap.to(".star", .5, {opacity: 1, ease: Power1.easeInOut});
  gsap.to("#night", 1, {background: "#224f6d", borderColor: "#cad4d8", ease: Power1.easeInOut});
  gsap.to("#background", 1, {background: "#0d1f2b", ease: Power1.easeInOut});
  $(this).css({"pointer-events": "none"});
  
  setTimeout(function(){
    $("#night").css({"pointer-events": "all"})
  }, 1000);
});

$("#night").click(function(){
  gsap.to("#sun", 1, {x: 15, opacity: 1, ease: Power1.easeInOut});
  gsap.to("#cloud", 1, {opacity: 1, ease: Power1.easeInOut});
  gsap.to("#moon", 1, {opacity: 0, x: 35, rotate: 360, transformOrigin: "center", ease: Power1.easeInOut});
  gsap.to(".star", 1, {opacity: 0, ease: Power1.easeInOut});
  gsap.to("#night", 1, {background: "#9cd6ef", borderColor: "#65c0e7", ease: Power1.easeInOut});
  gsap.to("#background", 1, {background: "#d3edf8", ease: Power1.easeInOut});
  $(this).css({"pointer-events": "none"});
  
  setTimeout(function(){
    $("#day").css({"pointer-events": "all"})
  }, 1000);
});

کد زیر را داخل body قرار دهید