我可以使用更好的（平滑）過渡嗎？

我目前正在爲一個網站做一個'動畫'背景，一小時後背景圖片滾動通過，然後重置到原來的位置重新開始。我目前通過一些photoshop欺騙手段讓圖像看起來像是一個360度的圖像。儘管在測試滾動圖像時，我注意到圖像對於每個部分的轉換都是「抽搐」的。我正在尋找一些比像素「像素跳躍」更平滑但仍然非常緩慢的東西。如果通過JavaScript有更好的選擇，我很確定所有的耳朵。我可以使用更好的（平滑）過渡嗎？

以下是我目前使用我的CSS（DIV背景圖片的大小會發生變化，一旦我其實用的圖片是成品）：

*{ 
    margin:0; 
    padding:0; 
    border: 0; 
    line-height: 100%; 
    font-size: 100%; 
} 

#container { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    background-color: black; 
} 
#center { 
    background-image:url(http://farm4.staticflickr.com/3768/11633218256_30a04f01c3_o.png); 
    background-size: contain; 
    width: 100%; 
    height: 100%; 
    position:absolute; 
    animation: scroll 3600s; 
    animation-timing-function:linear; 
    animation-fill-mode:forwards; 
    animation-iteration-count:infinite; 
} 
@keyframes scroll { 
0% {right:0%;} 
100%{right:100%;} 
}

來源

2014-01-08 JSArrakis

很難知道你的意思。你能在這裏簡單的自包含的例子中重現這個問題嗎？ http://jsfiddle.net/ –

@AlexWayne隨着背景應該如何工作的性質以及需要複製的規模，我很難在jsfiddle.net中向您展示我的意思。但是，這裏是一個Dropbox鏈接與我的POC內容，所以你可以看到我的意思：https://www.dropbox.com/s/ll8c7ydgbbodj4f/hexcenter5.html – JSArrakis

-1

你可以使用jQuery。這給出了一個很好的流暢的動畫，並且也是跨瀏覽器兼容的。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Animate</title> 
</head> 
<body> 
    <div id="container"> 
     <div id="center"></div> 
    </div> 
    <!--The following gets the jQuery code from the jQuery CDN and loads it to your page--> 
    <!--This needs to be called before any jQuery code will run--> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script> 
     /* 
     The following uses jQuerys animate method 
     The part before the first period decides which element we want to target, 
     in your case the div with ID center. Next call animate and tell it what to 
     animate. We want to change the right position to 100% from whatever it is 
     initially. The number following that is the amount of time it will take your 
     animation to complete in milliseconds. 
     */ 
     $("#center").animate({right: "100%"}, 50000); 
    </script> 
</body> 
</html>

編輯：在這樣的緩慢移動的速度看來生澀爲好，但不作爲幹。如果你減慢速度，它會看起來好多了。

來源

2014-01-08 21:46:52

我其實並沒有得到學習JQuery的點。我知道我必須添加一個參考庫，但我不完全確定如何去做。 – JSArrakis

我會編輯我的答案澄清，即使你決定去不同的路線 –

謝謝，我實際上可能更感興趣的jQuery路線，如果它產生更好的結果。如果有什麼疾病需要學習jQuery反正去babylon.js路線和使用opengl如果需要的話。無論哪種方式，我可以使用你的答案，所以謝謝！ – JSArrakis

我可以使用更好的（平滑）過渡嗎？

回答

相關問題