{"id":20520972,"url":"https://github.com/markjivko/storyline","last_synced_at":"2025-10-10T21:33:29.113Z","repository":{"id":229041172,"uuid":"387865658","full_name":"markjivko/storyline","owner":"markjivko","description":"A small jQuery plugin for rendering scroll-based HTML animations","archived":false,"fork":false,"pushed_at":"2022-02-26T09:07:49.000Z","size":207,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-27T16:40:01.838Z","etag":null,"topics":["jquery","jquery-plugin","markjivko","parallax-scrolling","scroller","storyline"],"latest_commit_sha":null,"homepage":"https://markjivko.com/storyline","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/markjivko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2021-07-20T17:24:52.000Z","updated_at":"2024-12-02T13:37:21.000Z","dependencies_parsed_at":"2024-03-21T19:05:34.396Z","dependency_job_id":null,"html_url":"https://github.com/markjivko/storyline","commit_stats":null,"previous_names":["markjivko/storyline"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markjivko%2Fstoryline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markjivko%2Fstoryline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markjivko%2Fstoryline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markjivko%2Fstoryline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markjivko","download_url":"https://codeload.github.com/markjivko/storyline/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248811118,"owners_count":21165232,"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":["jquery","jquery-plugin","markjivko","parallax-scrolling","scroller","storyline"],"created_at":"2024-11-15T22:24:58.198Z","updated_at":"2025-10-10T21:33:24.090Z","avatar_url":"https://github.com/markjivko.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://markjivko.com/storyline/\"\u003e\n        \u003cimg src=\"https://repository-images.githubusercontent.com/387865658/8abb374b-b1b6-40f3-9358-73c77143fef3\"/\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\nStoryline\n=========\n\nBuild *beautiful* landing pages that change as the user scrolls up or down.\n\nProject created in 2013 and ported to GitHub in 2021.\n\nDemo\n----\nJust [visit this page](https://markjivko.com/storyline) for a short demo of the plugin and included console/debugger.\n\nGetting started\n---------------\nInclude the Storyline library\n```HTML\n\u003cscript defer src=\"https://markjivko.com/storyline/js/storyline.min.js\"\u003e\u003c/script\u003e\n```\n\nDefine your frames\n```JavaScript\n$(document).ready(function(){\n    $.storyline({\n        frames: {\n            'frameSelector': {\n                onEnter: function(c,e){},\n                onActive: function(c,e){},\n                onLeave: function(c,e){},\n                scrollIntoView: false\n            }\n        },\n        // @see Options\n    });\n})\n```\n\n*  *'frameSelector'* - String; a selector for the target storyline frame.\n*  *onEnter* - Function; called when the frame becomes visible.\n*  *onActive* - Function; called while the frame is visible, on each scroll event.\n*  *onLeave* - Function; called when the frame becomes invisible to the user.\n*  *scrollIntoView* - Boolean; overrides the option with the same name; triggered 250ms after *onEnter* to perform a scrollIntoView action\n\nYou can add as many frame selectors as you wish. Each selector can point to \neither 1 HTML element (for instance, an *#id* selector) or to many HTML elements\n(a *.class* selector etc.).\n\nAction parameters\n-----------------\nEach action defined for the frame selectors (onEnter, onActive, onLeave) gets \n2 extra parameters on each call.\n\n*  __c__ - Object; frame coordinates:\n\n```JavaScript\n{\n    frameTop: 66, // Integer - distance from the frame to the top of the page (@see Options - frameTop)\n    frameLeft: 8, // Integer - distance from the frame to the left side of the page\n    frameBottom: 240, // Integer - distance from the frame to the bottom of the page\n    frameRight: 8, // Integer - distance from the frame to the left side of the page\n    frameWidth: 1247, // Integer - frame width in pixels\n    frameHeight: 400, // Integer - frame height in pixels\n    screenWidth: 1263, // Integer - screen width in pixels\n    screenHeight: 706, // Integer - screen height in pixels\n    screenScrollTop: 342, // Integer - how much the page was scrolled\n    frameMiddleDistance: -77, // Integer - distance from the frame middle to the center of the screen\n    percent: {\n       screenPlayed=20.00, // Float - How much the page was scrolled; percent\n       frameVisible=100.00, // Float - How much of the frame is visible; percent\n       frameUnCentered=-21.81 // Float - How much is the frame off center; percent, -100 to +100\n    }\n}\n```\n* __e__ - Object; scroll event.\n\nYou can use both of these objects to fully control the behavior of frame elements such as positions, \ncolors, backgrounds etc. in a predictible, linear fashion.\n\nFrame reference\n---------------\nEach action also gets a reference of the selector via the ```$(this)``` operator.\nFurthermore, the frame itself has an object atached:\n```JavaScript\n$(this).data(\"frameInfo\")\n// Returns\n{\n    framePosition: 2, // Integer - frame index (1 to number of frames)\n    frameSelector: '.frame2', // String - frame selector\n    frameName: 'contact' // String - frame name (@see Options - buildMenu)\n}\n```\n\nOptions\n-------\nYou can further customize your storyline with the following options:\n```JavaScript\n// Available options and their defaults\n{\n    frameTop: 0, // Distance from the focused frame to the window top\n    guide: false, // Boolean - Show the storyline guide \n    buildMenu: false, // Boolean|Array - List of names for each frame\n    menuSpeed: 1500, // Integer - Scroll duration for menu clicks\n    tolerance: 20, // Integer - frame tolerance\n    logLevel: 'debug', // String - log level,\n    scrollIntoView: false, // Boolean - Default value for scroll into view\n    ignoreWarnings: true // Boolean - If set to false, the storyline will fail on each error\n}\n```\n\n### Options - frameTop\nThis is used to set the distance from the *focused* frame to the top of the screen; useful for when a floating \nmenu bar is fixed at the top of the screen.\n\n### Options - guide\nWether to show or hide the Storyline guide.\nIf set to *true*, you will get a visual representation of each frame, its parameters, position, state etc.\nYou will also get the __Storyline Log__ showing you information such as debugging data, script information, errors etc.\n\n### Options - buildMenu\nIf you set this option to a valid array of strings, each one will be interpreted as the name of a frame, in the order \npassed to the __frames__ key above. Plus, a menu will be constructed with the provided list of frame names; each time a \nuser clicks on a menu item, the page will scroll to the correspondent frame.\n\n### Options - menuSpeed\nIf a menu was constructed an an user clicks on a menu item, this option sets the interval (in milliseconds) in which the \npage will scroll to the correspondent frame.\n\n### Options - tolerance\nThis is used to trigger the *onEnter* and *onLeave* actions more loosely. Test using the *guide* option set to *true*.\n\n### Options - scrollIntoView\nThis is triggered 250ms after *onEnter* and performs a scrollIntoView action. The homonymous parameter in frames overrides this global option.\n\n### Options - ignoreWarnings\nIf another option is set incorrectly and ignoreWarnings is set to True, the script will halt at the first encountered \nerror.\n\nArchitecture\n------------\nThe plugin is very well commented.\nAll strings are stored in a *message* variable.\n```JavaScript\n{\n    error:{}, // Error messages\n    status:{}, // Status messages\n    const:{} // Constants\n}\n```\n\nThe plugin also uses an error logging mechanism with log level filtering.\n```JavaScript\n// Available log levels\nlogLevel = {\n    debug:'debug',\n    info:'info',\n    error:'error'\n}\n// How to use\nlog(message.status.x, logLevel.debug); // Log a debugging message at index \"x\"\nlog(message.status.y, logLevel.info); // Log an information message at index \"y\"\nlog(message.error.z, logLevel.error); // Log an error message at index \"z\"\n```\nYou can also set the log level by changing the *logLevel* option.\n\nYou can view the log either in the *browser console* or in the *Storyline Log* when the *guide* option \nis set to *true*.\n\nExamples of sites using the Storyline plugin\n--------------------------------------------\n* [Mark Jivko | Portfolio](https://markjivko.com)\n* [APK Factory](https://stephino.eu/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkjivko%2Fstoryline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkjivko%2Fstoryline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkjivko%2Fstoryline/lists"}