Tiggles ツ
11/27/2018 - 10:51 PM

Matrix Marquee

Create a scroll marquee and detail how fast (in seconds) to scroll.

example: http://cloud.madebyspeak.com/1b021317e32b https://www.sgis.org/admission

code.liquid
content_copyfile_download
<div class="ticker-section bg-primary relative w-100 pa3">
  <div class="ticker-wrap">
    <div class="ticker">
        {% assign sorted = List.Items | OrderBy:'FieldValues.CollegeName','asc' %}  
        {% for Item in sorted -%}
            <div class="ticker_item"><h6>{{ Item.FieldValues.CollegeName }}</h6></div>
        {% endfor -%}
    </div>
  </div>
</div>



<!--and this bit will go into the head-->

<style>
{% assign sorted = List.Items | OrderBy:'FieldValues.CollegeName','asc' %}  
    {% for Item in sorted -%}
.ticker-wrap .ticker {
    -webkit-animation-duration: {{ Item.FieldValues.ScrollDuration}}s!important;
    animation-duration: {{ Item.FieldValues.ScrollDuration }}s!important;
}

{% endfor -%}
</style>

<!--these are the item fields-->

Single Line 
Number