{"id":5050,"date":"2013-09-20T02:00:00","date_gmt":"2013-09-20T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/fullpage-jquery-plugin-for-fullscreen-scrolling-websites\/"},"modified":"2024-07-25T14:21:19","modified_gmt":"2024-07-25T12:21:19","slug":"fullpage-jquery-plugin-for-fullscreen-scrolling-websites","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/fullpage-jquery-plugin-for-fullscreen-scrolling-websites\/","title":{"rendered":"fullPage.js jQuery Plugin for fullscreen scrolling websites"},"content":{"rendered":"\n            <p>Nowadays is very common to find <strong>fullscreen websites<\/strong> as it was in the past in the age of flash, but now, with the power of HTML, CSS and Javascript.<\/p>\n<p>I had to do one of this websites and I found out there was nothing in the jQuery plugins world to make this task easier. (Not that I was not looking for a <a href=\"https:\/\/alvarotrigo.com\/blog\/jquery-carousel\/\">jQuery carousel<\/a>)<\/p>\n<p>In an attempt to create something to make things easier for other people trying to do the same, I&#8217;ve created a simple plugin which creates the basic structure and functionality to start making a fullscreen scrolling website, also known as <strong>single page website<\/strong>.<\/p>\n<p>I&#8217;ve named it <strong>fullPage.js<\/strong> and It is available at <a href=\"https:\/\/github.com\/alvarotrigo\/fullPage.js\" target=\"_blank\" rel=\"noopener nofollow\">my github account<\/a>.<\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/alvarotrigo.com\/blog\/wp-content\/uploads\/2013\/09\/fullPage-js-fullScreen-scrolling-website.png\" alt=\"fullPage.js\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 626px; --smush-placeholder-aspect-ratio: 626\/293;\"><\/p>\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n     <a href=\"\" alt=\"See demo\" title=\"See demo\" class=\"post-button post-button-demo\">Demo<\/a>\n     <a href=\"\" alt=\"See demo\" title=\"See demo\" class=\"post-button post-button-demo\">View on GitHub<\/a>\n<\/div>\n<p>It&#8217;s in the first version and I hope to keep improving it with the time. Right now, is capable of:<\/p>\n<ul class=\"wp-block-list\">\n<li>Scroll within sections using they mouse wheel scroll<\/li>\n<li>Scroll within sections and within sliders using the arrow keys and the pageUp and pageDown keys<\/li>\n<li>Use multiple callbacks<\/li>\n<li>Use touch events for mobile and tablet devices<\/li>\n<li>Add a menu linked to to the sections<\/li>\n<li>Support for CSS3 animations with jQuery fallback<\/li>\n<li>Use of anchor links (#) for each section and slides<\/li>\n<li>Support for scrolling inside each section<\/li>\n<li>Resize the sections size as well as the text when resizing the browser&#8217;s window<\/li>\n<li>Autoadjust itself to fit the current section\/slide when resizing the browser&#8217;s window<\/li>\n<li>Admit some options such as the scrolling easing, the background color of the slides, the scrolling speed, loop options, callbacks and the vertical align of the text within the sections<\/li>\n<\/ul>\n<p>And all of this being compatible with old browsers such as Internet Explorer 8, 9, Opera 12 etc which already still being used by many users nowadays.<\/p>\n<h2 class=\"wp-block-heading\" id=\"creating-a-full-scrolling-website\">Creating a full scrolling website<\/h2>\n<p>The structure is quite simple, adding a <code>section<\/code> class for each section of the site, and <code>slide<\/code> for each slide within a section:<\/p>\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\">\"fullpage\"<\/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\">\"section\"<\/span>&gt;<\/span>WHATEVER<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\">\"section\"<\/span>&gt;<\/span>WHATEVER<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\">\"section\"<\/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\">\"slide\"<\/span>&gt;<\/span>Slide 1<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\">\"slide\"<\/span>&gt;<\/span>Slide 2<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\">\"slide\"<\/span>&gt;<\/span>Slide<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\">\"slide\"<\/span>&gt;<\/span>Slide 4<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\">\"section\"<\/span>&gt;<\/span>WHATEVER<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<p>To initialise the plugin with default options, is as simple as this:<\/p>\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\">'#fullpage'<\/span>).fullpage();\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<p><a href=\"https:\/\/github.com\/alvarotrigo\/fullPage.js#who-is-using-fullpagejs\" target=\"_blank\" rel=\"noopener nofollow\">Here<\/a> you have a list of some pages using this plugin.<\/p>\n<h2 class=\"wp-block-heading\" id=\"documentation-%26-questions\">Documentation &amp; Questions<\/h2>\n<p>For more documentation about the plugin, check it at the <a href=\"https:\/\/github.com\/alvarotrigo\/fullPage.js\" target=\"_blank\" rel=\"noopener nofollow\">github repository<\/a>.<br>\nI encourage you to use <a href=\"https:\/\/github.com\/alvarotrigo\/fullPage.js\/issues?q=is%3Aopen\" target=\"_blank\" rel=\"noopener nofollow\">the issues forum<\/a> to report bugs or ask any question related with the plugin.<br>\nAlso, don&#8217;t forget <a href=\"https:\/\/github.com\/alvarotrigo\/fullPage.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<h2 class=\"wp-block-heading\" id=\"extensions\">Extensions<\/h2>\n<p>The project has been growing with the time and due to the diversity of requested features I decided to provide <a href=\"https:\/\/alvarotrigo.com\/fullPage\/extensions\/\">fullpage.js extensions<\/a> that can be added to enhance its behaviour.<\/p>\n<h2 class=\"wp-block-heading\" id=\"wordpress-theme-%2F-template\">WordPress theme \/ template<\/h2>\n<p>The guys from Themify have created what it seems like <a href=\"https:\/\/alvarotrigo.com\/fullPage\/utils\/wordpress.html\">a nice theme for wordpress<\/a>. I encourage you to make use of it if you are planning to integrate fullpage.js and wordpress.<\/p>\n<h2 class=\"wp-block-heading\" id=\"donations-admited\">Donations admited<\/h2>\n<p>If anyone is so kind to invite me for a coffee I will appreciate it a lot \ud83d\ude42<\/p>\n<p><a href=\"https:\/\/www.paypal.com\/cgi-bin\/webscr?cmd=_donations&amp;business=BEK5JQCQMED4J&amp;lc=GB&amp;item_name=fullPage%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=\"Donate!\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\"><\/a><\/p>\n<h2 class=\"wp-block-heading\" id=\"related-articles\">Related articles<\/h2>\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/create-a-slider-with-pure-CSS\/\">Create a slider with pure CSS<\/a><\/li>\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/why-not-to-use-css-scroll-snap\/\">Why not to use CSS snaps<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Nowadays is very common to find fullscreen websites as it was in the past in the age of flash, but now, with the power of HTML, CSS and Javascript.<\/p>\n","protected":false},"author":1,"featured_media":5049,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[120],"tags":[10,18,43],"class_list":["post-5050","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-javascript","tag-jquery","tag-slider"],"acf":[],"_links":{"self":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5050","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=5050"}],"version-history":[{"count":4,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5050\/revisions"}],"predecessor-version":[{"id":15492,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5050\/revisions\/15492"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media\/5049"}],"wp:attachment":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media?parent=5050"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/categories?post=5050"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/tags?post=5050"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}