Забавная анимация скроллинга

<style>
 
 
 
#sticky {
 
  position: sticky;
 
  background: #F762BC;
 
  width: 100px;
 
  height: 100px;
 
  top: 70px;
 
  left: 10px;
 
  display: flex;
 
  justify-content:center;
 
  align-items:center;
 
  box-shadow: 0 0 6px #000;
 
  text-shadow: 0 0 4px #fff
 
}
 
 
 
#wrapper {
 
  width: 75%;
 
  margin: auto;
 
  height: 400px;
 
  background-color: #ccc;
 
}
 
 
 
.extra{
 
  background: #ccc;
 
  width: 75%;
 
  margin: auto;
 
  height: 100px;
 
}
 
 
 
body {
 
  height: 1000px;
 
  font-family: georgia;
 
}
 
h4{
 
  text-align: center;
 
}
 
</style>
 
<h4>Scroll to see the sticky element <em>sticking</em></h4>
 
<div class="extra"></div>
 
<br />
 
<div id="wrapper">
 
  <div id="sticky">
 
    sticky
 
  </div>
 
</div>
 
<br />
 
<div class="extra"></div>