{"id":13402949,"url":"https://github.com/nk-o/jarallax","last_synced_at":"2025-05-14T14:02:12.464Z","repository":{"id":1600284,"uuid":"43080546","full_name":"nk-o/jarallax","owner":"nk-o","description":"Parallax scrolling for modern browsers","archived":false,"fork":false,"pushed_at":"2024-06-09T07:07:27.000Z","size":70090,"stargazers_count":1431,"open_issues_count":23,"forks_count":215,"subscribers_count":24,"default_branch":"master","last_synced_at":"2025-05-13T20:12:11.045Z","etag":null,"topics":["image","image-background","parallax","scrolling","video","video-background","vimeo","youtube"],"latest_commit_sha":null,"homepage":"https://jarallax.nkdev.info","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nk-o.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":"https://www.buymeacoffee.com/nkdev"}},"created_at":"2015-09-24T16:59:31.000Z","updated_at":"2025-05-13T06:42:11.000Z","dependencies_parsed_at":"2023-01-13T11:15:15.773Z","dependency_job_id":"e212e5c5-9b9b-487f-8f1f-e7332d42befa","html_url":"https://github.com/nk-o/jarallax","commit_stats":{"total_commits":416,"total_committers":14,"mean_commits":"29.714285714285715","dds":0.04807692307692313,"last_synced_commit":"d4de08184fddacf224c7019b77065191ce1b6481"},"previous_names":[],"tags_count":56,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nk-o%2Fjarallax","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nk-o%2Fjarallax/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nk-o%2Fjarallax/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nk-o%2Fjarallax/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nk-o","download_url":"https://codeload.github.com/nk-o/jarallax/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254020638,"owners_count":22000755,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["image","image-background","parallax","scrolling","video","video-background","vimeo","youtube"],"created_at":"2024-07-30T19:01:23.303Z","updated_at":"2025-05-14T14:02:12.442Z","avatar_url":"https://github.com/nk-o.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/nkdev"],"categories":["JavaScript","TypeScript"],"sub_categories":[],"readme":"# Jarallax \u003c!-- omit in toc --\u003e\n\n![jarallax.min.js](https://img.badgesize.io/nk-o/jarallax/master/dist/jarallax.min.js?compression=gzip\u0026label=core%20gzip%20size) ![jarallax-video.min.js](https://img.badgesize.io/nk-o/jarallax/master/dist/jarallax-video.min.js?compression=gzip\u0026label=video%20ext%20gzip%20size)\n\nParallax scrolling for modern browsers. Supported \u0026lt;img\u0026gt; tags, background images, YouTube, Vimeo and Self-Hosted Videos.\n\n## [Online Demo](https://jarallax.nkdev.info/) \u003c!-- omit in toc --\u003e\n\n## Table of Contents \u003c!-- omit in toc --\u003e\n\n- [WordPress Plugin](#wordpress-plugin)\n- [Quick Start](#quick-start)\n- [Import Jarallax](#import-jarallax)\n  - [ESM](#esm)\n  - [ESM CDN](#esm-cdn)\n  - [UMD](#umd)\n  - [UMD CDN](#umd-cdn)\n  - [CJS (Bundlers like Webpack)](#cjs-bundlers-like-webpack)\n- [Prepare HTML](#prepare-html)\n- [Run Jarallax](#run-jarallax)\n  - [A. JavaScript way](#a-javascript-way)\n  - [B. Data attribute way](#b-data-attribute-way)\n  - [C. jQuery way](#c-jquery-way)\n- [Background Video Usage Examples](#background-video-usage-examples)\n  - [A. JavaScript way](#a-javascript-way-1)\n  - [B. Data attribute way](#b-data-attribute-way-1)\n- [Options](#options)\n  - [Disable on mobile devices](#disable-on-mobile-devices)\n  - [Additional options for video extension](#additional-options-for-video-extension)\n- [Events](#events)\n  - [Additional events for video extension](#additional-events-for-video-extension)\n  - [onScroll event](#onscroll-event)\n- [Methods](#methods)\n  - [Call methods example](#call-methods-example)\n    - [A. JavaScript way](#a-javascript-way-2)\n    - [B. jQuery way](#b-jquery-way)\n- [For Developers](#for-developers)\n- [Real Usage Examples](#real-usage-examples)\n- [Credits](#credits)\n\n## WordPress Plugin\n\n[![Advanced WordPress Backgrounds](https://a.nkdev.info/jarallax/awb-preview.jpg)](https://wordpress.org/plugins/advanced-backgrounds/)\n\nWe made WordPress plugin to easily add backgrounds for content in your blog with all Jarallax features.\n\nDemo: \u003chttps://wpbackgrounds.com/\u003e\n\nDownload: \u003chttps://wordpress.org/plugins/advanced-backgrounds/\u003e\n\n## Quick Start\n\nThere are a set of examples, which you can use as a starting point with Jarallax.\n\n- [ES Modules](examples/es-modules)\n- [JavaScript](examples/javascript)\n- [Next.js](examples/next)\n- [Next.js Advanced Usage](examples/next-advanced)\n- [HTML](examples/html)\n- [jQuery](examples/jquery)\n\n## Import Jarallax\n\nUse one of the following examples to import jarallax.\n\n### ESM\n\nWe provide a version of Jarallax built as ESM (jarallax.esm.js and jarallax.esm.min.js) which allows you to use Jarallax as a module in your browser, if your [targeted browsers support it](https://caniuse.com/es6-module).\n\n```html\n\u003c!-- Jarallax CSS --\u003e\n\u003clink href=\"jarallax.min.css\" rel=\"stylesheet\"\u003e\n\n\u003c!-- Jarallax JS --\u003e\n\u003cscript type=\"module\"\u003e\n  import { jarallax, jarallaxVideo } from \"jarallax.esm.min.js\";\n\n  // Optional video extension\n  jarallaxVideo();\n\u003c/script\u003e\n```\n\n### ESM CDN\n\n```html\n\u003c!-- Jarallax CSS --\u003e\n\u003clink href=\"https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.css\" rel=\"stylesheet\"\u003e\n\n\u003c!-- Jarallax JS --\u003e\n\u003cscript type=\"module\"\u003e\n  import { jarallax, jarallaxVideo } from \"https://cdn.jsdelivr.net/npm/jarallax@2/+esm\";\n\n  // Optional video extension\n  jarallaxVideo();\n\u003c/script\u003e\n```\n\n### UMD\n\nJarallax may be also used in a traditional way by including script in HTML and using library by accessing `window.jarallax`.\n\n```html\n\u003c!-- Jarallax CSS --\u003e\n\u003clink href=\"jarallax.min.css\" rel=\"stylesheet\"\u003e\n\n\u003c!-- Jarallax JS --\u003e\n\u003cscript src=\"jarallax.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Jarallax JS: Optional video extension --\u003e\n\u003cscript src=\"jarallax-video.min.js\"\u003e\u003c/script\u003e\n```\n\n### UMD CDN\n\n```html\n\u003c!-- Jarallax CSS --\u003e\n\u003clink href=\"https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.css\" rel=\"stylesheet\"\u003e\n\n\u003c!-- Jarallax JS --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Jarallax JS: Optional video extension --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax-video.min.js\"\u003e\u003c/script\u003e\n```\n\n### CJS (Bundlers like Webpack)\n\nInstall Jarallax as a Node.js module using npm\n\n```\nnpm install jarallax\n```\n\nImport Jarallax by adding this line to your app's entry point (usually `index.js` or `app.js`):\n\n```javascript\nimport { jarallax, jarallaxVideo } from \"jarallax\";\nimport 'jarallax/dist/jarallax.min.css';\n\n// Optional video extension\njarallaxVideo();\n```\n\n## Prepare HTML\n\n```html\n\u003c!-- Background Image Parallax --\u003e\n\u003cdiv class=\"jarallax\"\u003e\n  \u003cimg class=\"jarallax-img\" src=\"\u003cbackground_image_url_here\u003e\" alt=\"\"\u003e\n  Your content here...\n\u003c/div\u003e\n\n\u003c!-- Background Image Parallax with \u003cpicture\u003e tag --\u003e\n\u003cdiv class=\"jarallax\"\u003e\n  \u003cpicture class=\"jarallax-img\"\u003e\n    \u003csource media=\"...\" srcset=\"\u003calternative_background_image_url_here\u003e\"\u003e\n    \u003cimg src=\"\u003cbackground_image_url_here\u003e\" alt=\"\"\u003e\n  \u003c/picture\u003e\n  Your content here...\n\u003c/div\u003e\n\n\u003c!-- Alternate: Background Image Parallax --\u003e\n\u003cdiv class=\"jarallax\" style=\"background-image: url('\u003cbackground_image_url_here\u003e');\"\u003e\n  Your content here...\n\u003c/div\u003e\n```\n\n## Run Jarallax\n\nNote: automatic data-attribute initialization and jQuery integration are available in UMD mode only.\n\n### A. JavaScript way\n\n```javascript\njarallax(document.querySelectorAll('.jarallax'), {\n  speed: 0.2,\n});\n```\n\n### B. Data attribute way\n\n```html\n\u003cdiv data-jarallax data-speed=\"0.2\" class=\"jarallax\"\u003e\n  \u003cimg class=\"jarallax-img\" src=\"\u003cbackground_image_url_here\u003e\" alt=\"\"\u003e\n  Your content here...\n\u003c/div\u003e\n```\n\nNote: You can use all available options as data attributes. For example: `data-speed`, `data-img-src`, `data-img-size`, etc...\n\n### C. jQuery way\n\n```javascript\n$('.jarallax').jarallax({\n  speed: 0.2,\n});\n```\n\n#### No conflict (only if you use jQuery) \u003c!-- omit in toc --\u003e\n\nSometimes to prevent existing namespace collisions you may call `.noConflict` on the script to revert the value of.\n\n```javascript\nconst jarallaxPlugin = $.fn.jarallax.noConflict() // return $.fn.jarallax to previously assigned value\n$.fn.newJarallax = jarallaxPlugin // give $().newJarallax the Jarallax functionality\n```\n\n## Background Video Usage Examples\n\n### A. JavaScript way\n\n```javascript\nimport { jarallax, jarallaxVideo } from 'jarallax';\njarallaxVideo();\n\njarallax(document.querySelectorAll('.jarallax'), {\n  speed: 0.2,\n  videoSrc: 'https://www.youtube.com/watch?v=ab0TSkLe-E0'\n});\n```\n\n```html\n\u003cdiv class=\"jarallax\"\u003e\u003c/div\u003e\n```\n\n### B. Data attribute way\n\n```html\n\u003c!-- Background YouTube Parallax --\u003e\n\u003cdiv class=\"jarallax\" data-jarallax data-video-src=\"https://www.youtube.com/watch?v=ab0TSkLe-E0\"\u003e\n  Your content here...\n\u003c/div\u003e\n\n\u003c!-- Background Vimeo Parallax --\u003e\n\u003cdiv class=\"jarallax\" data-jarallax data-video-src=\"https://vimeo.com/110138539\"\u003e\n  Your content here...\n\u003c/div\u003e\n\n\u003c!-- Background Self-Hosted Video Parallax --\u003e\n\u003cdiv class=\"jarallax\" data-jarallax data-video-src=\"mp4:./video/local-video.mp4,webm:./video/local-video.webm,ogv:./video/local-video.ogv\"\u003e\n  Your content here...\n\u003c/div\u003e\n```\n\nNote: self-hosted videos require 1 video type only, not necessarily using all mp4, webm, and ogv. This is only needed for maximum compatibility with all browsers.\n\n## Options\n\nOptions can be passed in data attributes or in object when you initialize jarallax from script.\n\nName | Type | Default | Description\n:--- | :--- | :------ | :----------\ntype | string | `scroll` | scroll, scale, opacity, scroll-opacity, scale-opacity.\nspeed | float | `0.5` | Parallax effect speed. Provide numbers from -1.0 to 2.0.\ncontainerClass | string | `jarallax-container` | Container block class attribute.\nimgSrc | path | `null` | Image url. By default used image from background.\nimgElement | dom / selector | `.jarallax-img` | Image tag that will be used as background.\nimgSize | string | `cover` | Image size. If you use `\u003cimg\u003e` tag for background, you should add `object-fit` values, else use `background-size` values.\nimgPosition | string | `50% 50%` | Image position. If you use `\u003cimg\u003e` tag for background, you should add `object-position` values, else use `background-position` values.\nimgRepeat | string | `no-repeat` | Image repeat. Supported only `background-position` values.\nkeepImg | boolean | `false` | Keep `\u003cimg\u003e` tag in it's default place after Jarallax inited.\nelementInViewport | dom | `null` | Use custom DOM / jQuery element to check if parallax block in viewport. More info here - [Issue 13](https://github.com/nk-o/jarallax/issues/13).\nzIndex | number | `-100` | z-index of parallax container.\ndisableParallax | boolean / RegExp / function | - | Disable parallax on specific user agents (using regular expression) or with function return value. The image will be set on the background.\n\n### Disable on mobile devices\n\nYou can disable parallax effect and/or video background on mobile devices using option `disableParallax` and/or `disableVideo`.\n\nExample:\n\n```javascript\njarallax(document.querySelectorAll('.jarallax'), {\n  disableParallax: /iPad|iPhone|iPod|Android/,\n  disableVideo: /iPad|iPhone|iPod|Android/\n});\n```\n\nOr using function. Example:\n\n```javascript\njarallax(document.querySelectorAll('.jarallax'), {\n  disableParallax: function () {\n    return /iPad|iPhone|iPod|Android/.test(navigator.userAgent);\n  },\n  disableVideo: function () {\n    return /iPad|iPhone|iPod|Android/.test(navigator.userAgent);\n  }\n});\n```\n\n### Additional options for video extension\n\nRequired `jarallax/jarallax-video.js` file.\n\nName | Type | Default | Description\n:--- | :--- | :------ | :----------\nvideoClass | string | `jarallax-video` | Video frame class attribute. Will also contain the type of the video, for example `jarallax-video jarallax-video-youtube`\nvideoSrc | string | `null` | You can use Youtube, Vimeo or Self-Hosted videos. Also you can use data attribute `data-jarallax-video`.\nvideoStartTime | float | `0` | Start time in seconds when video will be started (this value will be applied also after loop).\nvideoEndTime | float | `0` | End time in seconds when video will be ended.\nvideoLoop | boolean | `true` | Loop video to play infinitely.\nvideoPlayOnlyVisible | boolean | `true` | Play video only when it is visible on the screen.\nvideoLazyLoading | boolean | `true` | Preload videos only when it is visible on the screen.\ndisableVideo | boolean / RegExp / function | - | Disable video load on specific user agents (using regular expression) or with function return value. The image will be set on the background.\n\n## Events\n\nEvents used the same way as Options.\n\nName | Description\n:--- | :----------\nonScroll | Called when parallax working. Use first argument with calculations. More info [see below](#onscroll-event).\nonInit | Called after init end.\nonDestroy | Called after destroy.\nonCoverImage | Called after cover image.\n\n### Additional events for video extension\n\nRequired `jarallax/jarallax-video.js` file.\n\nName | Description\n:--- | :----------\nonVideoInsert | Called right after video is inserted in the parallax block. Video can be accessed by `this.$video`\nonVideoWorkerInit | Called after VideoWorker script initialized. Available parameter with videoWorkerObject.\n\n### onScroll event\n\n```javascript\njarallax(document.querySelectorAll('.jarallax'), {\n  onScroll: function(calculations) {\n    console.log(calculations);\n  }\n});\n```\n\nConsole Result:\n\n```javascript\n{\n  // parallax section client rect (top, left, width, height)\n  rect            : object,\n\n  // see image below for more info\n  beforeTop       : float,\n  beforeTopEnd    : float,\n  afterTop        : float,\n  beforeBottom    : float,\n  beforeBottomEnd : float,\n  afterBottom     : float,\n\n  // percent of visible part of section (from 0 to 1)\n  visiblePercent  : float,\n\n  // percent of block position relative to center of viewport from -1 to 1\n  fromViewportCenter: float\n}\n```\n\nCalculations example:\n[![On Scroll Calculations](https://a.nkdev.info/jarallax/jarallax-calculations.jpg)](https://a.nkdev.info/jarallax/jarallax-calculations.jpg)\n\n## Methods\n\nName | Result | Description\n:--- | :----- | :----------\ndestroy | - | Destroy Jarallax and set block as it was before plugin init.\nisVisible | boolean | Check if parallax block is in viewport.\nonResize | - | Fit image and clip parallax container. Called on window resize and load.\nonScroll | - | Calculate parallax image position. Called on window scroll.\n\n### Call methods example\n\n#### A. JavaScript way\n\n```javascript\njarallax(document.querySelectorAll('.jarallax'), 'destroy');\n```\n\n#### B. jQuery way\n\n```javascript\n$('.jarallax').jarallax('destroy');\n```\n\n## For Developers\n\n### Installation \u003c!-- omit in toc --\u003e\n\n* Run `npm install` in the command line\n\n### Building \u003c!-- omit in toc --\u003e\n\n* `npm run dev` to run build and start local server with files watcher\n* `npm run build` to run build\n\n### Linting \u003c!-- omit in toc --\u003e\n\n* `npm run js-lint` to show eslint errors\n* `npm run js-lint-fix` to automatically fix some of the eslint errors\n\n### Test \u003c!-- omit in toc --\u003e\n\n* `npm run test` to run unit tests\n\n## Real Usage Examples\n\n* [AWB](https://wpbackgrounds.com/)\n* [Godlike](https://demo.nkdev.info/#godlike)\n* [Youplay](https://demo.nkdev.info/#youplay)\n* [Skylith](https://demo.nkdev.info/#skylith)\n* [Khaki](https://demo.nkdev.info/#khaki)\n\n## Credits\n\n* Images \u003chttps://unsplash.com/\u003e\n* Videos \u003chttps://videos.pexels.com/\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnk-o%2Fjarallax","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnk-o%2Fjarallax","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnk-o%2Fjarallax/lists"}