水平導航滑出增長效果

我想重新創建我在airforce.com上看到的效果。這是在英雄的正下方，我探索了一下，看不到他們做了什麼。看起來它是用knockout開發的，但我想用jQuery和Css重新創建它。水平導航滑出增長效果

如果你知道什麼效果被稱爲或知道一個庫，可以實現這一點，請讓我知道謝謝！

https://www.airforce.com/

2016-06-09 user3943543

右鍵單擊頁面上查看代碼 – mlegg

那是我第一次的做法，但我是在尋找自己在做什麼不成功的。 – user3943543

只是從UI/UX的角度思考 - 在實現頻繁訪問的元素上執行此類動畫或轉換時要小心。這樣一個棘手的小效應可能在第一次訪問時看起來很酷，但是在訪問頁面或查看不同頁面之後 - 效果本身可能會讓用戶感到厭煩。我個人討厭導航元素上的動畫效果 - 他們是最常被淹沒在元素上的動畫效果，如果每次都有動畫效果，可能會很煩人。此外 - 請注意，懸停基本動畫/轉換不會在觸摸屏上工作。 – gavgrif

我創造了只使用CSS效果的簡單樣機。查看小提琴

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; 
}

來源

2016-06-09 02:02:23 Rob

謝謝！這是一個很好的開始。 – user3943543

水平導航滑出增長效果

回答

相關問題