正文 

当前位置： 首页 > 知识 >

使用 HTML5/CSS3 而不是 JavaScript 滚动滚动/羊皮纸

     2023-03-24     85

关键词：

【中文标题】使用 HTML5/CSS3 而不是 JavaScript 滚动滚动/羊皮纸【英文标题】：Scrolling a scroll/parchment using HTML5/CSS3 instead of JavaScript 【发布时间】：2014-04-17 03:21:26 【问题描述】：

有没有一种方法可以仅使用 HTML5 和 CSS3 创建一个在视觉上充当scroll/parchment 的框架？目前我已经通过使用 JavaScript 实现了它，但是滚动事件在移动设备上并不经常触发，这使得滚动的页眉和页脚结结巴巴。

var paperHeight = 1710;
var viewHeight = 0;
var scrollTopOffset = 240 - paperHeight;
var scrollBottomOffset = scrollTopOffset - paperHeight;

$(function() 
  $(window)
    .on('resize', function() 
      viewHeight = $(window).height() - $('.container').outerHeight() + viewHeight - $('.footer').outerHeight();
      $('.scroll-view')
        .height(viewHeight)
    )
    .trigger('resize');

  $('.scroll-view')
    .on('scroll', function() 
      $('.scroll-top')
        .css("background-position", "0 " + (paperHeight - scrollTopOffset + $(this).scrollTop()) + "px");

      $('.scroll-bottom')
        .css("background-position", "0 " + (viewHeight + scrollBottomOffset + $(this).scrollTop()) + "px");
    )
    .trigger('scroll');
)

网站：https://pendrokar.github.io/magia-ts/index.html

源码：https://github.com/Pendrokar/magia-ts/

如果您的浏览器滚动不顺畅，我知道如何查看滚动动画的最佳方法是在内容上使用鼠标中键，然后上下移动鼠标。

所以滚动以下列方式起作用。向上或向下滚动内容时，页眉和页脚向相反方向滚动。页眉和页脚显示了将要发生的事情或之前发生的事情的反转图像。 JavaScript 版本使用的背景图像只是原始复制和反转的，使用 CSS3 变换矩阵只需要一张图像。

我认为在溢出的“滚动”元素中使用显示“绝对”或“固定”元素可以实现这一点，但是当内容滚动时，它们都不会使元素停留在它们的位置。

HTML5 Canvas 是另一种选择，但它可能仍然和 JavaScript 一样慢。

【问题讨论】：

【参考方案1】：

您的滚动图像大小超过 0.5 兆字节。

对于移动浏览器来说，这个大小可能太大了，无法处理而不会卡顿。

（特别是因为它被绘制了 3 次。）

尝试使用重量为 56K 的下采样版本的卷轴：

如果您不能让移动设备为您的设计经常触发滚动事件，那么您可以使用 html5 画布，它可以让您更好地控制重绘率。但请先尝试使用较小的图像，看看是否能解决您的移动卡顿问题。

祝你的游戏好运！

【讨论】：

变化不大。这可能不是因为滚动事件触发的频率，而是因为使用“背景位置”而不是滚动（使用 javascript）页眉和页脚中的隐藏内容。

html5+css3学习笔记

...的段落，将每一段都放进一个<p></p>标签里，而不是用&l 查看详情

像 BluePrint/960gs 这样的 HTML5+CSS3 框架？

...423:07:16【问题描述】：我正在启动一个辅助项目，并希望使用HTML5+CSS3构建它。向后兼容性不是问题。我想知道是否存在类似于BluePrint/960gs的框架。主要是，我正在寻找网格系统和排版。我发现最好的（也是唯一的）与新的HTML5 查看详情

当用户选择“在新选项卡中打开”/“在新窗口中打开”而不是使用 html/javascript 点击时如何到达所需的页面

...在新选项卡中打开”/“在新窗口中打开”而不是使用html/javascript点击时如何到达所需的页面【英文标题】：Howtohavedesiredpagereachedwhenauserselects"OpeninNewTab"/"OpeninNewWindow"ratherthanclickswithhtml/javascript【发布时间】：2021-03... 查看详情

Apache Thrift 仅用于处理，而不是服务器

...是Thrift的“IDL部分”，这样我就可以在我的C++代码和外部Javascr 查看详情

为何使用html5+css3

一：大多浏览器支持，低版本也没问题   我看点这方面的资料，是为了做手机应用网站（有三个方案，这个是备用方案），可以开发响应式网站，可以脱离开发平台进行跨平台。   在Html5网页中引入Modernizr... 查看详情

精通html5+css3需要学啥？

...技术A精通HTML5+CSS3需要学什么？主要学习vscode编辑器基本使用、HTML5新增标签、CSS3新增选择器及案例、2D转换及相关案例实现、3D转换和旋转木马案例等知识点。　　一、vscode编辑器基本使用　　vscode基本使用　　vscode插件安装　... 查看详情

附全部代码+图片使用html5+css3绘制html5的logo——web前端系列学习笔记(代码片段)

...点代码实现html代码CSS代码用到的图片页面展示本项目将使用HTML5+CSS3绘制出HTML5的logo，页面效果如下所示。技术要点HTML5新特性HTML5基本语法CSS3新特性在HTML中引入样式代码实现html代码<!DOCTYPEhtml><html><head><met... 查看详情

微信小程序开发和html5开发，css3开发的区别

...在HTML4的基础上进行发展的改革，不仅可以进行标记语言使用，还可以进行数据存储，交互式开发等。这里找到了一套HTML5的视频教程，你可以看一下，我发到百度网盘上了。HTML5视频教程 查看详情

如何仅使用 javascript、html5 css3 实现 - 单击按钮时画布上图像的缩放效果？

】如何仅使用javascript、html5css3实现-单击按钮时画布上图像的缩放效果？【英文标题】：Howtoimplementusingjavascript,html5css3only-zoomingeffectforimageoncanavsonbuttonclick?【发布时间】：2015-07-1721:32:06【问题描述】：我正在尝试使用比例，但它... 查看详情

html5,css3炫酷实例-元素

自动完成输入框下拉列表使用的插件：jquery-ui使用数据源实现文本框的自动完成功能<linkhref="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.css"rel="stylesheet"><sectionalign="center">所学专业：<i 查看详情

如何停止css3的动画

　　们在移动端一般使用zepto框架，与其说zepto是jquery的轻量级替代版，不如说是html5替代版　　我们在js中会用到animate方法执行动画，这个家伙可是真资格的动画，完全是css一点点变化的！　　而zepto则不然，使用的是HTML5/CSS3的... 查看详情

为啥我总是要使用 ||而不是 |和 && 而不是 &?

】为啥我总是要使用||而不是|和&&而不是&?【英文标题】：WhyshouldIalwaysuse||insteadof|and&&insteadof&?为什么我总是要使用||而不是|和&&而不是&?【发布时间】：2013-12-0718:59:15【问题描述】：自从我开始编写Java... 查看详情

html5+css3鼠标移入移出图片生成随机动画

今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画，我们先看最终效果图（截图为静态效果，做出来可是动态的哟） 左右旋转 上下移动缩放由于时间关系我就不一步步解析各段代码所代表含义，我这里... 查看详情

为啥使用常量而不是枚举？

】为啥使用常量而不是枚举？【英文标题】：Whyuseconstantsinsteadofenums?为什么使用常量而不是枚举？【发布时间】：2011-10-2204:11:26【问题描述】：我已经在很多Java库中看到使用了很多可以轻松使用枚举的常量。即使在Swing中，也有... 查看详情

正确使用地图对象而不是参数

】正确使用地图对象而不是参数【英文标题】：Usemapobjectinsteadofparamscorrectly【发布时间】：2022-01-2115:50:24【问题描述】：我想使用地图对象而不是调用checkOrder3次。在这种情况下如何通过Map而不是所有参数使用？：Admin.tsclassAdmina... 查看详情

html5+css3实现春节贺卡

...为index.html 因为需要点击光盘让音乐开始和停止，又使用id获取元素要比class容易一些，所以我们将音乐改为id="music"表示层为style.css px就是像素值，em就是根据基准来缩放字体的大小。em是 查看详情

为啥 Kivy 使用浮点数而不是整数？

】为啥Kivy使用浮点数而不是整数？【英文标题】：WhyKivyusesfloatsinsteadofintegers?为什么Kivy使用浮点数而不是整数？【发布时间】：2014-09-2714:59:59【问题描述】：我刚开始使用Kivy，注意到它使用浮点值而不是传统的整数。例如，特... 查看详情

html5+css3实现地球绕太阳公转

使用的是正面视角，主要是用HTML5+CSS3来实现，JS只是用来画图。test.html：<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>地球-太阳自转与公转</title><linktype="text/css"rel=‘stylesheet‘href=" 查看详情