javascript - 水平导航滑出有生长效果

Question

我想重现我在 airforce.com 上看到的效果。它就在英雄的正下方，我四处张望了一下，看不到他们做了什么。 看起来它是使用 knockout 开发的，但我想使用 jQuery 和 Css 重新创建它。

如果您知道效果叫什么或知道可以实现此效果的库，请告诉我，谢谢!

https://www.airforce.com/

Answer 1

我仅使用 css 创建了一个简单的效果模型。查看 fiddle

https://jsfiddle.net/rob_primacy/p6ee9d71/2/

<div class="image-block">
   <div class="image"></div>
</div>

.image-block {
    position: relative;
    width: 300px;
    left: 200px;
}

.image { 
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    overflow: hidden;
    transition: all ease .3s;
    height: 600px;
    background: url("http://www.difrusciaphotography.com/wp-content/uploads  /2015/08/Place-to-unwind_Lake-Kananaskis-Alberta-Canada.jpg") #000 no-repeat center center;}

.image-block:hover .image {
     left: -40px;
     right: -40px;
     transition: all ease .3s;
 }