Documentation
Barisco Helpcenter
Video Tutorial – How to use Interactions
Using free background patterns in Barisco
How to prepare designs in Photoshop for Barisco
Video Tutorial – Explanation of Barisco’s editor user interface
Video Tutorial – How to use the scroller
Video Tutorial – How to create overlays or pop-ups
Video Tutorial – How to create groups
Video Tutorial – How to use the Position & Size panel
Free interface templates in Barisco
Different interfaces for different platforms.
What features are not supported in Internet Explorer?
How can I optimize the load time of my project?
Why do fonts appear differently across different browsers and de
How to add your own domain name?
Does Barisco support Android?
How to duplicate pages to a different edition
Video Tutorial – Interfaces 2/2 – How to design a custom interfa
Video Tutorial – Interfaces 1/2 – Using default interfaces
Release 2.0.0.0
Optimize your publication for SEO
Direct Share to Social Media Channels
Embed your Project
DOOH (Narrowcasting)
Release 2.1
Improved Group settings for desktop and mobile views using one U
Improvements Release 2.2.5
How to create pixel perfect mobile web pages without coding?
Making a mobile ready site in 5 steps:
Reset your Profile
Animate Layers in the Scroll when Visible
Use now animated GIF in Barisco.
Integrating YouTube video’s in your Barisco projects is easy!
How to create a landing page or vertical scrolls in a page.
Release 2.0.1.0
Implement Youtube original player (control)
New! Dimensional scrolling features for landing pages micro site
UX improvements
Orientation options on publication settings
New Features for creating templates in the restricted editing
Video Tutorial – How to use the scroller
Intro
Welcome to this Barisco tutorial! In this tutorial we are going to have a look at the Scroller in Barisco.
The Scroller in Barisco has similar behavior to that of a group. But scroller can be used to create an area that will have scrolling features.
This way you will be able to add a lot of extra content in your pages, without having to divide the content over different pages or overlays.
Tutorial
Adding a Scroller to your page is easy. To add a Scroller to your page, all you need to do is press the Scroller button on the Toolbar and the Scroller will be added to the page. Let’s add a Scroller to the page and see how we can use it.
As you can see the Scroller has been added to the page. On the right side and on the bottom of the Scroller you can see scrollbars.
Like I mentioned before, the Scroller is quite similar to a Group and mostly behaves the same way. This means that you will be able to change the position and size just like you would do for a Group.
Below the Position & Size section at the Property Panel, you will find the Scroller section. The Scroller section contains all the unique features that can be used for the Scroller.
The first two features allow you to enable the vertical and horizontal scrollbars. This can be used in case you absolutely do not want a scrollbar on either the vertical or horizontal axis. Please note that if the contents of the Scroller are smaller than the scrollable area; the scroller will not display any scrollbars.
The Thumb and Track features allow you to change the colors of the scrollbars. So for example: if I change the color of the Thumb to blue. You can see that the color of the Thumb on the scrollbar have changed to blue. To change the background of the Scroller, we can use the Background feature on the Style section of the Property Panel.
So let’s set the Background to light grey. By using these features, you will be able to change the appearance of the Scroller to make it match the designs or color scheme of your project.
To test our Scroller we need to add some contents. Let’s open the Scroller and add some images to our Scroller, so that we see how it looks like when the Scroller has some contents to scroll.
Now that we have opened the Scroller, I’m going to drag these images from the library onto the Stage Area.
Now that this has been done, let’s open the page preview and have a look at our Scroller. As you can see we have vertical and horizontal scrollbars. This is because the images exceed both the width and height of the Scroller’s scrollable area. When I scroll down I’m able to see the 3 images on the left. And when I scroll to the right and then scroll up and down I’m also able to see the 3 images on the right.
Now if I close the page preview and disable the horizontal scrollbar. And then go back to the page preview; you will see that it is no longer possible for me to scroll horizontally.
Next we’re going to use the Layout features to organize our images into a list. To do this you need to go to the Layout section on the Property Panel. Here we will be able to choose from Normal, Vertical and Horizontal. Since we have already disabled the horizontal scrollbar; let’s go and use the vertical layout. As you can see the images in the scroller have been organized into a list of images. You will be able to do the same with any other type of object.
So if you add a Text to the Scroller and then enable the vertical layout, the text will also be organized in the same way. Let’s set the spacing to 10 pixels. As you can see a space has appear between the images. If you want to find out more about Layouts, please refer to the documentation or watch the Groups tutorial.