GIS Happy friendship Day!

gis-happy-friendship-day.markdown

GIS Happy friendship Day!

A Pen by Manajit Pal on CodePen.

License.

index.html

  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  <bokeh></bokeh>
  
  <div class="card">
  <div class="card-content">
    <h1>Happy Friendship Day 🎉</h1>
    <p class="related">🌟 To all my GIS friends 🌟</p>
    <p><small>by <a href="https://github.com/ManajitPal" target="_blank">Manajit Pal</a> </small></p>

  </div>
</div>

script.js

var card = $(".card");
$(document).on("mousemove",function(e) {  
  var ax = -($(window).innerWidth()/2- e.pageX)/20;
  var ay = ($(window).innerHeight()/2- e.pageY)/10;
  card.attr("style", "transform: rotateY("+ax+"deg) rotateX("+ay+"deg) translateZ(7em)");
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

@import url('https://fonts.googleapis.com/css?family=Concert+One|Pacifico');

body{
 background: radial-gradient(ellipse at center, rgba(83,40,188,1) 0%,rgba(44,17,141,1) 100%);
  perspective: 1000px;
  display: flex;
  transform-style: preserve-3d;
  font-family: "Pacifico",cursive;
}
.card{
  top: 20vh;
  pointer-events: none;
  transform: translateZ(7em);
  padding: 30px;
  background: linear-gradient(to bottom, #020333 0%,#020333 75%,#ffffff 75%,#ffffff 100%);
  
  border-radius: 5px;
  width: 400px;
  height: 250px;
  margin: auto;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  display: flex;
  box-shadow: 0 0 5px rgba(0,0,0,.1);
  position: relative;
  
  &:after{
    content:" ";
    position: absolute;
    width: 100%;
    height: 10px;
    border-radius: 50%;
    left:0;
    bottom:-50px;
    box-shadow: 0 30px 20px rgba(0,0,0,.3);
    
  }

  .card-content{
    margin: auto;
    text-align:center;
    transform-style: preserve-3d;
  
  }
  h1{
    transform: translateZ(100px);
    color: #e0e0c8;
    font-size: 2.7em;
    font-weight: 400;
  }

  p{
    transform: translateZ(50px);
    color: #dc7532;
    font-size: 1.7em;
    display: block;
    
  }
    .related{
      transform: translateZ(80px);
      color: #c04f87;
      font-size: 1.7em;
      font-family: 'Concert One', cursive;
      font-weight: 400;
    }
  
  a{
    color:#dc7532;
    pointer-events: auto;
    } 
  }

$colors: #F38181, #FCE38A, #EAFFD0, #95E1D3;

bokeh {
  position: fixed;
  width: 5vmin;
  height: 5vmin;
  border-radius: 50%;
  animation-name: explosion;
  animation-iteration-count: infinite;
  animation-direction: reverse;
  animation-timing-function: cubic-bezier(0.84, 0.02, 1, 1);
  @for $i from 1 through 100 {
    &:nth-child(#{$i}) {
      $color: ceil(random() * 4);
      background-color: nth($colors, $color);
      $x: random() * 100vw;
      $y: random() * 100vh;
      transform: translate($x, $y);
      animation-duration: random() * 3s + 2s;
      animation-delay: random() * -5s;
    }
  }
}
@keyframes explosion {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translate(50vw, 50vh);
  }
}