视差(Parallax)

视差滚动是计算机图形学和网页设计中的一种技术，其中背景图像通过相机移动比前景图像慢，在2D场景中产生深度错觉并增加沉浸感。

Quasar提供了一个开箱即用的Vue组件。 它需要处理很多浏览器诡异行为，包括实际上可能小于窗口宽度/高度的图像大小。

安装

编辑 /quasar.conf.js:

framework: {
  components: ['QParallax']
}

基本用法

<q-parallax src="assets/mountains.jpg">
  <!-- 加载图像时显示的Dom元素 -->
  <div slot="loading">Loading...</div>

  <!--
    当视差图像加载完后，在其上的剩余DOM元素开始显示
  -->
  <h1>Parallax</h1>
</q-parallax>

在加载底层图片时，您可以通过<div slot="loading"> ... </div>显示特定消息。 加载图像后，您还可以在视差图像上显示一些内容（在上面的示例中指的是<h1>标签）。

Vue属性

参数属性 类型 说明
src 字符串 图片来源。
height 数字 视差高度以像素为单位。 默认值是500.
speed 数字 在0和1之间浮动

例：

<!-- VueModel包含数据属性"imageURL" -->
<q-parallax :src="imageURL" :height="300">
  <div slot="loading">Loading...</div>
  <h1>Parallax</h1>
</q-parallax>

转盘 视频嵌入