{"id":20499587,"url":"https://github.com/anupamkhosla/marqueedirection","last_synced_at":"2026-04-12T09:07:23.744Z","repository":{"id":47589447,"uuid":"85846112","full_name":"AnupamKhosla/marqueedirection","owner":"AnupamKhosla","description":"jQuery marquee effect that can change direction","archived":false,"fork":false,"pushed_at":"2017-04-03T15:31:06.000Z","size":24,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-14T23:02:18.861Z","etag":null,"topics":["css","html","javascript","jquery","jquery-marquee","jquery-plugin","marquee"],"latest_commit_sha":null,"homepage":"https://anupamkhosla.github.io/marqueedirection/","language":"HTML","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/AnupamKhosla.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":"2017-03-22T15:41:19.000Z","updated_at":"2022-07-21T02:34:26.000Z","dependencies_parsed_at":"2022-08-30T21:12:44.222Z","dependency_job_id":null,"html_url":"https://github.com/AnupamKhosla/marqueedirection","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/AnupamKhosla/marqueedirection","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnupamKhosla%2Fmarqueedirection","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnupamKhosla%2Fmarqueedirection/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnupamKhosla%2Fmarqueedirection/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnupamKhosla%2Fmarqueedirection/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AnupamKhosla","download_url":"https://codeload.github.com/AnupamKhosla/marqueedirection/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnupamKhosla%2Fmarqueedirection/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273064340,"owners_count":25039259,"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","status":"online","status_checked_at":"2025-08-31T02:00:09.071Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["css","html","javascript","jquery","jquery-marquee","jquery-plugin","marquee"],"created_at":"2024-11-15T18:17:46.140Z","updated_at":"2025-10-24T23:37:34.008Z","avatar_url":"https://github.com/AnupamKhosla.png","language":"HTML","readme":"# marquee-direction\njQuery marquee effect that can change direction\n\n## Options  \n - **speed** Value 1 = 1px scroll per second. It must be positive.\n - **direction** `vertical` or `horizontal`  \n \n## Events  \n - **forward**  Starts scrolling down for vertical and scrolling rightwards for horizontal.  \n - **backward** Starts scrolling up for vertical and leftwards for horizontal.  \n - **pause** Stops and scrolling   \n - **revalidate** Recaclculate if text overflows or not and apply/remove marquee as needed. \n \n \n ## Example:  \n \n html markup:  \n \n    \u003cdiv class=\"marquee marquee-vertical\" data-speed=\"100\" data-direction=\"vertical\"\u003e\n        \u003cdiv class=\"marquee-wrapper\"\u003e\n            \u003cdiv class=\"marquee-content\"\u003e\n                Some long text...\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \n    \u003cdiv class=\"marquee marquee-horizontal \" data-speed=\"50\" data-direction=\"horizontal\"\u003e       \n        \u003cdiv class=\"marquee-wrapper\"\u003e\n            \u003cdiv class=\"marquee-content\"\u003e\n               Some long text here...\n            \u003c/div\u003e            \n        \u003c/div\u003e\n    \u003c/div\u003e\n\ncss:  \n\n    .marquee-vertical {\n        height: 200px;\n        overflow: auto;\n    }\n    \n    .marquee-content {\n        margin: 0;\n        padding: 30px;\n    }\n    \n    .marquee {\n        overflow: auto;\n       \tpadding: 0;\n        margin: 15px 0;\n    }\n\n    .marquee-horizontal {\n    \twhite-space: nowrap;\n    }\n    \n    .marquee-horizontal .marquee-content,\n    .marquee-horizontal .marquee-wrapper {\n        display: inline-block;\n    }\n\njs:  \n\n    $(\".marquee\").marquee(); //initialization  \n\n    $(\".marquee\").marquee({\n      speed: 100,  \n      direction: horizontal\n    }); //initialization with custom speed and direction\n\n    $(\".marquee\").trigger(\"forward\"); // triggers forward event  \n\n    $(\".marquee\").eq(0).trigger(\"forward\", {speed: 50}); // Custom speed  \n\n    $(\".marquee\").trigger(\"revalidate\"); //E.g. if on window.resize text doesn't overflow you might want to disable marquee \n\n## Note  \n\n`.marquee` and `.marquee-wrapper` must have **no padding**. Any padding can be applied to either `.marquee-content` or you may wrap `.marquee` in another container.\n\n## data-\\* API  \n\nThe plugin supports data-\\* attributes. If both data-\\* and `settings` are passed in javscript initialization then data-\\* values will override the later.\n\n\n\n\n\n## Pending\n\n### toggle  \nToggle event like forward and backward would be useful\n\n### marquee_overflow_setInterval  \nMarquee effect acheived with native setInterval by incrementing/decrementing `scrollTop`/`scrollLeft` with setInterval. data-\\* plugin initialaztion also added. Since setInterval doesn't fire earlier than 10ms so the practical speed limit with this method is 1px to 10ppx per second. This could be incresed by decreasing the fram rate, i.e. increasing scrollTop/left in more than 1px steps. But jquery animate natively takes care of this. So better use marquee-animate-toggle above file.\n\n\n### marquee_translate_transition \nMarquee effect _to be_ acheived with transtion property over `translate` so as to use native css transition with gpu acceleration. This file doesn't work yet. Problem is with [unneccessary delay required](http://stackoverflow.com/q/42930773/3429430) -- Pending.  \n\nThe problem is solved now. And the next version of the plugin will support css3 transitions. :-)\n\n- Other pending feature is trying using css3 `animations`. Currently I have not found any way to toggle animations amidst. \n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanupamkhosla%2Fmarqueedirection","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanupamkhosla%2Fmarqueedirection","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanupamkhosla%2Fmarqueedirection/lists"}