变形算法从一个标志到另一个CSS

Question

嘿我试图实现以下变形效果的标志， 我试图使用jQuery的帮助下做到这一点，但无法弄清楚如何我添加CSS转换：

这就是我想要实现（左上角）标志的影响： http://marquez.thememountain.com/regular/

，我试图做这种方式：

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 1

的这个非常基本的版本：

$(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(4em); 
 
} 
 

 
/* 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>