{"id":13426780,"url":"https://github.com/pederan/Parallax-ImageScroll","last_synced_at":"2025-03-15T21:31:54.714Z","repository":{"id":12317732,"uuid":"14953187","full_name":"pederan/Parallax-ImageScroll","owner":"pederan","description":"JQuery and amd compatible plugin to create a parallax effect as seen at spotify.com","archived":false,"fork":false,"pushed_at":"2015-11-07T16:34:10.000Z","size":5002,"stargazers_count":653,"open_issues_count":3,"forks_count":156,"subscribers_count":50,"default_branch":"master","last_synced_at":"2025-03-05T12:19:44.500Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pederan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-12-05T12:45:02.000Z","updated_at":"2025-02-13T04:07:58.000Z","dependencies_parsed_at":"2022-08-29T00:30:56.257Z","dependency_job_id":null,"html_url":"https://github.com/pederan/Parallax-ImageScroll","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pederan%2FParallax-ImageScroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pederan%2FParallax-ImageScroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pederan%2FParallax-ImageScroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pederan%2FParallax-ImageScroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pederan","download_url":"https://codeload.github.com/pederan/Parallax-ImageScroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243230108,"owners_count":20257643,"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":[],"created_at":"2024-07-31T00:01:44.375Z","updated_at":"2025-03-15T21:31:54.247Z","avatar_url":"https://github.com/pederan.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Images"],"sub_categories":["Data Table"],"readme":"# Parallax ImageScroll - jQuery plugin\n\nJQuery and amd compatible plugin to create a parallax effect with images. Heavily inspired by the [spotify.com](https://www.spotify.com) website.\n\nThe plugin is really simple to use with some options to tweek. It makes use of css3 transform for animation where supported and falls back to top and left positioning for ancient browsers.\n\n[Check out the live demo](http://codepen.io/pederan/full/Hheuy). (No parallax effect and smaller image sizes for touch devices, see Touch section for details.)\n\n### Markup\n\nMarkup can consist of as many image elements as you want, but you should separate them with a content block, e.g. a section.\n\n```html\n\u003cdiv class=\"img-holder\" data-image=\"anImage.jpg\"\u003e\u003c/div\u003e\n\u003csection\u003e\u003cp\u003eContent that \"slides\" on top of the images\u003c/p\u003e\u003c/section\u003e\n\u003cdiv class=\"img-holder\" data-image=\"anotherImage.jpg\"\u003e[optional content to be displayed on top of the images]\u003c/div\u003e\n```\n\nYou can set parameters using html5 data attributes or with javascript, see options section for details.\n\n### Initialization\n\nTo initialize the plugin, call the imageScroll method on your image elements\n```javascript\n$('.img-holder').imageScroll();\n```\n\n### AMD\n\nThe plugin is AMD compatible. To use with e.g. RequireJS, you can do this. See demo files for example.\n```javascript\nrequire(['jquery.imageScroll'], function (ImageScroll) {\n    $('.img-holder').each(function () {\n        new ImageScroll(this);\n    });\n    //or\n    //$('.img-holder').imageScroll();\n});\n```\n\n### Options\n\nYou can configure the default options, by passing an option object to the plugin\n```javascript\n$('.img-holder').imageScroll({\n    coverRatio: 0.5\n});\n```\n\nor set the options via data attributes, data-*optionname* (available options: image, width (mediaWidth), height (mediaHeight), cover-ratio (coverRatio), min-height (holderMinHeight), max-height (holderMaxHeight), extra-height (extraHeight)\n```html\n\u003cdiv class=\"img-holder\" data-image=\"anImage.jpg\" data-cover-ratio=\"0.5\"\u003e\u003c/div\u003e\n```\n\nor set the options globally\n```javascript\n$.fn.imageScroll.defaults.coverRatio = 0.5;\n//AMD\nImageScroll.defaults.coverRatio = 0.5;\n```\n\nConfigurable options:\n* ```image: null``` : The image to show (best to set this option via data attr (data-img)\n* ```imageAttribute: 'image'```: The data attribute name for images. Uses the value of this attribute to load the image\n* ```container: $('body')``` The element to which the parallax image(s) will be attached to\n* ```windowObject: $(window)``` The window object which listens to scroll and resize events\n* ```speed: 0.2``` The speed of the parallax effect. A floating number between 0 and 1, where a higher number will move the images faster upwards\n* ```coverRatio: 0.75 //75%``` How many percent of the screen each image should cover\n* ```holderClass: 'imageHolder'``` Class added to the image holder(s)\n* ```imgClass: 'img-holder-img'``` Class added to the image\n* ```holderMinHeight: 200``` The minimum height of the image in pixels\n* ```holderMaxHeight: null``` The maximum height of the image in pixels\n* ```extraHeight: 0``` Extra height added to the image. Can be useful if you want to show more of the top image\n* ```mediaWidth: 1600``` The original width of the image\n* ```mediaHeight: 900``` The original height of the image\n* ```parallax: true``` Whether or not you want the parallax effect, e.g. does not work very well in ancient browsers\n* ```touch: false``` Presents a mobile/tablet friendy version, no parallax effect and smaller images (should be used with a mobile/tablet optimized images)\n\nPublic methods:\n* ```disable()```\n* ```enable()```\n* ```refresh()```\n* ```destroy()```\n\nYou can call them on individual- or all the instances.\n```javascript\n//Call method refresh on all the instances of the plugin\nvar instances = $('.img-holder');\ninstances.imageScroll('refresh');\n\n//E.g. Call method refresh on the first image\n//Alternative 1:\nvar instances = $('.img-holder');\nvar instance = $(instances.get(0));\ninstance.imageScroll('refresh');\n\n//Alternative 2:\nvar instances = $('.img-holder');\nvar instance = $(instances.get(0)).data('plugin_imageScroll');\ninstance.refresh();\n\n```\n\n### Touch\n\nThe effect is not very smooth on a touch device. You could therefore present the user with a fallback version, which displays the images with no parallax effect. You can do so by checking for touch (e.g. with Modernizr, external lib) and set dynamic options to adjust to this.\n```javascript\nvar touch = Modernizr.touch;\n$('.img-holder').imageScroll({\n    imageAttribute: (touch === true) ? 'image-mobile' : 'image',\n    touch: touch\n});\n```\n\n### Installation\n\nInstall using bower\n```sh\nbower install Parallax-ImageScroll\n```\n\nInstall using npm\n```sh\nnpm install parallax-imagescroll\n```\n\n### Requirements\n\njQuery version 1.8.0 or higher\n\n### Notes\n\nIf you add content on top of the parallaxed image, make sure to apply a higher z-depth for the content (applies for browsers that support 3d transforms).\nExample:\n\n```html\n\u003cdiv class=\"img-holder\" data-image=\"anotherImage.jpg\"\u003e\u003cp style=\"-webkit-transform: translateZ(1px)\"\u003eHello world!\u003c/p\u003e\u003c/div\u003e\n```\n\n### Limitations\n\nDoes not work very well on mobile or IE \u003c= 9. You can then present a fallback solution by disabling parallax for ancient desktop browser (set parallax option to false) and present touch optimized images for touch devices (set touch option to true).\n\n### MIT\n\nMIT licensed\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpederan%2FParallax-ImageScroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpederan%2FParallax-ImageScroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpederan%2FParallax-ImageScroll/lists"}