Stackla vertical Scroll wall Event screen

CSS.css

/**
=========================
global styles
=========================
*/

body {
}

.scrollWall-stage {
    padding-left: 0 !important;
}

.scrollWall-row[data-row-index="0"] {
    padding-left: 10px;
}

.scrollWall-row:last-child {
    padding-right: 10px;
}

.scrollWall-stage .tile {
    overflow: hidden;
    margin-bottom: 0;
}

.stage-bg {
    width:  256px;
    height: 1024px;
    position: absolute;
    left: 20px;
    top: 0;
    background-repeat: no-repeat;
}

.stage-bg.bg-2 {
    left: 277px;
}







/**
* =========================
* qdr
* =========================
*/
.qdr-screen .tile .tile__user-info {
    position: static;
    padding: 0 0 10px;
}

.qdr-screen .tile-image {
    background-position: center top;
}

.qdr-screen .source i.fa {
    color: #fff;
}

.qdr-screen .tile .tile__user-info .user {
    color: #fff;
}

.qdr-screen .tile__twitter-txt,
.qdr-screen .tile-instagram-message {
    color: #000;
}






/**
====================================================================================================
custom styles
====================================================================================================
*/




* {
    box-sizing: border-box;
}

body, .qdrx-screen {
    background-color: #e3e1e3 !important;
}




.tile-image-wrapper:before, .tile-video-wrapper:before {
    border-left: initial;
    border-top: initial;
    border-bottom: initial;
}

.tile-image-wrapper:after, .tile-video-wrapper:after {
    border-left: initial;
    border-top: initial;
    border-bottom: initial;
}

.tile {
    display: block;
    width: 100%;
    margin: 0 !important;
    margin-right: 0 !important;
    min-width: 0 !important;
    height: initial !important;
    background: transparent;
}

.tile_content {
    margin: 8px;
    background: #bdbbbd;
}

.tile-user {
    position: relative;
    display: table;
    width: 100%;
    height: 50px;
    vertical-align: middle;
    top: 0 !important;
    padding: 10px;
}

.avatar {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    width: 40px;
}

.avatar img {
    width: 80%;
    margin: 0 auto;
    border-radius: 50px;
    overflow: hidden;
}

.user {
    position: relative;
    display: inline-block;
    display: table-cell;
    vertical-align: middle;
    font-size: 16px;
    padding: 0 10px;
}

.source {
    position: relative;
    display: inline-block;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 30px;
}

.tile-img {
    border: thin solid #bdbbbd;
}

.tile-caption {
    padding: 20px;
    font-size: 14px;
    line-height: 1.5;
    min-height: 80px;
}

.tile-caption:before, .tile-caption:after {
    font-size: 172px;
    line-height: 1;
    font-weight: bold;
    opacity: 0.07;
    margin-top: -30px;
}

.tile-caption:after {
    bottom: -90px !important;
}



.scrollWall-group {
    float: none;
}

.col-bg,
.video-holder {
    width: 256px;
    height: 100%;
    position: fixed;
    z-index: 99999;
    left: 277px;
}

.col-bg.first,
.video-holder.first {
    left: 20px;
}

.col-bg {
    z-index: -1;
    background-size: contain;
    background-repeat: no-repeat;
}

.video-holder video {
    width: 100%;
    height: 100%;
    background: #000;
}




@keyframes scroll {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(0, -50%, 0);
    }
}

.scrollWall-row {
   animation-name: none;
   position: relative;
}

.scrollWall-row.is-animating {
    animation-name: scroll;
    animation-duration: 90s; // Will be overwritten by JS
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    width:19.9% !important;
    float:left;
}

.scrollWall-row:last-child {
    margin-left: 1px;
}

.scrollWall-wrapper {
    width: 100% !important;
}










.performance .stage-bg {
    background-image: none !important;
}
.qdr-screen .stage-bg {
    background-image: none !important;
}

.qdr-screen .tile-image-wrapper {
    background-image: none !important;
}

.qdr-screen i.fa.fa-instagram {
    /*background-image: none !important;*/
}
.technology-screen .stage-bg {
    background-image: none !important;
}

.technology-screen .tile-image-wrapper {
    background-image: none !important;
}
.style-screen .stage-bg {
    background-image: none !important;
}

.style-screen .tile-image-wrapper {
    background-image: none !important;
}

.style-screen i.fa.fa-instagram {
    /*background-image: none !important;*/
}

 .general-screen .col-bg {
    z-index: -1;
    background-image: none !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 256px;
    left: 277px;
}
.general-screen .stage-bg {
    background-image: none !important;
}

.general-screen .tile-image-wrapper {
    background-image: none !important;
}

JS.js

$(function () {
	$('body').addClass("qdr-screen");	
	$('body').prepend('<div class="stage-bg bg-1"></div><div class="stage-bg bg-2"></div>');
});

templatet.html

<div class="tile {{class_names}}" id="{{id}}">
    {{#is_vine}}
        <div class="tile-video-wrapper">
            <div class="tile-video">
                <iframe class="vine-embed" src="{{embed_url}}/embed/simple" allowTransparency="true"></iframe>
                <scr{{!}}ipt async src="//platform.vine.co/static/scripts/embed.js"></scr{{!}}ipt>
            </div>
        </div>
    {{/is_vine}}
	{{^twitter_id}}
    
    {{#has_image}}
        <div class="tile_content">
            {{#is_gif_video}}
                <div class="tile-img">
                    <video poster="{{image}}" {{#auto_play_video}}oncanplay="this.play()"{{/auto_play_video}} loop muted name="media" class="tile-animated-gif">
                        {{#gif_sources}}
                            <source src="{{src}}" type="{{type}}">
                        {{/gif_sources}}
                    </video>
                </div>
            {{/is_gif_video}}
            {{^is_gif_video}}
				<div class="tile-user">
					<div class="avatar"><img src="{{avatar}}" height="25" width="25" /></div>
					<div class="user">{{user}}</div>
					<div class="source"><i class="fa fa-{{via_source}}"></i></div>
				</div>
                <div class="tile-img"><img src="{{image}}" /></div>
            {{/is_gif_video}}
            {{#instagram_id}}
                {{#message}}
                    <div class="tile-caption">{{{ message }}}</div>
                {{/message}}
            {{/instagram_id}}
        </div>
    {{/has_image}}

	{{/twitter_id}}

	{{#twitter_id}}
	<div class="tile_content">
		<div class="tile-user">
			<div class="avatar"><img src="{{avatar}}" height="25" width="25" /></div>
			<div class="user">{{user}}</div>
			<div class="source"><i class="fa fa-{{via_source}}"></i></div>
		</div>
		{{#has_image}}
			<div class="tile-img"><img src="{{image}}" /></div>
		{{/has_image}}

        {{#message}}
            <div class="tile-caption">{{{ message }}}</div>
        {{/message}}

	</div>
	{{/twitter_id}}

    {{#is_debug}}
        <div class="tile-serial-number">{{serial_number}}</div>
    {{/is_debug}}
</div>
<script src="https://www.gstatic.com/firebasejs/3.6.0/firebase.js"></script>