# infinite-zoom-fader

> A dynamic, configurable full screen background with optional overlay.

Latest version **3.5.1** (published 2023-11-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install infinite-zoom-fader
pnpm add infinite-zoom-fader
yarn add infinite-zoom-fader
bun add infinite-zoom-fader
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.5.1 |
| Published | 2023-11-22 |
| First published | 2023-10-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 279.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Adi Vrskic |
| Maintainers | adivrskic |
| Keywords | React, Slideshow, Zoom, Fade, Infinite, Repeating Slides, Full Screen, Image Gallery, Image Slider, React Component, Customizable, Transitions, Light, Lazy Load |

## Links

- npm: https://www.npmjs.com/package/infinite-zoom-fader
- Repository: https://github.com/adivrskic/infinite-zoom-fader
- Homepage: https://scintillating-malasada-3227fb.netlify.app/
- Issues: https://github.com/adivrskic/infinite-zoom-fader/issues
- npm.io page: https://npm.io/package/infinite-zoom-fader

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.5.1 (latest) — 2023-11-22
- 3.5.0 — 2023-11-22
- 3.4.2 — 2023-11-21
- 3.4.1 — 2023-11-21
- 3.4.0 — 2023-11-21
- 3.3.1 — 2023-11-21
- 3.3.0 — 2023-11-15
- 3.2.0 — 2023-11-15
- 3.1.0 — 2023-11-15
- 3.0.1 — 2023-11-15
- 3.0.0 — 2023-11-15
- 2.1.1 — 2023-11-15
- 2.1.0 — 2023-11-15
- 2.0.2 — 2023-11-13
- 2.0.1 — 2023-11-13
- … 27 more at https://npm.io/package/infinite-zoom-fader/versions

## README

# Infinite Zoom Fader

A lightweight, dynamic and configurable image slideshow React component.

## Demo Site

[Demo Site](https://scintillating-malasada-3227fb.netlify.app/)

## Installation

`npm i infinite-zoom-fader`

`yarn add infinite-zoom-fader`

Import the component into your project

`import { InfiniteZoomFader } from "infinite-zoom-fader";`

## Example

```
import { InfiniteZoomFader } from "infinite-zoom-fader";
import { images } from "./images";

const App = () => {
  return (
    <InfiniteZoomFader
      images={images}
      zoom: "out",
      zoomScale: 0.5,
      zoomTime: 10,
      zoomMax: 0.25,
      zoomTimingFunction: 'linear',
      transitionTime: 1
    />
  );
};

export default App;
```

## Example With Child Elements

Add any elements as children to display them on the slideshow with an overlay.

```
import { InfiniteZoomFader } from "infinite-zoom-fader";
import { images } from "./images";

const App = () => {
  return (
    <InfiniteZoomFader
      images={images}
      zoom: "out",
      zoomScale: 0.5,
      zoomTime: 10,
      zoomMax: 0.25,
      zoomTimingFunction: 'linear',
      transitionTime: 1
    >
      <div>
        <h1>Header</h1>
        <p>Subheader</p>
        <button>Call To Action</button>
      </div>
    </InfiniteZoomFader>
  );
};

export default App;
```

## Props

| Prop                 | Description                                                                              |
| -------------------- | ---------------------------------------------------------------------------------------- |
| `images`             | (Required) An object containing arrays of your desktop and mobile image sources and alts |
| `zoom`               | 'in' or 'out'                                                                            |
| `zoomMax`            | Number Between 0 and 1                                                                   |
| `zoomScale`          | Number Between 0 and 1                                                                   |
| `zoomTime`           | Number                                                                                   |
| `zoomTimingFunction` | CSS Timing Function or Cubic Bezier Function                                             |
| `transitionTime`     | Number                                                                                   |

## Images

Structure your images object with either desktop images, mobile images, or both. Mobile images will display if the viewport is smaller, and desktop images will display if the viewport is larger.

```
const images = {
  desktop: [
    {
      src: '/images/image1Src',
      alt: 'Image 1 alt
    }
    ...
  ],
  mobile: [
    {
      src: '/images/mobileImage1Src',
      alt: 'Mobile image 1 alt
    }
    ...
  ]
}
```

## Image Loading

Images are lazy loaded in the component. The first 2 are loaded from the array when the component renders, then each subsequent image is loaded 1 at a time as the animation continues.

## Default Props

The component uses predefined config props by default to get you up and running quickly.

| Prop                 | Default Value |
| -------------------- | ------------- |
| `zoom`               | 'out'         |
| `zoomMax`            | 0.25          |
| `zoomScale`          | 0.5           |
| `zoomTime`           | 10            |
| `zoomTimingFunction` | 'linear'      |
| `transitionTime`     | 1             |

## License

MIT

---
_Source: https://npm.io/package/infinite-zoom-fader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._