JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://rawgithub.com/briangonzalez/jquery.pep.js/master/src/jquery.pep.js"></script>
<script src="http://foci.sb-studio.co.uk/js/jquery.zoomooz.min.js"></script>
<div class="centerdiv">
    <div class="container" class="zoomTarget" data-targetsize="0.6">
        <div id="follower">
            <div class="middle">
            </div>
        </div>
    </div>
</div>

<div class="zoom-buttons">
    <div class="zoom-out">-</div>
    <div class="zoom-in">+</div>
</div>

CSS

#follower {
    position: absolute;
    background-color: yellow;
    width: 1000px;
    height: 1000px;
    border-radius: 50px;
    cursor: move;
}

.middle {
    position: absolute;
    width: 200px;
    height: 200px;
    background: black;
    top: 50%;
    margin-top: -100px;
    left: 50%;
    margin-left: -100px;
}

.centerdiv {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    position: fixed;
    overflow: hidden;
}

.container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    border: 1px solid #000000;
}

.zoom-buttons {
    position: fixed;
    width: auto;
    height: auto;
    top: 30px;
    right: 30px;
    z-index: 9999;
}

.zoom-out,
.zoom-in {
    display: inline-block;
    margin: 20px;
    cursor: pointer;
}

JavaScript

$(function() {
      $('#follower').pep();
  });


  $(document).ready(function() {
      var currentZoom = 1.0;

      $('.zoom-in').click(function() {
          $('#follower').animate({
              'zoom': currentZoom += .1
          }, 400);
      });

      $('.zoom-out').click(function() {
          $('#follower').animate({
              'zoom': currentZoom -= .1
          }, 400);
      });
      
  });