JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class="block">
	<div class="marquee">
		<span>2016 / Pokushal / Privet Wassia! Privet Wassia! Privet Wassia!</span>
	</div>
	<img class='image' src="https://www.wired.com/wp-content/uploads/2014/07/brain1.jpg" alt="">
</div>

CSS

@-webkit-keyframes scroll {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    100% {
        -webkit-transform: translate(-100%, 0);
        transform: translate(-100%, 0)
    }
}

html, body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
	padding: 0;
	background-color: white;
}

.block {
	position: absolute;
	top: 100px;
	left: 100px;
	/* width: 380px; */
	/* height: 240px; */
	/* background-color: black; */
	/* color: white; */
	cursor: default;
}

.block img {
	display: block;
	max-width: 600px;
}

.marquee {
	/* margin-top: -60px; */
	white-space: nowrap;
	width: 60%;
	position: absoulte;
	overflow: hidden;
	color: black;
}

.marquee span {
    display: inline-block;
    padding-left: 100%;
    -webkit-animation: scroll 10s infinite linear;
}

JavaScript

var img = [
	'https://www.wired.com/wp-content/uploads/2014/07/brain1.jpg',
	'http://kindersay.com/files/images/chicken.png',
	'https://www.takemefishing.org/tmf/assets/images/fish/bigmouth-buffalo-464x170.png',
	'http://align4profit.com/wp-content/uploads/2015/06/octopus_red-on-white-300x274.jpg',
	'https://filmfork-cdn.s3.amazonaws.com/content/Godzilla%20-%209.gif'
]

$('body').on('click', function(e) {
	$('.clone').remove();
	
	var $block = $('.block');
	$block.css({'left': e.pageX, 'top': e.pageY});
	
	if (e.target.className != 'image') {
		var rand = Math.floor(Math.random() * img.length);
		$('img').attr('src', img[rand]);
	}
	
	
	var offset_right = $block.offset().left + $block.width();
	var offset_bottom = $block.offset().top + $block.height();	
	
	if (offset_right > $('body').width() || offset_bottom > $('body').height()) {
		
		var p_l = offset_right > $('body').width() ? -$('body').width() - $block.width() + offset_right : e.pageX;
		var p_t = offset_bottom > $('body').height() ? -$('body').height() - $block.height() + offset_bottom : e.pageY;
		
		var $clone = $block.clone().addClass('clone');
		
		$clone.css({'top': p_t, 'left': p_l }).appendTo('body');
	}
});