1

テキスト内にスクロールする画像を作成する必要があります。CSS3 の背景クリップとアニメーションを使用して動作するバージョンを作成しましたが、これはクロス ブラウザーと互換性がありません。

テキストが切り出された画像の背後でjqueryを使用して画像を単純にスクロールしようとしましたが、ページのサイズ変更、ホバー状態などで問題が発生します.

これは、キーフレームと -webkit-backround-clip を使用した CSS3 バージョンのフィドルです: http://jsfiddle.net/tbLV6/

  h1 { 
     background: url(image.jpeg) no-repeat;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     -webkit-animation: travelGalaxy 10s linear infinite;
     -moz-animation: travelGalaxy 10s linear infinite;
     -o-animation: travelGalaxy 10s linear infinite;
  }

 @-moz-keyframes travelGalaxy {
    0% {background-position: right top;}
    100% {background-position: left top;}
 }

 @-webkit-keyframes travelGalaxy {
    0% {background-position: right top;}
    100% {background-position: left top;}
 }

これと同じ結果を達成する jQuery/Javascript のみのメソッドはありますか?

それとも、IE で動作する方法でこのタスクを達成する別の方法はありますか?

4

1 に答える 1

1

-webkit-background-clip: text が使用できないブラウザで、指定された要素を SVG に置き換えるポリフィルを使用するソリューション (Codepen) を次に示します。

http://bit.ly/1wjC6Rc

于 2014-12-12T21:11:53.223 に答える