Chapter 4: Baseball

HTML

<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/utils/Draggable.min.js'></script>
   <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <div id="container"></div>
   <script src='https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js'></script>

CSS

#container {
  position: relative;
  height: 100vh;
  width: 100%;
  }

JavaScript

var heightOfWindow = $(window).height();
var widthOfWindow = $(window).width();

var heightOfWindowtwo = heightOfWindow/2;
var widthOfWindowtwo = widthOfWindow/2;

var paper = Raphael(0, 0, widthOfWindow, heightOfWindow),
   HOME_PLATE = { x: widthOfWindowtwo-45, y: heightOfWindowtwo-45 };
    
   paper.rect(HOME_PLATE.x, HOME_PLATE.y, 90, 90).attr({stroke: "none", fill: "#993300"}).attr("transform", "R-135 ");
    
   // paper.text(300,110,"PURPLESTRAW").attr("font","90px futura").attr("font-style", "italic").attr("fill","black").shadow ();
   
   /* $("#container").mousemove(function(e) {
  parallaxIt(e, ".slide", -500);
//  parallaxIt(e, "img", -30);
});

function parallaxIt(e, target, movement) {
  var $this = $("#container");
  var relX = e.pageX - $this.offset().left;
  var relY = e.pageY - $this.offset().top;

  TweenMax.to(target, 1, {
    x: (relX - $this.width() / 2) / $this.width() * movement,
    y: (relY - $this.height() / 2) / $this.height() * movement
  });
}*/