Values Scroller

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-values-scroller{
    padding: 3em 0;
    
    @include bp($lg){
        padding: 6em 0;
    }
    .heading-row{
        align-items: center;
        margin-bottom: rem-calc(32);
        @include bp($lg){
            margin-bottom: rem-calc(64);
        }
    }
    
    .heading{
        font-size: rem-calc(20);
        line-height: rem-calc(28);
        letter-spacing: 0.02em;
        font-weight: 400;
        margin-bottom: 0;

        @include bp($lg){
            font-size: rem-calc(32);
            line-height: rem-calc(56);            
        }
    }

    .values-scroller-text{
        width: 100%;
        overflow: hidden;

        .vs-item{
            font-weight: 400;
            font-size: rem-calc(24);
            line-height: rem-calc(32);
            text-decoration: none;
            letter-spacing: 0.05em;
            color: rgba(0, 0, 0, 0.4);
            margin-right: rem-calc(24);

            @include bp($md){
                font-size: rem-calc(32);
                line-height: rem-calc(56);
                margin-right: rem-calc(124);
            }

            @include bp($lg){
                font-size: rem-calc(64);
                line-height: rem-calc(88);
            }

            &:hover{
                color: $black;
            }
        }
    }
    
    .js-marquee-wrapper{
        &:after{
            content: '';
            clear: both;
            display: block;
        }
    }

    &.bg--primary{
        .heading{
            color: $white;
        }
        .values-scroller-text{
            .vs-item{
                color: rgba(255, 255, 255, 0.4);
                &:hover{
                    color: $white;
                }
            }
        }
    }
}

import 'jquery.marquee';

class ValuesScroller {
	/**
	 * Create and initialise objects of this class
	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
	 * @param {object} block
	 */
	constructor() {
		this.blocks = document.querySelectorAll('.block-values-scroller');
        this.init();
	}

	init() {
        var $scroller = $('.block-values-scroller').find('.values-scroller-text');
		$scroller.marquee({
            gap: 50,
            delayBeforeStart: 0,
            direction: 'left',
            duplicated: true,
            pauseOnHover: true
        });
    }
}

new ValuesScroller();