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>

从一个到另一个css的变形标志

1 个答案: