Skip to content

MultiScroll

This section refers to the following section of the theme admin panel: Stores > Configuration > MageSpark > MultiScroll.

HomePage MultiScroll

Multiscroll Extension Create split pages with two vertical scrolling panels. Compatible with mobile phones and devices and old browsers such as IE 8.

Enable Set to Yes for enabling multiscrolling.

Display Navigation Set to Yes to display navigation.

Select Block Select the cms block that include multiscroll html.

For eg. Block MageSpark FullPageScroll include the following HTML

<div id="myContainer">
                <div id="left-side" class="ms-left">
                    <div class="ms-section section1" id="section1-left">
                        <div style="background-image: url('{{media url=wysiwyg/multi-scroll-page/1_left.jpg}}') ; background-repeat: no-repeat; background-size: cover;background-position: center;width: 100%;height: 100%;position: absolute;left: 0;right: 0;top: 0;bottom: 0;"></div>
                        <div class="intro">
                            <h1>Responsive Expand</h1>
                            <p>Turn auto scrolling off and expand each side into<br />a full-width section</p>
                            <div class="button" id="download">
                                <a href="https://gum.co/multiscrollResponsiveExpand" class="button-purchase">
                                I want it!
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="ms-section section2" id="section2-left">
                        <div style="background-image: url('{{media url=wysiwyg/multi-scroll-page/2_left.jpg}}') ; background-repeat: no-repeat; background-size: cover;background-position: center;width: 100%;height: 100%;position: absolute;left: 0;right: 0;top: 0;bottom: 0;"></div>
                         <div class="intro" style="position: relative;color: rgba(0, 0, 0, 0.6);">
                            <h2 style="color: #a45959;">Mobile first approach</h2>
                            <p>Provide a great experience for small screen devices!<br />Easy for us, easy for them!</p>
                        </div>
                        <div class="intro" style="position: relative;color: rgba(0, 0, 0, 0.6);">
                            <h2 style="color: #a45959;">Totally configurable!</h2>
                            <p>Define the order of left and right sides and their visibility on responsive mode.</p>
                        </div>
                    </div>
                    <div class="ms-section section3" id="section3-left">
                        <div style="background-image: url('{{media url=wysiwyg/multi-scroll-page/3_left.jpg}}') ; background-repeat: no-repeat; background-size: cover;background-position: center;width: 100%;height: 100%;position: absolute;left: 0;right: 0;top: 0;bottom: 0;"></div>
                    </div>
                </div>
                <div id="right-side" class="ms-right">
                    <div class="ms-section section1" id="section1-right">
                        <div style="background-image: url('{{media url=wysiwyg/multi-scroll-page/1_right.jpg}}');background-repeat: no-repeat; background-size: cover;background-position: center;width: 100%;height: 100%;position: absolute;left: 0;right: 0;top: 0;bottom: 0;"></div>
                        <div class="intro">
                            <h1>Responsive Expand</h1>
                            <p>Turn auto scrolling off and expand each side into<br />a full-width section</p>

                            <div class="button" id="download">
                                <a href="https://gum.co/multiscrollResponsiveExpand" class="button-purchase">
                                I want it!
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="ms-section section2" id="section2-right">
                        <div style="background-image: url('{{media url=wysiwyg/multi-scroll-page/2_right.jpg}}');background-repeat: no-repeat; background-size: cover;background-position: center;width: 100%;height: 100%;position: absolute;left: 0;right: 0;top: 0;bottom: 0;"></div>
                    </div>
                    <div class="ms-section section3" id="section3-right">
                        <div style="background-image: url('{{media url=wysiwyg/multi-scroll-page/3_right.jpg}}');background-repeat: no-repeat; background-size: cover;background-position: center;width: 100%;height: 100%;position: absolute;left: 0;right: 0;top: 0;bottom: 0;"></div>
                        <div class="intro" style="position: relative;color: rgba(0, 0, 0, 0.6);">
                            <h2 style="color: rgba(0, 0, 0, 0.8);">30 days guarrantee</h2>
                            <p>30 days money back guarratee if no domain was activated.</p>
                        </div>
                    </div>
                </div>
            </div>

screenshot