alpinejs-intersect-class

KO | EN

gitlite — search

#hacktoberfest #typescript #golang #go #android #machine-learning #rust #docker #windows #awesome #kubernetes #awesome-list #vue #open-source

alpinejs-intersect-class

(★ 15)

An Alpine.js plugin to easily set CSS classes to an element when it enters the viewport

alpinejs-intersect-class 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Alpine.js Intersect-Class Plugin

An Alpine.js plugin to easily set CSS classes to an element when it enters the viewport.<br>
Especially useful for animating elements when scrolling.

```html

<div x-data x-intersect-class="is-visible"></div>
```

### Demo
[Click here to take a look at the examples](https://heidkaemper.github.io/alpinejs-intersect-class/using-tailwindcss.html)
([View Source](https://github.com/heidkaemper/alpinejs-intersect-class/tree/main/docs))

---

## Installation
You can use this plugin by either including it from a `<script>` tag or installing it via NPM:

### Via CDN
You can include the CDN build of this plugin as a `<script>` tag, just make sure to include it BEFORE Alpine's core JS file.

```html

<script defer src="https://unpkg.com/alpinejs-intersect-class@1.x.x/dist/cdn.min.js"></script>

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
```

### Via NPM
You can install Intersect from NPM for use inside your bundle like so:

```sh
npm install alpinejs-intersect-class
```

Then initialize it from your bundle:

```js
import Alpine from 'alpinejs'
import intersectClass from 'alpinejs-intersect-class'

Alpine.plugin(intersectClass)

...
```

## Usage
Use the `x-intersect-class` Attribute to set the CSS class that should be added to the element once it comes to the browsers viewport.

```html
<div x-data x-intersect-class="fade-in"></div>
```
Make sure that you have defined that class in your CSS files, like `fade-in` in this example.

### The .once Modifier

You can use the `.once` modifier if you want to trigger the CSS class only on the first appearance of an element.

```html
<div x-data x-intersect-class.once="fade-in"></div>
```

### .threshold, .half and .full Modifier

Control the `threshold` property of the IntersectionObserver. This works the same way like it does with Alpines **[Intersect Plugin](https://alpinejs.dev/plugins/intersect#half)**.

```html
<div x-data x-intersect-class.threshold.75="fade-in"></div>
```

## FAQ

### Couldn't I just use Alpines Intersect Plugin to do something like this?

```html
<div x-data="{ shown: false }" x-intersect="shown = true" :class="{ 'is-visible': shown }">
```
You definitely could. And if you are using the Intersect plugin already, then you probably should!<br>
The point of the Intersect-Class plugin is to provide this functionality with as few attributes as possible so that frontend developers will actually use it.

### Do I need the x-data attribute?

Yes, you do. With x-data you define a Alpine.js Component.<br>
[Click here](https://alpinejs.dev/directives/data) to read more about x-data in the Alpine.js documentation.

### My elements are flashing when the page is loading

This is a known problem with JavaScript animations. It's because the JS takes a moment to initialize. The solution can be different depending on what kind of animation you want to run.

A good starting point could be the use of [x-cloak](https://alpinejs.dev/directives/cloak).
Initial use of the CSS class can also be helpful, like I did for the [CSS animations demo](https://heidkaemper.github.io/alpinejs-intersect-class/using-css-animations.html).

---

alpinejs-intersect-class

alpinejs-intersect-class 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

alpinejs-intersect-class

alpinejs-intersect-class 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README