hello

<img id= 'openPopup' src='https://rihs-creates.neocities.org/Site_Images/7rfcbJ3u_400x400.png'>

<div id = 'popup'>
	<div id= 'popupHeader'>
    	Hiiiiiii
    </div>
   		:3
    <div id= 'closePopup'> 
    	Begone!
	</div>
</div>

<div></div>
<div id="trigger1" class="spacer s0"></div>
<div id="reveal1" class="box2 blue">
	<p>I will be revealed when scrolled into view and hidden when scrolled past.</p>

</div>
<div class="spacer s2"></div>

<div></div>
<div id="trigger1" class="spacer s0"></div>
<div id="reveal1" class="box2 blue">
	<p>I will be revealed when scrolled into view and hidden when scrolled past.</p>

</div>
<div class="spacer s2"></div>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<div></div>
<div id="trigger1" class="spacer s0"></div>
<div id="reveal1" class="box2 blue">
	<p>I will be revealed when scrolled into view and hidden when scrolled past.</p>

</div>
<div class="spacer s2"></div>

<div></div>
<div id="trigger1" class="spacer s0"></div>
<div id="reveal1" class="box2 blue">
	<p>I will be revealed when scrolled into view and hidden when scrolled past.</p>

</div>
<div class="spacer s2"></div>
<style>

#popup {
  position: absolute;
  z-index: 9;
  text-align: center;
  border: 1px solid #FFE17B;
  border-radius: 25px;
  background-color: #321E1E;
  color: white;
  display:none;
  width: 150px;
}

#popupHeader {
 padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #FFE17B;
  color: black;
  border-radius: 21px 21px 0px 0px;

}

#popup.show {
display: initial;
}

#openPopup {
cursor: pointer;
}

#closePopup {
cursor: pointer;
border: 1px solid #FFE17B;
margin: 5px;
}
</style>

<style type="text/css">
	#reveal1 {
		opacity: 0;
		-webkit-transform: scale(0.9);
			 -moz-transform: scale(0.9);
				-ms-transform: scale(0.9);
				 -o-transform: scale(0.9);
						transform: scale(0.9);
		-webkit-transition: all 1s ease-in-out;
			 -moz-transition: all 1s ease-in-out;
				-ms-transition: all 1s ease-in-out;
				 -o-transition: all 1s ease-in-out;
						transition: all 1s ease-in-out;
	}
	#reveal1.visible {
		opacity: 1;
		-webkit-transform: none;
			 -moz-transform: none;
				-ms-transform: none;
				 -o-transform: none;
						transform: none;
	}
</style>

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
<script>
	// init controller
	var controller = new ScrollMagic.Controller();
</script>

<script>
		// build scene
		new ScrollMagic.Scene({
							triggerElement: "#trigger1",
							triggerHook: 0.9, // show, when scrolled 10% into view
							duration: "80%", // hide 10% before exiting view (80% + 10% from bottom)
							offset: 50 // move trigger to center of element
						})
						.setClassToggle("#reveal1", "visible") // add class to reveal
						.addIndicators() // add indicators (requires plugin)
						.addTo(controller);
</script>
<script>


	let popupdiv = document.querySelectorAll("#popup")
	let myButton = document.querySelector("#openPopup")
    let closePopup = document.querySelector("#closePopup")
           
           openPopup.addEventListener(
                "click",
                function () {
                    popup.classList.add("show");
                }
            );
            
            closePopup.addEventListener(
                "click",
                function () {
                    popup.classList.remove(
                        "show"
                    );
                }
            );
            window.addEventListener(
                "click",
                function (event) {
                    if (event.target == popup) {
                        popup.classList.remove(
                            "show"
                        );
                    }
                }
            );
            
//Make the DIV element draggagle:
dragElement(document.getElementById("popup"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "popupHeader")) {
    /* if present, the header is where you move the DIV from:*/
    document.getElementById(elmnt.id + "popupHeader").onmousedown = dragMouseDown;
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }

}

	
        </script>