CSS 3+HTML 5特効4-横方向シームレススクロール

12083 ワード
httml 5
まず例を見る
<!--
@-webkit-keyframes scrollText2 {
0%{
-webkit-transform: translateX(0px);
}
20%{
-webkit-transform: translateX(-200px);
}
40%{
-webkit-transform: translateX(-400px);
}
60%{
-webkit-transform: translateX(-600px);
}
80%{
-webkit-transform: translateX(-800px);
}
100%{
-webkit-transform: translateX(-1000px);
}
}
@keyframes scrollText2 {
0%{
transform: translateX(0px);
}
20%{
transform: translateX(-200px);
}
40%{
transform: translateX(-400px);
}
60%{
transform: translateX(-600px);
}
80%{
transform: translateX(-800px);
}
100%{
transform: translateX(-1000px);
}
}
.box4{
position: relative;
top: 100px;
left: 100px;
width: 200px;
height: 30px;
overflow: hidden;
}
.border4{
position: relative;
top: 0px;
left: 0px;
width: 1400px;
-webkit-animation:scrollText2 12s infinite cubic-bezier(1,0,0.5,0) ;
animation:scrollText2 12s infinite cubic-bezier(1,0,0.5,0) ;
}
.border4 div{
height: 30px;
width: 200px;
overflow: hidden;
display: inline-block;
}
.border4:hover{
animation-play-state:paused;
-webkit-animation-play-state:paused;
}
-->
This is a test 1.
This is a test 2.
This is a test 3.
This is a test 4.
This is a test 5.
This is a test 1.
 
前の縦スクロールの友達を見終わったら、横スクロールの実現方法が分かりやすいです.
 
実現原理:
1.CSS 3の@keyframesルールでアニメーション効果を作成する.
2.CSS 3のanimation効果でスクロール切り替えを完了します.
 1 @-webkit-keyframes scrollText2 {

 2     0%{

 3         -webkit-transform: translateX(0px);

 4     }

 5     20%{

 6         -webkit-transform: translateX(-204px);

 7     }

 8     40%{

 9         -webkit-transform: translateX(-408px);

10     }

11     60%{

12         -webkit-transform: translateX(-612px);

13     }

14     80%{

15         -webkit-transform: translateX(-816px);

16     }

17     100%{

18         -webkit-transform: translateX(-1020px);

19     }

20 }

21 @keyframes scrollText2 {

22     0%{

23         transform: translateX(0px);

24     }

25     20%{

26         transform: translateX(-204px);

27     }

28     40%{

29         transform: translateX(-408px);

30     }

31     60%{

32         transform: translateX(-612px);

33     }

34     80%{

35         transform: translateX(-816px);

36     }

37     100%{

38         transform: translateX(-1020px);

39     }

40 }

41 

42 .box4{

43   position: absolute;

44   top: 100px;

45   left: 100px;

46   width: 200px;

47   height: 30px;

48   overflow: hidden;

49 }

50 .border4{

51   position: absolute;

52   top: 0px;

53   left: 0px;

54   width: 1400px;

55   -webkit-animation:scrollText2 12s infinite  cubic-bezier(1,0,0.5,0) ;

56   animation:scrollText2 12s infinite  cubic-bezier(1,0,0.5,0) ;

57 }

58 .border4 div{

59   height: 30px;

60   width: 200px;

61   overflow: hidden;

62   display: inline-block;

63 }

64 .border4:hover{

65   animation-play-state:paused;

66   -webkit-animation-play-state:paused;

67 }

 
CSSコード説明:
  • @-webkit-keyframesおよび@keyframesは0%~100%の間から20%の時間ごとに204 pxを左に移動し、合計6回移動することを定義した.
  • .box 4定義外容器の基本属性
  • .border 4はコンテンツのプロパティを定義し、-webkit-animation:scrollText 1 12 s infinite cubic-bezier(1,0,0.5,0)とanimation:scrollText 1 12 s infinite cubic-bezier(1,0,0.5,0)は12 s種のループで1回、無限ループの効果を定義した.
  • .border 4 divは、縦スクロールコンテンツの基本スタイルを定義する.
  • .border 4:hoverはマウスがコンテナに移動したときの効果を定義し、animation-play-state:pausedおよび-webkit-animation-play-state:pausedはアニメーションの一時停止を定義した.

    •   
     1 <div class="box4">

 2   <div class="border4">

 3     <div>This is a test 1.</div>

 4     <div>This is a test 2.</div>

 5     <div>This is a test 3.</div>

 6     <div>This is a test 4.</div>

 7     <div>This is a test 5.</div>

 8     <div>This is a test 1.</div>

 9   </div>

10 </div>

     
    HTMLコードの説明:
    6つの情報を定義して横にスクロールすることができ、そのうち上位5つは本当に横にスクロールする情報であり、6つ目と1つ目の情報は同じである.理由は前編の縦スクロールと同様であり、@keyframes方式を用いてアニメーション効果を実現したため、1つ目の情報の効果はデフォルトで停止しているため、6つ目の情報で代替方法を作成し、1回目のループが終了した後、シームレスにスクロールを続行できます.
    ***
    Python入門(十三)ファイル操作