//向下滚动 背景图片变大 变模糊

//向上滚动 还原. 那些参数自己调试的

$(document).bind("scroll",function(){

clearTimeout(timeout);

timeout = setTimeout(function() {

p = $(this).scrollTop();

if(p <= 500)

{

if (t <= p) {

//下滚

scrollSpan = p-t;

blurValue = blurValue + (scrollSpan*0.03);

scaleValuex=scaleValuex+(scrollSpan * 0.0005);

scaleValuey= scaleValuey+(scrollSpan * 0.0005);

var scale = scaleValuex+ ','+scaleValuey+','+scaleValuez;

opacityValue = opacityValue - (scrollSpan * 0.005);

//视频变模糊

$('#vedioCover').css('-webkit-filter','blur('+blurValue +'px)');

//视屏放大效果

$('#vedioCover').css('transform','translate3d(0px, 0px, 0px) scale3d('+scale+')');

//视频变模糊

$('#mobileCover').css('-webkit-filter','blur('+blurValue +'px)');

//视屏放大效果

$('#mobileCover').css('transform','translate3d(0px, 0px, 0px) scale3d('+scale+')');

//$('#hotelSearchSection').css('opacity',opacityValue).css('-webkit-filter','blur('+blurValue +'px)');

}

else {//上滚

scrollSpan = t-p;

blurValue = blurValue - (scrollSpan*0.03);

scaleValuex=scaleValuex-(scrollSpan * 0.0005);

scaleValuey= scaleValuey-(scrollSpan * 0.0005);

var scale = scaleValuex+ ','+scaleValuey+','+scaleValuez;

opacityValue = opacityValue + (scrollSpan * 0.005);

$('#vedioCover').css('-webkit-filter','blur('+blurValue +'px)');

$('#vedioCover').css('transform','translate3d(0px, 0px, 0px) scale3d('+scale+')');

$('#mobileCover').css('-webkit-filter','blur('+blurValue +'px)');

$('#mobileCover').css('transform','translate3d(0px, 0px, 0px) scale3d('+scale+')');

// $('#hotelSearchSection').css('opacity',opacityValue).css('-webkit-filter','blur('+blurValue +'px)');

}

setTimeout(function () {

t = p;

}, 0);

}

}, 10);

})

html 滚动条向下滚动,如何实现元素随着滚动条向下滑动逐渐变小相关推荐

  1. html页面怎么加向下滚动,如何使用jQuery向上或向下滚动页面到锚点?

    如何使用jQuery向上或向下滚动页面到锚点? 我正在寻找一种方法来包含幻灯片效果,当您单击页面上或下的本地锚点链接时. 我想要一个你有这样一个链接的东西:link text, img etc. 也许 ...

  2. 使用Selenium慢慢向下滚动页面

    我正试图从航班搜索页面抓取一些数据. 此页面以这种方式工作: 你填写一个表格,然后你点击按钮搜索 – 这没关系.当您单击该按钮时,您将被重定向到包含结果的页面,这就是问题所在.这个页面连续添加结果,例 ...

  3. 第一个子元素在未超过父元素高度的情况下设置margin-top导致出现竖向滚动条的问题

    首先要说明的是在什么情况下会出现这种问题: 在移动端,我们经常会设置html,body的height为100%,让处于最外面的父级元素刚好充满整个屏幕高度,但是,如果此时body下面第一个子元素,刚好 ...

  4. php滚动窗口多条动态,详解原生JS是实现控制多个滚动条同步跟随滚动

    本文主要和大家详解详解原生JS是实现控制多个滚动条同步跟随滚动,当这两个容器元素的内容都超出了容器高度,即都出现了滚动框的时候,如何在其中一个容器元素滚动时,让另外一个元素也随之滚动. 在一些支持用 ...

  5. html 下拉到一定位置,浏览器向下滚动到一定位置继续滚动时,侧边导航固定在页面顶部,再滚动到一定位置时页面再向下滚动侧边导航不再固定。这种效果怎么实现呢...

    1.浏览器向下滚动到一定位置继续滚动时,侧边导航固定在页面顶部,再滚动到一定位置时页面再向下滚动侧边导航不再固定.页面向上滚动到一定位置继续滚动时,侧边导航保持在原来位置.这种效果怎么实现呢 2.. ...

  6. 【vue】用WOW.js+animate.css实现页面滚动加载元素动画

    一.场景 在很多的网站中,我们发现在滚动条滑动的时候一些元素显示出来的时候是有一些动画效果的,这样看起来页面更具有活力,增加用户体验.当然这些动画我们可以通过判断滚动条的位置或者判断元素距离可视窗口的 ...

  7. vue watch 修改滚动条_vue实现滚动监听,点击瞄点平滑滚动,控制内嵌滚动条滚动...

    滚动效果 当页面滑动时,左边导航栏会自动定位到当前标题,一级标题展开,二级标题的字体变红色,字体前面有一个小图标. 上图........... Html代码 {{NItem1.ordered}} {{ ...

  8. Web端隐藏垂直滚动条且保留滚动效果

    在做项目时,发现UI们常常为了快速出图,在设计UI图时只设计一种正常情况下的布局,但是往往实际应用中,内容超出限定区域是很常见的现象,当内容超出时,如果css样式没有设置隐藏则会出现滚动条,而滚动条的 ...

  9. python tqdm 不换行_python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)

    默认的tqdm的滚动条的宽度很大,所以会使得总长度超过窗口一行所能显示的量,所以发生上下滚动 解决方法:初始化tqdm时,初始化行数参数ncols=10,这个值可以自己调:尽量大到不能引起上下滚动,同 ...

最新文章

  1. Mysql中的排序规则utf8_unicode_ci、utf8_general_ci的区别总结
  2. 时序预测:从两篇高影响力的论文谈起
  3. 服务器可视化_疫情来袭,30分钟学会用python开发部署疫情可视化网站
  4. 什么是JAX-RS注释? (第2部分)
  5. 机器学习时显卡频率莫明其妙的降低了?
  6. redhat 6.8 配置 centos6 163 的 yum 源
  7. svn图形化控制(svnmanager)
  8. python类概念是什么意思_python面向对象是什么意思?面向对象九大概念简介
  9. 基于matlab的谐波处理及无功功率补偿源码,谐波抑制和无功功率补偿(第3版) pdf epub mobi txt 下载...
  10. 扫地机器人基本设计方案
  11. oracle发生20001,ORA-20001错误一例
  12. JS的Date函数汇总
  13. Android判断当前系统语言
  14. 京东云php环境配置,干货 | 京东云应用负载均衡(ALB)多功能实操
  15. 分享如何开发南非市场
  16. Afnetworking访问遇到3840_错误
  17. 诚信比生命更重要,人不诚信难成正果
  18. 移动端GPGPU 架构
  19. html旅游门票源代码,票务网站整套静态模板 HTML模板
  20. 移动端键盘弹起底部固定模块会被顶上去

热门文章

  1. MDX学习笔记(整理) MDX语法
  2. Sql Server 字符串操作总结
  3. 266. Palindrome Permutation
  4. 在Linux下开发多语言软件(gettext解决方案)
  5. 路径输入mac下配置NDK开发环境
  6. 算法:ACM二分图匹配 HDU2063
  7. fedora下重用ssh连接 类似secureCRT的clone session功能
  8. RAC安装时需要执行4个脚本及意义
  9. VS2013中使用git发布解决方案master分支的时候出现错误
  10. png图片IDAT块异常