{"id":5341,"date":"2014-05-08T02:00:00","date_gmt":"2014-05-08T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/multiscroll-js-jquery-plugin-to-create-multi-scrolling-sites-with-two-vertical-layouts\/"},"modified":"2024-02-08T00:29:54","modified_gmt":"2024-02-07T23:29:54","slug":"multiscroll-js-jquery-plugin-to-create-multi-scrolling-sites-with-two-vertical-layouts","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/multiscroll-js-jquery-plugin-to-create-multi-scrolling-sites-with-two-vertical-layouts\/","title":{"rendered":"multiScroll.js: create split scrolling sites [jQuery]"},"content":{"rendered":"\n<p>Although there are many jQuery plugins out there, there&#8217;s space for more yet!<br>\nThis time I found a couple of sites using this new kind of <strong>multi-directional<\/strong> scroll and as didn&#8217;t find any script to do it, I decided to make it by my own.<\/p>\n\n\n\n<p>Some sites using this kind of navigation are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>http:\/\/www.reverzo.tymberry.com\/<\/li>\n\n\n\n<li>http:\/\/www.skodayeti.pl<\/li>\n\n\n\n<li>http:\/\/coffeesurfing.illy.com\/wps\/wcm\/connect\/cs_en\/home<\/li>\n\n\n\n<li>http:\/\/wandaprint.com\/home\/<\/li>\n<\/ul>\n\n\n\n<p><strong>multiScroll.js<\/strong> is the name I chose for this plugin. Its aim is to facilitate the creation of <strong>multi-scrolling websites<\/strong> with <strong>two vertical panels or layouts<\/strong> scrolling in opposite directions. A great way to catch the visitor attention with an original page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/alvarotrigo.com\/blog\/wp-content\/uploads\/2014\/05\/multiscroll-plugin-divided-panels.jpg\" alt=\"multiScroll.js\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 626px; --smush-placeholder-aspect-ratio: 626\/319;\" \/><\/figure>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/alvarotrigo.com\/multiScroll\/\" title=\"See Demo\" target=\"_blank\" rel=\"noopener\">See Demo<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/github.com\/alvarotrigo\/multiscroll.js\" title=\"View on GitHub\" target=\"_blank\" rel=\"noopener nofollow\">View on GitHub<\/a><\/div>\n<\/div>\n\n\n\n<p>It is quite similar to one of my previous plugins, <a href=\"https:\/\/alvarotrigo.com\/fullPage\/\">fullpage.js<\/a>, from which I&#8217;ve taken part of the code. This way the task was much faster this time. It only took me one day to get the beta version.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-use-it\">How to use it<\/h2>\n\n\n<p>The needed HTML markup is the following:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"multiscroll\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"ms-left\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"ms-section\"<\/span>&gt;<\/span>Section 1 Left<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"ms-section\"<\/span>&gt;<\/span>Section 2 Left<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"ms-section\"<\/span>&gt;<\/span>Section 3 Left<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"ms-right\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"ms-section\"<\/span>&gt;<\/span>Section 1 Right<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"ms-section\"<\/span>&gt;<\/span>Section 2 Right<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"ms-section\"<\/span>&gt;<\/span>Section 3 Right<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>To initialize the plugin all you need to do is including the needed js and css files and call the plugin inside a <code>$(document).ready<\/code> function using the selector which will be used as a wrapper.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">$(<span class=\"hljs-built_in\">document<\/span>).ready(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n    $(<span class=\"hljs-string\">'#multiscroll'<\/span>).multiscroll();\n});\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<h2 class=\"wp-block-heading\" id=\"documentation-%26-questions\">Documentation &amp; Questions<\/h2>\n\n\n<p>For more documentation about the plugin, check the <a href=\"https:\/\/github.com\/alvarotrigo\/multiscroll.js\" target=\"_blank\" rel=\"noopener nofollow\">github repository<\/a>.<br>\nI encourage you to use <a href=\"https:\/\/github.com\/alvarotrigo\/multiscroll.js\/issues?page=1&amp;state=open\" target=\"_blank\" rel=\"noopener nofollow\">the issues forum<\/a> to report bugs or ask any question related with the plugin.<br>\nAlso, don\u2019t forget <a href=\"https:\/\/github.com\/alvarotrigo\/multiscroll.js\/search?q=&amp;type=Issues\" target=\"_blank\" rel=\"noopener nofollow\">to search for your question<\/a> before opening a new thread as they might have been already asked previously.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"extensions\">Extensions<\/h2>\n\n\n<p>The project has been growing with the time I&#8217;ve added some <a href=\"https:\/\/alvarotrigo.com\/multiScroll\/extensions\/\">payed extensions<\/a> that can be added to enhance its behaviour. Don&#8217;t miss them out!<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"wordpress-theme-%2F-template\">WordPress theme \/ template<\/h2>\n\n\n<p>The guys from Themify have created what it seems like <a href=\"https:\/\/goo.gl\/Xuix30\" target=\"_blank\" rel=\"noopener nofollow\">a nice theme for wordpress<\/a>. I encourage you to make use of it if you are planning to integrate multiScroll.js and wordpress.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"donations-are-welcome!\">Donations are welcome!<\/h2>\n\n\n<p>If anyone is so kind to invite me for a coffee I will appreciate it a lot \ud83d\ude42<\/p>\n\n\n\n<p><a href=\"https:\/\/www.paypal.com\/es\/cgi-bin\/webscr?cmd=_donations&amp;business=BEK5JQCQMED4J&amp;lc=GB&amp;item_name=multiScroll%2ejs&amp;currency_code=USD&amp;bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted\" target=\"_blank\" rel=\"noopener nofollow\"><img decoding=\"async\" data-src=\"https:\/\/www.paypalobjects.com\/en_US\/GB\/i\/btn\/btn_donateCC_LG.gif\" alt=\"Donations\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\"><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>We write about front-end web development and design. JavaScript and CSS tutorials and guides to make you a better web developer.<\/p>\n","protected":false},"author":1,"featured_media":5340,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[120],"tags":[52,10,18],"class_list":["post-5341","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-frontend","tag-javascript","tag-jquery"],"acf":[],"_links":{"self":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5341","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/comments?post=5341"}],"version-history":[{"count":4,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5341\/revisions"}],"predecessor-version":[{"id":11798,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5341\/revisions\/11798"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media\/5340"}],"wp:attachment":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media?parent=5341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/categories?post=5341"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/tags?post=5341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}