Karle Karle - 27 days ago 8
CSS Question

Morphing logo from one into another css

Hey there i am trying to achieve the following morphing effect to a logo,
i tried to do it with the help of jquery but cant figure out how i add the css transitions:

that's the effect i want to achieve (upper left corner) logo :
http://marquez.thememountain.com/regular/

and i tried to do it this way :

html:

<a href="index.html"><img class="o-logo__main" src="img/logo/logo.svg"></a>


css:

.o-logo__main {
left: span(.3);
position: fixed;
top: span(.5);
width: 85px;
z-index: 1;
}


Jquery :

$(document).scroll(function(){
var h = $(".flexslider__container").height() * 1.5;
var t1 = $(".c-quote").offset().top;
if(($(this).scrollTop() + h) >= t1)
{
$('.o-logo__main').attr('src','img/logo/logo2.svg');

}
else{

}
});

Answer

Very basic version of this:

$(window).scroll(function() {
  // I just set this to trigger after 30px of scroll, use whatever you like.
  if ($(this).scrollTop() >= 30) {
    $('.logo').addClass('scrolled');
  } else  {
    $('.logo').removeClass('scrolled');
  }
});
body, html { height: 200%; }

.logo {
  position: fixed;
  overflow: hidden;
  margin: 1em;
  font-size: 2em;
}

.name,
.glyph {
  transition: all .5s ease;
  display: inline-block;
  will-change: opacity, transform;
}

.name {
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.3em;
}

.glyph {
  font-weight: bold;
  opacity: 0;
  position: absolute;
  top: 0; left: 0;
  transform: translateX(2em);
}

/* On scroll */
.logo.scrolled .name {
  opacity: 0;
  transform: translateX(-2em);
}
.logo.scrolled .glyph {
  opacity: 1;
  transform: translateX(0);
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div class="logo">
  <div class="name">Eric Andre</div>
  <div class="glyph">A</div>
</div>

Comments