1

現在、codrops の css3 バックグラウンド スライダーを使用しています。

http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/

ここに私が置いたサイトがあります：

http://www.josturdycelebrant.com

問題は、最初のスライダー イメージが読み込まれる前に、クライアントがページを白または他の色で点滅させたくないということです。彼らはただイメージがそこにあることを望んでいます。私はいたるところを見てきましたが、背景をスライダーの最初の画像にする以外に答えが見つからないようです。

任意の助けをいただければ幸いです。

4

1 に答える 1

0

これは良いアイデアだと確信していますか？

フェードイン効果は、レンダリングでのソフトで「自然な」感覚のためだけでなく、ブラウザーが画像を完全にロードするのに一定の時間を与えるため、よく使用されます。読み込み中の画像です。あなたの例のように、これは背景に使用される高解像度画像の場合に当てはまると言って間違いありません。

とにかく、あなた（またはあなたのクライアント）がまだ試してみたい場合は、それを達成する方法があります.

最初の画像のみに最適化されたカスタム アニメーションを宣言する必要があります。何かのようなもの：

@-webkit-keyframes firstImageAnimation { 
     0% { opacity: 1; }
    17% { opacity: 1; }
    25% { opacity: 0; }
   100% { opacity: 0; } }  /* complete with all other vendor prefixes */

次に、最初に表示する .jpg に割り当てます。

.cb-slideshow li:nth-child(1) span { 
   background-image:url(path-to-first-image);
   -webkit-animation: firstImageAnimation 36s linear infinite 0s;
      -moz-animation: firstImageAnimation 36s linear infinite 0s;
       -ms-animation: firstImageAnimation 36s linear infinite 0s;
        -o-animation: firstImageAnimation 36s linear infinite 0s;
           animation: firstImageAnimation 36s linear infinite 0s; 

}

(これにより、元のアニメーションが上書きされ、他のすべての背景画像に割り当てられたままになります)。

このようにして、ページをロードした直後に最初の画像がすぐにポップアップします。残念ながら、しばらくすると、最後の画像がフェードアウトした直後に最初の画像が突然表示されるため、スライドショーが中断されることに気付くでしょう。

簡単な回避策は、スライドショーの最初と最後に同じ画像を割り当て、後者をデフォルトで最初以外の他の画像と同じアニメーションに戻すことです。したがって、この場合、単純に次のようになります。

.cb-slideshow li:nth-child(6) span { 
    background-image: url(path-to-first-image);
    -webkit-animation-delay: 30s;
       -moz-animation-delay: 30s;
        -ms-animation-delay: 30s;
         -o-animation-delay: 30s;
            animation-delay: 30s;

}

これは、セット内の最後の画像から最初の画像へのシームレスな移行に変換されます。

于 2012-11-26T03:12:27.590 に答える