テキスト内にスクロールする画像を作成する必要があります。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 で動作する方法でこのタスクを達成する別の方法はありますか?