html5 视觉差滚动效果怎么实现

html5 视觉差滚动效果怎么实现,第1张

html5 视觉差滚动效果

原理就是一种利用控制各个图片层之间滚动的速度,来产生一种立体空间的效果,每个层都用一个png透明图片做为背景,然后滚动的时候控制一下每个不同的速度。

不过有两个方面需要注意:

1、以大量图片为特色的网站应该考虑图像的预加载问题,以便为用户提供更好更流畅的视觉体验;

2、某些网站页面在移动设备上的效果可能较之在PC上有所不同,一些功能也可能无法正常使用。

实现原理:

1. 利用CSS3的@keyframes规则创建动画效果;

2. 使用CSS3的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%的时间,向左移动204px,总共有6次移动;

.box4 定义外容器的基本属性

.border4 定义了内容器的属性,-webkit-animation:scrollText1 12s infinite cubic-bezier(1,0,0.5,0) 和 animation:scrollText1 12s infinite cubic-bezier(1,0,0.5,0) 定义了用12s种循环一次,无限循环的效果;

.border4 div 定义了纵向滚动内容的基本样式;

.border4: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、创建两个html文件,一个test一个test2。

2、打开test页面,在里面创建一个div,并给其添加onmousedown与move方法。

3、打开后我们发现是一个棕绿的页面。

4、定义两个变量,startx为鼠标按下的坐标,endx为鼠标移动的坐标。

5、实现鼠标点击执行的down方法,在里面通过clientX获得鼠标按下坐标,并赋值给startx。

6、接着在实现鼠标移动的move方法,获得鼠标移动的坐标,并通过startx与endx相减判断是否向左边滑动大于30的距离,是的话就切换到test2页面。

7、现在我们打开test页面,向左滑动会提示切换页面(这个可以去除),确定后就切换到了test2页面,向右滑动切换的方法同理。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6249260.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-19
下一篇 2023-03-19

发表评论

登录后才能评论

评论列表(0条)

保存