Customer File Uploads

Customer File Uploads

How To Create Full Section Scrolling With Joomla Website Builder Gridbox

How To Create Full Section Scrolling With Joomla Website Builder Gridbox

Following the trends of the time, Full Section Scrolling it's an awesome and modern effect. In today's “Trick & Tip” we will show you how to add an incredibly beautiful Full Section Scrolling by single mouse scroll.

Attention!

This feature is already available in the Gridbox.
All you need is just enable "Auto Scroll" option in the plugin "One Page Menu".

The main idea of the Full Section Scrolling effect that you can navigate between Gridbox sections by single mouse scroll, keyboard arrows and single touch on mobile devices.

View Demo Theme

Joomla Website Builder Gridbox already includes almost everything what you need to create a stunning Joomla website with a Full Section Scrolling Animation:

  • Full-Screen sections;
  • Dot Navigation (One Page Menu Plugin).

All you need to do is to add Javascript code and a little bit of CSS. Let's get started!

Step 1. Configure Sections

Open Section settings, in the tab "General" select "Full Screen"
Scroll down to field "Class Suffix". Paste this CSS class: ba-section-scrolling

Step 2. JavaSript Code

Open Gridbox JavaScript Editor.

Javascript CSS Editor

Copy JS code below and paste into the Gridbox JavaScript editor.

jQuery(document).on('ready', function(){
    var scrolling = false,
        delta = 1,
        $window = jQuery(window),
        startCoords = {},
        endCoords = {},
        touch = {
            passive: false
        },
        sections = jQuery('.ba-section-scrolling');

    function compileValue(item){
            var value = item.offset().top,
                header = $g('header.header'),
                comp = header[0] ? getComputedStyle(header[0]) : {},
                top = window.pageYOffset,
                stickies = $g('.ba-sticky-header'),
                sticky = 0;
            if (item.closest('.ba-wrapper').parent().hasClass('header')) {
                value = 0;
            } else {
                stickies.each(function(){
                    if (this.offsetHeight > 0) {
                        let section = this.querySelector('.ba-sticky-header > .ba-section'),
                            obj = app.items[section.id],
                            offset = obj.desktop.offset;
                        if (app.view != 'desktop') {
                            for (var ind in breakpoints) {
                                if (!obj[ind]) {
                                    obj[ind] = {};
                                }
                                offset = obj[ind].offset ? obj[ind].offset : offset;
                                if (ind == app.view) {
                                    break;
                                }
                            }
                        }
                        if ((!obj.scrollup && offset < value) || (obj.scrollup && offset < value && value < top)) {
                            sticky = this.offsetHeight > sticky ? this.offsetHeight : sticky;
                        }
                    }
                });
                if ((!header.hasClass('sidebar-menu') || (app.view != 'desktop' && app.view != 'laptop')) && comp.position == 'fixed') {
                    sticky = header[0].offsetHeight > sticky ? header[0].offsetHeight : sticky;
                    if (header.find('.resizing-header').length > 0) {
                        var resizingSection = getComputedStyle(header.find('.resizing-header')[0]);
                        value += resizingSection.paddingTop.replace('px', '') * 1;
                        value += resizingSection.paddingBottom.replace('px', '') * 1;
                    }
                }
                if (value != 0) {
                    value -= sticky;
                }
            }

            return value;
        }
 
    function animateScroll()
    {
        if (typeof(onePageScroll) == 'undefined' || typeof(onePageScroll) != 'undefined' && onePageScroll) {
            var scroll = $window.scrollTop(),
                index = 0;
            sections.each(function(ind){
                var value = compileValue(jQuery(this));
                console.info(Math.floor(value), Math.floor(scroll))
                if (Math.floor(value) == Math.floor(scroll)) {
                    index = ind + (-1 * delta);
                    return false;
                }
            });
            if (index >= 0 && index < sections.length) {
                scrolling = true;
                var value =  compileValue(jQuery(sections[index]));
                jQuery('html, body').stop().animate({
                    scrollTop: value
                }, 1000, function(){
                    setTimeout(function(){
                        scrolling = false;
                    }, 200);
                });
            }
        }
    }
    window.addEventListener('wheel', function(){
        event.preventDefault();
        var value = event.wheelDelta || -event.deltaY || -event.detail;
        delta = Math.max(-1, Math.min(1, value));
        if (scrolling) {
            return false;
        }
        animateScroll();
    }, {passive: false});
    $window.on('keydown', function(event){
        var flag = false;
        if (flag = event.keyCode == 38 || event.keyCode == 33) {
            delta = 1;
        } else if (flag = event.keyCode == 40 || event.keyCode == 34) {
            delta = -1;
        }
        if (flag) {
            event.preventDefault();
            if (!scrolling) {
                animateScroll();
            }
        }
    });
});

Step 3. CSS Code

And the final step. Here we will add CSS code to hide the page scrollbar. Open Gridbox CSS Editor.

Gridbox CSS Editor

Copy CSS code below and paste into the Gridbox CSS editor

body.page {
    overflow-y: hidden;
}

Download Demo theme

If you have any questions, do not hesitate to write in the comments below, we'll help you. Let's build beautiful websites with Joomla Website Builder Gridbox.

Win a Balbooa BRO Bundle!

Don’t lose your chance to win a BRO Bundle and get 1-year access to all Balbooa PRO Extensions! Take part in a Gridbox Showcase Contest!