Scrolling is a popular and natural way to interact with content on the web. It is the platform's native means of providing access to more information than is visible on the screen at once, becoming especially vital on mobile platforms with limited screen real estate.
Scrolling is a popular and natural way to interact with content on the web. It is the platform's native means of providing access to more information than is visible on the screen at once, becoming especially vital on mobile platforms with limited screen real estate.
CSS ScrollingScrolling's main drawback is its lack of precision. Rarely does a scroll end up aligned to a paragraph or sentence. This is even more pronounced for paginated or itemised content with meaningful boundaries when the scroll finishes at the middle of the page or image leaving it partially visible. These use cases benefit from a well-controlled scrolling experience.
Web developers have long relied on JavaScript based solutions which have their own drawbacks and are not efficient enough for mobile devices.
CSS Scroll Snap allows the browser to work the magic rather using Javascript which causes drain on mobile device batteries.
A scroller like this is very lightweight and can display a lot of images without effecting page download time.
The scroller has a flex layout with scroll-snap on the X-axis.
The item container has two column grid layout with an image with alt text in an auto column and a heading and text in the right hand column.
Switch
On screen widths below the break point the items span both columns and the text is positioned in row two below the image.
Links
The images can be configured as links and the link icon can appear on hover when viewed on computers.
Image Size
The images are given a maximum width setting so the image file with should not exceed this value. The images in the demo are 480px wide with a file size of less than 50KB.
Lazy Loading
Any group, grid width images or a slider must have a lazy loading function to prevent excess page download time. In the case of this scroller only the first 3 or 4 images download with the page content.
Scrollbar
The horizontal scrollbar has controls for setting the scrollbar height and color when viewed in webkit browsers - Safari and Chrome.
One of the important goals when designing for mobile phones is to keep the visible content to a mimimum. Items like a sidebar and popup windows can be used to add extra items without cluttering up the page and creating confusion.
The ThemeKit M1 Sidebar widget can slide in from the left or right by clicking/tapping the action tab.
Action Tab
The two way arrow icon is an SVG and there are controls for color, background color and opacity, border radius and distance from the sidebar.
Sidebar
The sidebar can be viewed while editing. When the number of items exceeds the devic's viewport height the overflow scroll.
Sidebar Items
Each item has options for an image which can be configured as a link with link icon, a heading, ptional span and text.
If you expect visitors to contact by phone the mobile phone call must be easily visible on each page.
The ThemeKit M1 Phone Tab widget has an SVG "contact" icon with controls to adjust its color, hover color, background color and opacity and the padding. Adjusting the padding changes the relative size of the icon.
Position
The link can be positioned top or bottom and left center or right with controls to adjust its position on the X and the Y-axis.
There is a control for adjusting its z-index to bring it to the front of other items on the page.
NOTE: To hide the phone function on other devices check the box and select "phone landscape" from the Break Point dropdown.
The images were sized to 240px square before importing into EverWeb and have a lazy load option.
Images can be a link and show a link icon for mobile device users.
The sidebar can be set to slide in from the left or right.
The width is adjustable but should be no more than 270px max. The height is infinite and overflow on the Y-axis scrolls.
The optional spans have their own controls for font size and color.
The optional spans have their own controls for font size and color.
