从中心到左侧的动画图像

我很接近完成这个标题，虽然我有一个最后一个凹凸。如果您单击附加的jsFiddle链接，您将看到当您在文档中滚动时，它会将标志从中心移到左边。我无法顺利地从中心向左侧进行动画制作，而只是在没有任何动画的情况下移动。从中心到左侧的动画图像

有人可以请看一下，让我知道一个修复？

请确保结果屏幕已打开，以显示非媒体查询版本。

.cbp-af-header img { 
text-transform: uppercase; 
color: #333; 
letter-spacing: 4px; 
font-size: 4em; 
height: 100px; 
width: 100px; 
display: block; 
margin: 0 auto; 
-webkit-transition: height 0.3s; 
-moz-transition: height 0.3s; 
transition: height 0.3s; 
}

大加赞赏，干杯！

来源

2014-10-01 tebrown

好动画首先必须有一个现在的位置开始和结束位置，无论是固定，绝对的或相对的。由于滚动的图像是浮动图像，因此它没有位置，它浮动，当它居中时，它也是没有位置的内嵌块。为什么，它看起来不错。 – Christina 2014-10-01 03:32:09

@Christina如果从中心到左边是一个很好的平滑动画，它会更好看。这会是一个玩弄花车或职位的问题吗？ – tebrown 2014-10-01 03:47:58

这是你想要做什么？

-webkit-transition: height 0.3s ease; 
-moz-transition: height 0.3s ease; 
transition: height 0.3s ease;

只需添加ease

注：也有其他种类的影响或CSS转换的transition-timing-function，你可能要检查this one

来源

2014-10-01 03:40:52 OneScrewLoose

我认为这更像克里斯蒂娜所说的。我认为这是因为定位？ – tebrown 2014-10-01 04:00:14

我的印象是，你在谈论元素动画的方式，当你这样说： **“我不能完全让它从中心到左侧的动画变得流畅，而只是在没有动画的情况下移动任何。”** – OneScrewLoose 2014-10-01 04:06:13

试试这个：

首先， JS中的小变化：

var cbpAnimatedHeader = (function() { 
    var b = document.documentElement, 
     g = document.querySelector(".cbp-af-header"), 
     e = false, 
     a = 200; 

    function f() { 
     window.addEventListener("scroll", function (h) { 
      if (!e) { 
       e = true; 
       setTimeout(d, 500) 
      } 
     }, false) 
    } 

    function d() { 
     var h = c(); 
     if (h >= a) { 
      classie.add(g, "cbp-af-header-shrink") 
     } else { 
      classie.remove(g, "cbp-af-header-shrink") 
     } 
     e = false 
    } 

    function c() { 
     return window.pageYOffset || b.scrollTop 
    } 
    f() 
})();

我们确保滚动反应“较早”，但给它一些时间做旅行，所以效果更平滑。

现在，我们在CSS补充一点：

.cbp-af-header img { 
    height: 100px; 
    width: 100px; 
    display: block; 
    margin: 0px auto; 
    transition: all 0.8s ease-in-out; 
    position: relative; 
    -webkit-transform: translate3d(0,0,0); 
    -moz-transform: translate3d(0,0,0); 
    -ms-transform: translate3d(0,0,0); 
    -o-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0); 
}

这是有一个平稳过渡“来回”，也让动画变为甚至用更少的抖动平滑，启动硬件加速。

当然，你可以调整值，但我认为这是多还是少，你在找什么，see fiddle

来源

2014-10-01 04:13:28 Devin

从中心到左侧的动画图像

回答

相关问题