Conversa Logo

by lucav

HTML

<div class="Container" id="Main-Container">
  <div id="LO_BRSQ">


    <svg id="Square" class="BRSQ" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 324.82 325.5">
      <defs>
        <style>
          .cls-1 {
            fill: none;
          }
          
          .cls-2 {
            isolation: isolate;
          }
          
          .cls-3 {
            clip-path: url(#clip-path);
          }
          
          .cls-4 {
            fill: url(#Sfumatura_senza_nome_15);
          }
          
          .cls-5 {
            clip-path: url(#clip-path-2);
          }
          
          .cls-6 {
            fill: url(#Sfumatura_senza_nome_15-2);
          }
          
          .cls-7 {
            fill: #ececee;
          }
          
          .cls-8 {
            fill: url(#Sfumatura_senza_nome_15-3);
          }

        </style>
        <clipPath id="clip-path">
          <path id="SVGID" class="cls-1" d="M250.35,183.75l-5.9,5.81-2.93,2.89-5.84,5.76-5.8,5.72L227,206.78l-5.75,5.66c-1.71,1.69-4,3.95-5.71,5.63l-2.84,2.81-5.65,5.57c-1.69,1.67-3.94,3.88-5.62,5.55l-2.8,2.76-5.57,5.49a33.58,33.58,0,0,0,4.12-4.92,34.85,34.85,0,0,0,3.19-5.76,40.34,40.34,0,0,0,2.21-6.58,47,47,0,0,0,1.17-7.38,64,64,0,0,0-.85-17.12,69.4,69.4,0,0,0-5-15.79,104,104,0,0,0-8.53-15.17c-3.36-5-7.2-10.09-11.42-15.27l55.64-58.11c4.37,5.32,8.35,10.51,11.84,15.67a109.88,109.88,0,0,1,8.92,15.54,73.08,73.08,0,0,1,5.35,16.11,65.65,65.65,0,0,1,1.14,17.41,48,48,0,0,1-1.07,7.47A38.63,38.63,0,0,1,257.6,173a34.07,34.07,0,0,1-3.15,5.81A32.5,32.5,0,0,1,250.35,183.75Z"
          />
        </clipPath>
        <linearGradient id="Sfumatura_senza_nome_15" x1="1145.82" y1="-1019.05" x2="1194.48" y2="-1244.27" gradientTransform="matrix(0.39, -0.92, 0.92, 0.39, 855.75, 1717.34)" gradientUnits="userSpaceOnUse">
          <stop offset="0" stop-color="#f7b000" />
          <stop offset="0.24" stop-color="#dd0080" />
          <stop offset="0.46" stop-color="#622b85"...

CSS

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #EEE;
}

#Main-Container {
  min-height: 100%;
  position: relative;
}

#LO_BRSQ {
  width: 40%;
  height: 40%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  perspective: 1600px;
}

.BRSQ {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: center center;
  backface-visibility: visible;
  transform: rotateX( 0deg);
  transition: transform 50ms ease;
  //-webkit-transition-delay: 10ms !important;
}

#Square {
  fill: #D25063;
}


/*#Shadow { 
  -webkit-transform: rotateX( -30deg );
}

#LO_BRSQ:hover .BRSQ {
  -webkit-transform: rotateX( 30deg ) rotateY( -90deg );
}*/

.notransition,
.notransition #LO_BRSQ,
.notransition .BRSQ {
  transition-duration: 0 !important;
  transition-delay: 0 !important;
}

.transition-reset,
.transition-reset #LO_BRSQ,
.transition-reset .BRSQ {
  transition-duration: 600ms !important;
}

JavaScript

$(function() {
  var doc = $(document),
    body = $("body"),
    docWidth = doc.width(),
    docHeight = doc.height(),
    horiz = 0,
    vert = 0,
    x,
    y,
    range = 30;

  /*console.log("docWidth: "+docWidth);
  console.log("docHeight: "+docHeight);
  console.log("range: "+range);*/

  function noTransition() {
    body.removeClass("transition-reset"); //addClass("notransition");
  }

  function followMouse() {
    horiz = ((range * 2) * (x / docWidth)) - range;
    vert = -(((range * 2) * (y / docHeight)) - range);
    $("#LO_BRSQ .BRSQ").css("transform", "rotateX(" + vert + "deg) rotateY(" + horiz + "deg)");
    noTransition();
  }

  function reset() {
    body.removeClass("notransition").addClass("transition-reset");
    $("#LO_BRSQ .BRSQ").css("transform", "");
  }


  doc.mousemove(function(e) {
    x = e.pageX;
    y = e.pageY;
  });

  doc.mousemove($.throttle(50, followMouse));

  doc.on({
    mouseleave: function() {
      reset();
    },
    mousedown: function() {
      reset();
    }
  });

});

/*
 * jQuery throttle / debounce - v1.1 - 3/7/2010
 * http://benalman.com/projects/jquery-throttle-debounce-plugin/
 * 
 * Copyright (c) 2010 "Cowboy" Ben Alman
 * Dual licensed under the MIT and GPL licenses.
 * http://benalman.com/about/license/
 */
(function(b, c) {
  var $ = b.jQuery || b.Cowboy || (b.Cowboy = {}),
    a;
  $.throttle = a = function(e, f, j, i) {
    var h, d = 0;
    if (typeof f !== "boolean") {
      i = j;
      j = f;
      f = c
    }

    function g() {
      var o = this,
        m = +new Date() - d,
        n = arguments;

      function l() {
        d = +new Date();
        j.apply(o, n)
      }

      function k() {
        h = c
      }
      if (i && !h) {
        l()
      }
      h && clearTimeout(h);
      if (i === c && m > e) {
        l()
      } else {
        if (f !== true) {
          h = setTimeout(i ? k : l, i === c ? e - m : e)
        }
      }
    }
    if ($.guid) {
      g.guid = j.guid = j.guid ||...