通过 
搜索
搜索alpdesk / alpdesk-parallax
Contao 4 的视差效果
1.2.0
2022-08-12 06:26 UTC
Requires
- php: ^7.4 || ^8.0
- contao/core-bundle: ^4.13 || ^5.0
Requires (Dev)
- contao/manager-bundle: ^4.13 || ^5.0
- contao/manager-plugin: ^2.0
- phpstan/phpstan: ^1.0
- phpstan/phpstan-phpunit: ^1.0
- phpstan/phpstan-symfony: ^1.0
- phpunit/phpunit: ^9.5
- roave/security-advisories: dev-latest
- slam/phpstan-extensions: ^6.0
- symfony/phpunit-bridge: ^5.4 | ^6.0
Conflicts
- contao/manager-plugin: <2.0 || >=3.0
This package is auto-updated.
Last update: 2024-09-18 12:59:37 UTC
README
NEU: ab V 1.0.0 (重大变更)
- 动画在独立的后端模块中创建，然后应用于文章。此外，现在可以在配置中选择所有内容元素。动画可以指定ID/类，然后进行相应样式设计。
- 同样，内容元素也可以单独应用动画。这将在内容元素配置中直接完成。
- 根据操作系统设置中的“Reduced-Motion”，动画将相应地配置。例如，如果iOS中设置为“减少运动”，则Animate.css动画将不会执行。
此包包含以下功能，这些功能通过文章设置、内容元素设置和后端模块“Alpdesk-动画”进行配置。（该包假定jQuery作为JavaScript库，必须在页面布局中嵌入）
文章背景图片（可选视差效果）
可以从文件管理中选择一张图片并将其设置为文章的正常背景图片。然后，此图片可以可选地应用视差效果。
以下选项/选择可用
- 带有可选尺寸功能的图片
- 图片显示（background-size: auto|cover）
- 水平对齐（background-position-x: 0%|50%|100%）
- 垂直对齐（background-position-x: 0%|50%|100%）
- 可选水平视差效果（向左移动|向右移动）
在启用视差的情况下，该包将根据滚动位置和图片位置自动移动图片。
动画效果
除了背景视差功能外，还提供各种运动效果以及Animate.css（V4）的完整功能。（见 https://animatecss.node.org.cn/）
这些动画独立于视差效果，并且仅触发一次（即使是在调整大小）。根据需要，通过文章设置、内容元素设置或后端模块“Alpdesk-动画”进行配置。
以下选项/选择可用
- animate.css的完整功能
- 其他运动效果
- 视口偏移（效果应从哪个视口开始。例如，视口 + 50% => 如果文章在窗口中间）
- 元素的起始位置（background-position-x, background-position-y）
- 运动效果（例如，将图片从起始位置移动到上方/右侧）
- 效果速度（动画持续时间）
因此，使用此包可以将“图片游戏”和页面上的运动效果带来。:-)