包简介

Flexible, Livewire-compatible scroll-reveal animation component for Laravel Blade — powered by josh.js.

README 文档

README

Laravel Scroll Reveal

Scroll-triggered animations for Laravel Blade — powered by Animate.css.

laraextend/scroll-reveal provides a flexible <x-scroll-reveal> Blade component that wraps any content in a scroll-triggered animation. It ships with its own zero-dependency JavaScript driver (built on the native Intersection Observer API) and works seamlessly in plain Blade templates and Livewire.

No external JavaScript runtime required. The package includes its own driver script (scroll-reveal-driver.js) — no third-party npm package needed.

✨ Features

🧩 One Blade Component — <x-scroll-reveal> wraps any HTML content with scroll-triggered animations
🎬 Built-in JS Driver — <x-scroll-reveal-scripts> injects a zero-dependency Intersection Observer driver — no npm package required
🎨 30+ Animation Aliases — Intuitive names (fade-up, zoom-in, slide-left, …) mapped to Animate.css classes
⚡ Livewire Ready — All wire:*, x-* and data-* attributes are forwarded automatically; re-initialized after livewire:navigated
🏷️ Dynamic HTML Tag — Render as any element (div, section, article, span, …) via the as prop
⏱️ Timing Control — Fine-grained duration and delay props per element
🔇 Opt-Out Anywhere — Pass :animate="false" to disable animation for a specific element at runtime
⚙️ Configurable Defaults — Publish the config file to set project-wide defaults
📦 Zero Config — Works immediately after installation with sensible defaults

📋 Requirements

PHP >= 8.2
Laravel >= 10.x
Animate.css >= 4.x — for the CSS keyframe animations (loaded via CDN or npm)

🚀 Installation

1. Install the package via Composer

composer require laraextend/scroll-reveal

The ServiceProvider is registered automatically via Laravel's Auto-Discovery.

2. JavaScript Setup

This package generates the HTML data-* attributes for the animation driver. You have three options for the frontend setup — choose whichever fits your project.

Option A — Vite / app.js (recommended)

The driver is bundled via Vite — no <x-scroll-reveal-scripts> in the layout required.

Step 1 — Publish the driver to resources/js/:

php artisan vendor:publish --tag=scroll-reveal-js

This copies scroll-reveal-driver.js to resources/js/scroll-reveal-driver.js so Vite can bundle it.

Step 2 — Install Animate.css:

npm install animate.css

Step 3 — Add to resources/js/app.js:

import './scroll-reveal-driver.js'; // sets window.ScrollRevealDriver

let driver;

function init() {
    if (driver) driver.destroy();
    driver = new ScrollRevealDriver({ initClass: 'animateme', offset: 0.2 });
}

document.addEventListener('DOMContentLoaded', init);
document.addEventListener('livewire:navigated', init);

Step 4 — Import the CSS in your stylesheet (e.g. resources/css/app.css):

@import 'animate.css';

CSS imports belong in CSS files — @import 'animate.css' in your stylesheet is sufficient. No need to also import it in app.js.

Step 5 — Restart the dev server:

npm run dev

Option B — Built-in driver without Vite

The package ships its own Intersection Observer driver. Publish it to your public/ directory once:

php artisan vendor:publish --tag=scroll-reveal-assets

This copies scroll-reveal-driver.js to public/vendor/scroll-reveal/scroll-reveal-driver.js.

Then add <x-scroll-reveal-scripts> and the Animate.css link to your layout (e.g. resources/views/layouts/app.blade.php):

Inside <head>:

<!-- Animate.css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css/animate.min.css" />

Before the closing </body> tag:

{{-- Loads the published driver + auto-initializes + handles livewire:navigated --}}
<x-scroll-reveal-scripts />

That is all. No npm install. No JS configuration. The component handles initialization and Livewire SPA navigation automatically.

Available props for <x-scroll-reveal-scripts>:

Prop	Type	Default	Description
`initClass`	`string`	`'animateme'`	CSS class the driver watches. Must match what the component sets.
`offset`	`float`	`0.2`	Fraction of the element that must be visible to trigger (0–1).
`animateOut`	`bool`	`false`	Re-animate when an element leaves and re-enters the viewport.
`inline`	`bool`	`false`	Embed the driver script inline instead of referencing the file (useful if you skip the publish step).

Inline mode (no publish step needed at all):

<x-scroll-reveal-scripts :inline="true" />

Option C — CDN only (no build step, no npm)

Inside <head>:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css/animate.min.css" />

Before the closing </body> tag:

<x-scroll-reveal-scripts />

3. Done!

No config files, no migrations, no additional steps required.

4. Optional Configuration

Publish the config file to set project-wide defaults:

php artisan vendor:publish --tag=scroll-reveal-config

Published file: config/scroll-reveal.php

🎬 Usage

Basic usage

<x-scroll-reveal>
  <p>This fades in from below when it scrolls into view.</p>
</x-scroll-reveal>

Custom animation & timing

<x-scroll-reveal animation="zoom-in" :duration="600" :delay="150">
  <div class="card">...</div>
</x-scroll-reveal>

Full example with Tailwind classes

<x-scroll-reveal
  animate="true"
  animation="fade-up"
  :duration="550"
  :delay="200"
  class="container mx-auto px-4"
>
  <h2 class="text-3xl font-bold">Welcome</h2>
  <p class="mt-2 text-gray-600">Animated section content.</p>
</x-scroll-reveal>

Different HTML tags

{{-- Renders as <section> --}}
<x-scroll-reveal as="section" animation="slide-up" class="py-16 bg-gray-50">
  ...
</x-scroll-reveal>

{{-- Renders as <article> --}}
<x-scroll-reveal as="article" animation="fade-right">
  ...
</x-scroll-reveal>

Disable animation at runtime

<x-scroll-reveal :animate="false" class="container">
  {{-- No animation applied, just renders a plain <div> --}}
  ...
</x-scroll-reveal>

Inside a Livewire component

All standard Blade and Livewire attributes pass through without extra configuration:

<x-scroll-reveal
  wire:key="feature-{{ $feature->id }}"
  animation="fade-up"
  :delay="$loop->index * 100"
  class="feature-card"
>
  <livewire:feature-card :feature="$feature" />
</x-scroll-reveal>

📐 `<x-scroll-reveal>` Props Reference

Prop	Type	Default	Description
`animate`	`bool`	`true`	Enable or disable the animation entirely.
`animation`	`string`	`'fade-up'`	Animation alias (see Animation Aliases).
`duration`	`int`	`700`	Animation duration in milliseconds.
`delay`	`int`	`0`	Animation delay in milliseconds (0 = no delay).
`as`	`string`	`'div'`	HTML tag to render (`div`, `section`, `article`, `span`, …).

All additional attributes (e.g. class, id, wire:*, x-*, data-*) are forwarded directly to the rendered element.

🎨 Animation Aliases

All aliases are mapped to their corresponding Animate.css class names.

Fade

Alias	Animate.css class
`fade`	`fadeIn`
`fade-up`	`fadeInUp`
`fade-down`	`fadeInDown`
`fade-left`	`fadeInRight`
`fade-right`	`fadeInLeft`

Zoom

Alias	Animate.css class
`zoom-in`	`zoomIn`
`zoom-out`	`zoomOut`
`zoom-up`	`zoomInUp`
`zoom-down`	`zoomInDown`
`zoom-left`	`zoomInRight`
`zoom-right`	`zoomInLeft`

Slide

Alias	Animate.css class
`slide-up`	`slideInUp`
`slide-down`	`slideInDown`
`slide-left`	`slideInRight`
`slide-right`	`slideInLeft`

Flip

Alias	Animate.css class
`flip-up`	`flipInX`
`flip-down`	`flipInX`
`flip-left`	`flipInY`
`flip-right`	`flipInY`

Rotate

Alias	Animate.css class
`rotate-in`	`rotateIn`
`rotate-left`	`rotateInUpLeft`
`rotate-right`	`rotateInUpRight`

Creative / Special

Alias	Animate.css class
`swing-in`	`jackInTheBox`
`drop`	`bounceInDown`
`rise`	`bounceInUp`
`skew-left`	`lightSpeedInRight`
`skew-right`	`lightSpeedInLeft`
`blur-in`	`zoomIn`

Unknown aliases fall back to fadeInUp.

⚙️ Configuration

After publishing the config file, you can set project-wide defaults in config/scroll-reveal.php:

return [
    'animate'   => true,
    'animation' => 'fade-up',
    'duration'  => 700,
    'delay'     => 0,
    'as'        => 'div',

    // Informational — mirrors the props of <x-scroll-reveal-scripts>
    'driver_options' => [
        'initClass'  => 'animateme',
        'offset'     => 0.2,
        'animateOut' => false,
    ],
];

Note: The component props override the config defaults. The driver_options key is informational only — it is not automatically injected into JavaScript.

🔍 How It Works

The <x-scroll-reveal> Blade component renders a standard HTML element.

When animate is true, it adds the CSS class animateme and three data-* attributes:

<div
  class="animateme your-classes"
  data-sr-anim="fadeInUp"
  data-sr-duration="550ms"
  data-sr-delay="0.2s"
>
  ...
</div>

The JavaScript driver observes all .animateme elements via the Intersection Observer API.
When an element enters the viewport, the driver reads the data-sr-* attributes and applies the corresponding animate__ CSS class from Animate.css.
When animate is false, no attributes are added — a plain element is rendered.

🧪 Testing

composer install
./vendor/bin/pest

📄 License

MIT — see LICENSE.

laraextend/scroll-reveal 适用场景与选型建议

laraextend/scroll-reveal 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 809 次下载、GitHub Stars 达 0，最近一次更新时间为 2026 年 02 月 21 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「performance」「laravel」「blade」「animation」「scroll」「Animate.css」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 laraextend/scroll-reveal 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 laraextend/scroll-reveal 我们能提供哪些服务？

定制开发 / 二次开发

基于 laraextend/scroll-reveal 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 laraextend/scroll-reveal 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

g4/profiler 0

g4 application profiler package

sgalinski/scriptmerger 0

CSS/Javascript Minificator, Compressor and Concatenator for TYPO3 - highly configurable frontend asset optimization for CSS/JS merging, minification and compression with optional body parsing, async/defer loading, inline output, data-ignore exclusions, SRI integrity validation/calculation, external

wearerequired/jquery-light 1

WordPress mu-plugin to remove jQuery Migrate from the list of jQuery dependencies and to allow jQuery to enqueue before </body> instead of in the <head>.

opsdev/cache-breaker 4

Create link to static resources with cache-breaking segment based on md5 of the file

iamfarhad/laravel-prometheus 9

Production-ready Laravel Prometheus metrics package with built-in collectors for HTTP, database, cache, queue, events, errors, filesystem, and mail monitoring

foxtes/alfabank-rest 1

Alfabank REST API integration

laraextend/scroll-reveal

包简介

关键字：

README 文档

README

Laravel Scroll Reveal

✨ Features

📋 Requirements

🚀 Installation

1. Install the package via Composer

2. JavaScript Setup

Option A — Vite / app.js (recommended)

Option B — Built-in driver without Vite

Option C — CDN only (no build step, no npm)

3. Done!

4. Optional Configuration

🎬 Usage

Basic usage

Custom animation & timing

Full example with Tailwind classes

Different HTML tags

Disable animation at runtime

Inside a Livewire component

📐 `<x-scroll-reveal>` Props Reference

🎨 Animation Aliases

Fade

Zoom

Slide

Flip

Rotate

Creative / Special

⚙️ Configuration

🔍 How It Works

🧪 Testing

📄 License

laraextend/scroll-reveal 适用场景与选型建议

与 laraextend/scroll-reveal 相关的其它包

统计信息

GitHub 信息

其他信息

laraextend/scroll-reveal

包简介

关键字：

README 文档

README

Laravel Scroll Reveal

✨ Features

📋 Requirements

🚀 Installation

1. Install the package via Composer

2. JavaScript Setup

Option A — Vite / app.js (recommended)

Option B — Built-in driver without Vite

Option C — CDN only (no build step, no npm)

3. Done!

4. Optional Configuration

🎬 Usage

Basic usage

Custom animation & timing

Full example with Tailwind classes

Different HTML tags

Disable animation at runtime

Inside a Livewire component

📐 <x-scroll-reveal> Props Reference

🎨 Animation Aliases

Fade

Zoom

Slide

Flip

Rotate

Creative / Special

⚙️ Configuration

🔍 How It Works

🧪 Testing

📄 License

laraextend/scroll-reveal 适用场景与选型建议

与 laraextend/scroll-reveal 相关的其它包

统计信息

GitHub 信息

其他信息

📐 `<x-scroll-reveal>` Props Reference