{"id":21593025,"url":"https://github.com/jonabrams/colorup","last_synced_at":"2025-03-18T10:28:50.804Z","repository":{"id":4685081,"uuid":"5831773","full_name":"JonAbrams/colorup","owner":"JonAbrams","description":"a jQuery plugin to slowly colorize an image as a user scrolls down a page","archived":false,"fork":false,"pushed_at":"2012-09-25T19:38:20.000Z","size":116,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-17T07:10:00.350Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/JonAbrams.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":"2012-09-16T18:18:01.000Z","updated_at":"2014-06-20T06:24:54.000Z","dependencies_parsed_at":"2022-08-06T17:30:16.660Z","dependency_job_id":null,"html_url":"https://github.com/JonAbrams/colorup","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonAbrams%2Fcolorup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonAbrams%2Fcolorup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonAbrams%2Fcolorup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonAbrams%2Fcolorup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JonAbrams","download_url":"https://codeload.github.com/JonAbrams/colorup/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244201223,"owners_count":20415038,"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-11-24T17:10:59.226Z","updated_at":"2025-03-18T10:28:50.772Z","avatar_url":"https://github.com/JonAbrams.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"colorup\n=======\n\nA jQuery plugin to slowly colorize an image as a user scrolls down a page\n\n[Here's a demo](http://jsbin.com/ahoner/31)\n\nWhat does it actually do?\n---\n\nUsing a sprite containing two versions of an image (such as dark and light versions), this jQuery plugin will slowly \"fill up\" the image as you scroll down the page.\n\nI made it for [a friend's blog](http://jure-stern.si/blog/building-responsive-websites-with-less/).\n\nHow do I use it?\n---\n\n1. Include the js file on any page you want it used.\n1. In your HTML, put an empty div and give it a unique ID, this is where the image will appear. If you want it to remain in a fixed position on a page, put it inside another div and set its display property to \"fixed\".\n1. Create a sprite containing the two versions of your image. The default version goes on top, the colour/complete version goes below it.\n1. In your JS's ready function call colorup() on the div.\n\nParameters\n---\n\nThe colorup() function takes one object literal parameter.\n\n*url*: The url for the sprite.\n*target* (optional): The element you want the scrolling to be measured against. If a target isn't specified then the document object will be used by default.\n\nAn Example\n---\n\n    $(\"#logo\").colorup({\n      url: \"http://i.imgur.com/DduzE.png\",\n      target: \"#my_article\"\n    });\nFor the complete example/demo check out [this jsbin](http://jsbin.com/ahoner/33/edit)\n\nAnd [here's a version without a target](http://jsbin.com/ahoner/31/edit).\n\nThings To Note\n---\n\nFor some reason, sometimes the 1.8+ versions of jQuery have difficulty figuring out the height of the browser window, and just returns the document height which can cause weird behaviour.\n\nMake sure you use the \"\u003c!DOCTYPE html\u003e\" doctype, and if that doesn't work, try version 1.7.2 of jQuery.\nLicense\n---\n\nUse it for anything you want as long as it's for good and not evil.\n\nCredit\n---\n\nCreated by [Jon Abrams](http://twitter.com/JonathanAbrams)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonabrams%2Fcolorup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjonabrams%2Fcolorup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonabrams%2Fcolorup/lists"}