本站首页 收藏本站
广告位联系

APP正在开发中...
返回顶部
您的位置： 主页 > 网页 > css >

收藏
分享到

利用CSS实现视差滚动和抖动效果

css 来源：互联网 作者：佚名 发布时间：2024-09-17 17:16:33 人浏览
摘要

前端的设计效果，越来越炫酷，而这些炫酷的效果，利用css3的动画效果和js就可以实现，简单的代码就能实现非常炫酷的效果。 原理：利用js监控scrollTop的位置，通过top定位图片的位置，实现

前端的设计效果，越来越炫酷，而这些炫酷的效果，利用css3的动画效果和js就可以实现，简单的代码就能实现非常炫酷的效果。
原理： 利用 js监控scrollTop的位置，通过 top定位图片的位置，实现视差的滚动；当滚动到目标位置时，通过css3的animation属性，实现抖动效果。

一、预览效果

相关素材照片：

二、相关代码

style部分：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

<style>

    .index-module--nftBox--3H_AP {

        height: 200vh;

        background-repeat: no-repeat;

        background-size: cover;

        background-position: 50%;

        width: 100%;

    }

    .index-module--moto--3sEm1 {

        position: absolute;

        left: 0;

        top: -400px; /*汽车模型初始化位置定点*/

        background-image: url(https://resource.nreal.cn/web/images/home/motuo.png);/*汽车图片*/

        transition: .5s;

        -webkit-transform: translate(0);

        transform: translate(0);

    }

    .index-module--moto--3sEm1.is-active{ /*汽车模型的抖动效果*/

        animation: jump .1s ease-in-out 5 alternate;

    }

    @keyframes jump {/*汽车模型的抖动效果*/

        from { top: -30px; }

        to { top: 6px }

    }

    .index-module--moto--3sEm1, .index-module--nftBox--3H_AP {

        height: 200vh;

        background-repeat: no-repeat;

        background-size: cover;

        background-position: 50%;

        width: 100%;

    }

    .index-module--title--rSrVs {

        opacity: 1;

        width: 80%;

        margin: 0 auto;

    }

    .index-module--titleBox--1VS2L {

        height: 50vh;

        display: flex;

        justify-content: center;

        align-items: center;

        position: absolute;

        top: 0;

        left: 50%;

        -webkit-transform: translate(-50%);

        transform: translate(-50%);

    }

    .hoZaHW {

        animation-name: ewofWB;

        animation-duration: 300ms;

        animation-iteration-count: infinite;

        transform-origin: center center;

        animation-play-state: running;

    }

    /* @keyframes ewofWB {

        0%   { left:0px; top:0px;}

    25%  { left:200px; top:0px;}

    50%  { left:200px; top:200px;}

    75%  { left:0px; top:200px;}

    100% { left:0px; top:0px;}

    } */

    .index-module--nftTitle--20OyY {

        width: 100%;

        max-width: 800px;

    }

    .index-module--duang--5jpDr {

        -webkit-animation: index-module--circleP--3P-V7 1.3s;

        animation: index-module--circleP--3P-V7 1.3s;

        -webkit-transform: translateY(400px);

        transform: translateY(400px);

    }

    .index-module--moto--3sEm1 {

        position: absolute;

        left: 0;

        -webkit-transform: translate(0);

        transform: translate(0);

    } 

    </style>

html部分：

1

2

3

4

5

6

7

8

9

10

11

<div id="layout-container" class="content">

        <div class="index-module--nftBox--3H_AP" style="background-image:url(https://resource.nreal.cn/web/images/home/motuobg.jpg)">

            <div class="index-module--nftBox--3H_AP"></div>

            <div class="index-module--moto--3sEm1" id="scrollup"></div>

            <div class="index-module--title--rSrVs index-module--titleBox--1VS2L">

                <div dur="300" class="sc-bdVaJa hoZaHW">

                    <img src="https://resource.nreal.cn/web/images/home/title.png" class="index-module--nftTitle--20OyY">

                </div>

            </div>

        </div>

</div>

js部分：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<script type="text/javascript">

    window.onscroll= function(){

            //变量t是滚动条滚动时，距离顶部的距离

            var t = document.documentElement.scrollTop||document.body.scrollTop;

            var scrollup = document.getElementById('scrollup');

            //当滚动到距离顶部200px时

            if(t>=200){             scrollup.style.backgroundImage="url(https://resource.nreal.cn/web/images/home/motuo.png)";

                scrollup.style.top=6+"px"; 

                if(scrollup.style.top == '6px'){

                   document.getElementById("scrollup").classList.add("is-active")

                }

            }else{//恢复正常               scrollup.style.backgroundImage="url(https://resource.nreal.cn/web/images/home/motuo.png)";

                scrollup.style.top=-400+"px";

                document.getElementById("scrollup").classList.remove("is-active")

            }

    }

</script>

版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计