TABLE OF CONTENTS

• Example Fetch Block Scrolling CSS:
• Understanding these Custom CSS Rules:
  • Rule 1:
  • Rule 2:
  • Rule 3:
• Optional Settings:
  • Stop Scrolling When Mouse Cursor is Over Contents:
  • Changing to a Horizontal Scroll or Ticker Effect:

For DAKboard blocks that do not offer a built-in scrolling feature, customers may request such a feature be added. While awaiting acceptance and development of a polished built-in method, there is still a way to add scrolling to a block using our Custom CSS feature!  A few things to keep in mind when using this approach:

• Intermediate-to-advanced technical knowledge may be required to tweak the examples shown in this article
• This approach may not work well with more complex blocks
• Dynamic content (such as can come in from Fetch blocks) that varies widely in size may be challenging to fine-tune

To request a scrolling feature on a specific block, please review the open Discussions for the topic, and add your use case to it, or open your Discussion if you are unable to find one already underway.

To gain more familiarity with our Custom CSS feature, please visit the article Applying Custom Styles to Screens.

To add scrolling to a basic block, login to DAKboard, edit a Screen, and identify the block to add scrolling to using the methods learned from the Applying Custom Styles to Screens article.

Example Fetch Block Scrolling CSS:

To make it easier to code and provide specificity, the example block here has been given the name My Scrolling Fetch Block.  It has been set up with a URL that will pull in some text to scroll into the second of the fetched values.  Here is an example of what the block will look like, before, and then after adding the scrolling effect:

Before

(Motion-blurred to show scrolling region)

After

For reference, the block settings are:

The Custom CSS this block uses is as follows:

.block--MyScrollingFetchBlock .json-data:nth-child(2) {
   overflow: hidden;
   height: 15em;
}


@keyframes scroll-vert-marquee-1 {
   0% {transform: translateY(0%);}
  10% {transform: translateY(0%);}
  40% {transform: translateY(-100%);}
  60% {transform: translateY(-100%);}
  90% {transform: translateY(0%);}
 100% {transform: translateY(0%);}
}


.block--MyScrollingFetchBlock .json-data:nth-child(2) .json-data-value {
  animation-name: scroll-vert-marquee-1;
  animation-duration: 8.5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

To add this code to a Screen, the Add Custom CSS Rules option for Predefined Screens is located under the Settings & Defaults tab.  For Custom Screens, click the Styles button in the upper-left to open the drop-down and find the option there.

The values to change for fine-tuning the scrolling:

• Adjusting the speed:
  • Change the number of seconds (8.5) on the line for animation-duration: 8.5s;

• Adjusting the scrollable area:
  • Change the 15em on the line for height: 15em
  • Remove the line for height: 15em altogether to use up the entire space allotted to the block

Understanding these Custom CSS Rules:

Rule 1:

• The CSS Selector .block--MyScrollingFetchBlock .json-data:nth-child(2) targets the content for a block that has been named My Scrolling Fetch Block, then inside of that, it targets the second container that has a class of json-data

• Since we only want to see the viewable portion of that json-data item, we hide content that falls outside of that area with the overflow declaration.

• (Optionally) setting a height will constrain the content to that size, otherwise, long content will stretch too far, and shorter content will not take up the same amount of space.

Rule 2:

• The scrolling effect, in this case, is generated using an animation effect.  A common technique for animations is to denote the steps where (or when in the animation timeline) important things happen and then let the computations determine the transition between the steps.  This is known as keyframing.

• This rule defines the keyframe points in the animation.  The animation will begin with everything as-is when it initially renders the block.  It remains in that state for a short period and then starts moving until it has vertically scrolled past the full height of the content, then stopping for a short period.  And finally, it scrolls back to the original state in the same manner, and the whole process repeats.

Rule 3:

• This rule targets the json-data-value under the json-data container and ties the earlier two rules together by applying the keyframes and other animation characteristics to the content.

• It essentially tells the Screen to use the earlier set of keyframes (scroll-vert-marquee-1) to loop an animation forever and have it run through a single course in 8 and a half seconds, in a linear (even and smooth) fashion.

Optional Settings:

Stop Scrolling When Mouse Cursor is Over Contents:

For those who use their Screens more interactively, we can add the following Custom CSS to have the scrolling effect by moving the mouse cursor into the scrolled area:

.block--MyScrollingFetchBlock .json-data:nth-child(2) .json-data-value:hover {
  animation-play-state: paused;
}

@keyframes scroll-horiz-marquee-1 {
   0% {transform: translateX(-105%);}
 100% {transform: translateX(105%);}
}