隱藏png圖像，直到它顯示在用戶屏幕中

目前我有一個css動畫，從屏幕開始（如下）並向右移動。（請看這裏http://crea8tion.com/ChristmasMessage/index.html）隱藏png圖像，直到它顯示在用戶屏幕中

我注意到在測試過程中，在一些屏幕上它仍然在動畫開始之前顯示在屏幕的左側。

有什麼額外的我可以做隱藏基於用戶的屏幕大小PNG？

這是我目前的情況，你可以看到它只是向左偏移。

.santa { 
    width: 1000px; 
    position: absolute; 
    top: -14%; 
    left: -75%; 
    -webkit-animation: santa-move 1s 1s ease-out forwards; 
    -webkit-animation-delay:5s;animation-delay:5s;     
    -webkit-animation-duration: 25s; 

    -moz-animation: santa-move 1s 1s ease-out forwards; 
    -moz-animation-delay:5s;animation-delay:5s;     
    -moz-animation-duration: 25s; 
}

來源

2013-12-16 Dano007

請不要鏈接到您的網站。這是爲什麼：http://meta.stackexchange.com/questions/125997/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it –

使用'visibility：hidden'，然後在想要顯示時將其更改爲'visible' –

但是，當我想要顯示它時，將取決於用戶何時看到它顯示在屏幕上，而這取決於它們的屏幕大小。這是如何解決的？ – Dano007

您必須使用對象本身的尺寸來隱藏剛剛離屏的東西。左值應該是寬度的否定，在這種情況下left:-100px

.santa { 
    left:-1000px; 
    top:-200px; /* However tall santa is */ 
    ... 
}

來源

2014-01-24 15:15:50

隱藏png圖像，直到它顯示在用戶屏幕中

回答

相關問題