首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

滚动上的jquery抖动动画

滚动上的jQuery抖动动画是一种通过使用jQuery库中的动画效果来实现的页面滚动效果。它可以在用户滚动页面时触发,使页面元素产生抖动效果,从而增加页面的交互性和吸引力。

该动画效果可以通过以下步骤来实现:

  1. 引入jQuery库:在页面中引入jQuery库的CDN链接或本地文件,以便使用jQuery的相关功能和方法。
  2. 监听滚动事件:使用jQuery的scroll()方法来监听页面的滚动事件。
  3. 获取滚动位置:在滚动事件的回调函数中,使用scrollTop()方法获取当前页面的滚动位置。
  4. 选择目标元素:使用jQuery的选择器来选择需要应用抖动动画的目标元素。
  5. 应用抖动动画:使用animate()方法来为目标元素添加抖动动画效果。可以通过改变元素的位置、大小、透明度等属性来实现抖动效果。

以下是一个示例代码:

代码语言:txt
复制
$(window).scroll(function() {
  var scrollTop = $(window).scrollTop();
  var targetElement = $('.target-element');
  
  if (scrollTop > 200) {
    targetElement.animate({left: '+=10px'}, 50)
                .animate({left: '-=20px'}, 50)
                .animate({left: '+=20px'}, 50)
                .animate({left: '-=20px'}, 50)
                .animate({left: '+=10px'}, 50);
  }
});

在上述代码中,当页面滚动位置超过200像素时,选择类名为"target-element"的元素,并为其添加一系列动画效果,使其产生抖动效果。

这种滚动上的jQuery抖动动画可以应用于各种场景,例如在网页中的导航栏、标题、按钮等元素上,增加页面的动态效果和用户体验。

腾讯云提供了丰富的云计算产品和服务,其中与前端开发和动画效果相关的产品包括腾讯云CDN(内容分发网络)和腾讯云Web+。腾讯云CDN可以加速网页的内容传输,提高页面加载速度,从而增强动画效果的展示效果。腾讯云Web+是一款全托管的Web服务,提供了丰富的前端开发工具和环境,可以方便地部署和管理网站,并支持自定义域名和HTTPS加密等功能。

腾讯云CDN产品介绍链接:https://cloud.tencent.com/product/cdn 腾讯云Web+产品介绍链接:https://cloud.tencent.com/product/tcb

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

jquery事件&动画

一、事件 在1.7之前版本中jQuery处理事件有多个方法, (google 搜索: jquery live bind degelate)作用各不相同,后来统一使用on/off方法 1、.on( events...jQuery提供"linear(线性)" 和 "swing(旋转)" 参数3:完成后执行函数 $('.target').hide(); $('#book').hide(300, 'linear',...') }) 但这样写也很麻烦,jquery动画队列,所以等价于 $box.hide(4000) .show(3000) .fadeOut() .fadeIn ....slideUp() .slideDown(function(){ console.log('动画完毕')}) 三、自定义动画 上面几个简单动画不能满足需求时候,jquery提供了自定义动画行为方法...,并清除未执行动画队列,并且展现当前执行动画最后一帧最终状态 .stop(false,false) //默认,停止当前动画,继续以下动画 .stop(true,false) //停止当前动画,并清除未执行动画队列

1.8K20
  • JQuery 动画:为页面添彩魔法

    本篇博客将深入探讨 JQuery动画应用,带你进入一个充满活力前端世界。前言动画是网页设计一种重要手段,它可以为静态页面注入活力,使用户感受到更丰富交互效果。...而 JQuery 提供了丰富动画功能,使得开发者能够轻松实现各种炫酷动画效果。接下来,我们将一起深入学习 JQuery 动画,为你打开动画神奇大门。...JQuery 动画基础在 JQuery 中,动画主要基于两个核心方法:show()和hide()。这两个方法用于显示和隐藏元素,可以搭配参数来调整动画速度。1....JQuery 动画高级应用除了基础 show() 和 hide() 方法外,JQuery 还提供了一系列强大动画方法,让你能够实现更为复杂、炫酷效果。下面我们来介绍其中一些高级应用。1....从基础 show() 和 hide() 到高级淡入淡出、滑动效果,再到自定义动画JQuery 动画提供了丰富选择,满足各种场景需求。

    30610

    【JavaWeb】86:jQuery属性、文档、动画以及事件

    今天是刘小爱自学Java第86天。 感谢你观看,谢谢你。 话不多说,开始今天学习: ? 昨天学习了jQuery选择器,有一些还没有学完全,只能说等到以后遇到了再查文档了。...其中参数为小驼峰式命名规则:在CSS中是font-size,在jQuery中是fontSize。...三、动画和事件 1动画效果 动画效果很难用文章来展示出来,我也就不一一展示了,大致能有个了解也好; ? 方法hide()、show()和toggle(),能达到动画效果。...方法slideDown()、slideUp()、slideToggle(),能达到动画滑动效果。 此外网上还有开源各种动画效果,查询jQuery插件即可。...以上就是对jQuery动画和事件说明,其它还有很多就不一一说明了。 再加上也有很多人说jQuery现在被淘汰了,不想花太多时间在这块,继续后面的学习。 最后 谢谢你观看。

    2.4K40

    【Java 进阶篇】JQuery 动画:为页面添彩魔法

    本篇博客将深入探讨 JQuery动画应用,带你进入一个充满活力前端世界。 前言 动画是网页设计一种重要手段,它可以为静态页面注入活力,使用户感受到更丰富交互效果。...而 JQuery 提供了丰富动画功能,使得开发者能够轻松实现各种炫酷动画效果。接下来,我们将一起深入学习 JQuery 动画,为你打开动画神奇大门。...JQuery 动画基础 在 JQuery 中,动画主要基于两个核心方法:show()和hide()。这两个方法用于显示和隐藏元素,可以搭配参数来调整动画速度。 1....JQuery 动画高级应用 除了基础 show() 和 hide() 方法外,JQuery 还提供了一系列强大动画方法,让你能够实现更为复杂、炫酷效果。下面我们来介绍其中一些高级应用。 1....从基础 show() 和 hide() 到高级淡入淡出、滑动效果,再到自定义动画JQuery 动画提供了丰富选择,满足各种场景需求。

    26960

    jQueryUIeffect方法介绍

    2015-04-08 14:05:34 jQuery UI动画方法是jQuery方法扩展,其方法参数比jQuery方法更多,并且提供动画效果比jQuery方法更多,下面我先来给大家介绍一下jQueryUI...在使用jQueryUI之前需要引入js文件,我们经常使用jquery-ui.js,同时还需要引入jQuery文件jquery-ui.js,引入方法为: 先来介绍一个通过鼠标单击实现元素抖动效果实现方法: <head...,他代表抖动方式,上面的代码是使元素上下抖动,其他效果种类和代码为: "blind"   //从下至上收起来,直至隐藏 "bounce" //上下晃动元素 "clip"...; }; 本站提供jQueryUI和jQueryjs文件下载,点击下面的下载即可,如果代码中有不清楚可以留言。

    1.4K20

    jQuery Easing Plugin 网页缓动函数速查表

    jQuery 为例,还记得之前在我爱水煮鱼上推荐那个缓动插件 jquery.easing.js 吗?常规动画效果就是线性变化,例如匀速移动某个块或者元素。这种过渡效果很显然是非常低端普通。...有了 jquery.easing.js 这个插件之后,就可以调用里面定义一些动画过渡效果,让你网页中动画效果更佳自然生动、与众不同。...但是,jquery.easing.js 插件官方网站提供动画预览功能非常弱,你必须点击某个效果,才可以看到。于是,就有人做了这样一个 网页缓动函数速查表 并且开源有人将其翻译了一个中文版本。...在这个网页缓动函数速查表中,你可以直观看到每个过渡函数函数曲线。将鼠标移动上去之后,还会再旁边出现一个红色箭头来实际演示一下动画过渡效果。非常直观、方便。...当你确定要使用某个动画效果了,只需要用鼠标点击一下即可,这时候会出现应用这个动画效果三种实现方式:jQuery 实现方法、SCSS 实现方法、CSS3 实现方法。

    1.1K10

    【译】推荐十个CSS动画

    你也可以选择压缩版代码。 4.下载选择动画 另一个惊奇功能是,你可以将喜欢动画代码放到你列表中,并仅下载你喜欢动画代码。或者你可以将这些动画代码复制到一起。...1.使用 在你需要添加动画元素上添加animated类名,然后就是添加动画名称。... 8.WickedCSS WickedCSS是一个小型CSS动画库,没有太多动画体,但是它至少有很棒动画。它们中大多数是我们熟悉基本动画,但是它们真是很简洁。...使用 创建一个div元素,然后添加动画名。 复制代码 10.CSShake 最后,来点摇晃抖动。...如其名,CSShake包含了不同类型抖动动画CSS动画库。 使用 添加shake {animation_name}到你元素中。

    76110

    推荐十个CSS动画

    你也可以选择压缩版代码。 4.下载选择动画 另一个惊奇功能是,你可以将喜欢动画代码放到你列表中,并仅下载你喜欢动画代码。或者你可以将这些动画代码复制到一起。...通过 JavaScript document.querySelector('.my-element').classList.add('animated', 'slideInLeft') 通过 Jquery... 8.WickedCSS WickedCSS是一个小型CSS动画库,没有太多动画体,但是它至少有很棒动画。它们中大多数是我们熟悉基本动画,但是它们真是很简洁。...使用 创建一个div元素,然后添加动画名。 10.CSShake 最后,来点摇晃抖动。...如其名,CSShake包含了不同类型抖动动画CSS动画库。 使用 添加shake {animation_name}到你元素中。

    1.5K30

    编写难于测试代码5种方式

    Google Photos新手引导更结合了微动画,效果非常惊艳,让人过目不忘。 2.选择器 选择器特点是用一个内区域来承载一个很长页面,而该内区域高度是可以根据浏览器高度拉伸。...其好处是除了能放下很长页面,同时能保留一些操作一直停留在屏幕上。这裡可以选择性为弹框设置一个最大及最小高度,但要注意是必须把背景锁定,否则出现2条滚动条体验是很糟糕。...腾讯企点提示弹框整理 几个容易被忽视弹框细节 1.背景锁定与滚动条引起抖动问题 浏览网页时经常会发现弹框出现后,滚动鼠标时,蒙版下面的页面还是可以滚动,其实这些滚动都是没必要,因为弹框原意就是要聚焦用户注意力...其实蒙版颜色及透明度可以再深入搭配,例如产品是蓝色调性可以在黑色中混入一点蓝色,产品是轻盈可以用白色或淡灰色,或者尝试用没那么深颜色搭配高一点透明度等等,根据产品调性设计出一个适合产品气质蒙版...可以想像将会有一大波移动上体验会搬到网页设计上,如弹框中包含多个层级,透过左上角返回交互体验,更灵动及细腻动画效果等。

    1.1K80

    医疗数字阅片-医学影像-Lodash 是一个一致性、模块化、高性能 JavaScript 实用工具库。_.throttle(func, , [option

    jQuery(window).on('popstate', throttled.cancel); 实例解析防抖动(Debouncing)和节流阀(Throttling) 原文:Debouncing and...防抖动(Debounce) 防抖技术可以把多个顺序地调用合并成一次。 ? 假想一下,你在电梯中,门快要关了,突然有人准备上来。电梯并没有改变楼层,而是再次打开梯门。...可以使用 rAF API 替换 throttle 方法,考虑一下优缺点: 优点 动画保持 60fps(每一帧 16 ms),浏览器内部决定渲染最佳时机 简洁标准 API,后期维护成本低 缺点 动画开始...总之: debounce:把触发非常频繁事件(比如按键)合并成一次执行。 throttle:保证每 X 毫秒恒定执行次数,比如每200ms检查下滚动位置,并触发 CSS 动画。...requestAnimationFrame:可替代 throttle ,函数需要重新计算和渲染屏幕上元素时,想保证动画或变化平滑性,可以用它。注意:IE9 不支持。

    2.4K20

    100个弹框设计小结

    Google Photos新手引导更结合了微动画,效果非常惊艳,让人过目不忘。 2.选择器 选择器特点是用一个内区域来承载一个很长页面,而该内区域高度是可以根据浏览器高度拉伸。...其好处是除了能放下很长页面,同时能保留一些操作一直停留在屏幕上。这裡可以选择性为弹框设置一个最大及最小高度,但要注意是必须把背景锁定,否则出现2条滚动条体验是很糟糕。...腾讯企点提示弹框整理 几个容易被忽视弹框细节 1.背景锁定与滚动条引起抖动问题 浏览网页时经常会发现弹框出现后,滚动鼠标时,蒙版下面的页面还是可以滚动,其实这些滚动都是没必要,因为弹框原意就是要聚焦用户注意力...其实蒙版颜色及透明度可以再深入搭配,例如产品是蓝色调性可以在黑色中混入一点蓝色,产品是轻盈可以用白色或淡灰色,或者尝试用没那么深颜色搭配高一点透明度等等,根据产品调性设计出一个适合产品气质蒙版...可以想像将会有一大波移动上体验会搬到网页设计上,如弹框中包含多个层级,透过左上角返回交互体验,更灵动及细腻动画效果等。

    1.8K30

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券