Quote style

by PhilQ

HTML

<div id="mod_testimonials">
	<blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui.<cite>Philip van Heemstra<span>Eigenaar van Heemstra Webdesign</span></cite></blockquote>
	<blockquote>Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui.<cite>Philip van Heemstra2<span>Eigenaar van Heemstra Webdesign</span></cite></blockquote>
	<blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum.<cite>Philip van Heemstra3<span>Eigenaar van Heemstra Webdesign</span></cite></blockquote>
</div>

SCSS

@import url('https://fonts.googleapis.com/css?family=Alegreya:400,400i,500i,700,700i|Josefin+Sans:300,300i,700,700i|Josefin+Slab:300,300i,700,700i');

html, body {
    padding: 0px;
    margin: 0px;
}

body {
	background: #eee;

	*, :before, :after {
		margin: 0px;
		padding: 0px;
		box-sizing: border-box;
	}
}

#mod_testimonials {
	width: 100%;
	max-width: 650px;
	margin: 0px auto;
	display: block;
	position: relative;
	pointer-events: none;
	background: rgba(red, 0.3);

	blockquote {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: inline-block;
		width: 100%;
		quotes: "\201C" "\201E";
		text-align: justify;
		padding: 20px 25px;
		margin: 0px;
		font-weight: 500;
		font-style: italic;
		font-family: 'Alegreya', cursive;
		font-size: 150%;
		line-height: 1.4;
		
		opacity: 0;
		transition: opacity 1s ease;
		
		&.on {
			opacity: 1;
		}

		&::first-letter {
			padding-left: 40px;
		}

		&::before, &::after {
			font-size: 130px;
			color: #cccccc;
			font-family: 'Alegreya', 'Vollkorn', serif;
		}
		&::before {
			position: absolute;
			line-height: 0px;
			content: open-quote;
			margin: 25px 0 0 -22px;
		}
		&::after {
			display: none;
			z-index: -1;
			position: absolute;
			right: 0px;
			bottom: -20px;
			content: close-quote;
		}

		cite {
			float: right;
			clear: both;
			padding: 35px 25px 5px 25px;
			color: #666666;
			font-style: normal;
			font-weight: normal;
			font-family: 'Josefin Sans', serif;
			font-size: 85%;
			text-transform: uppercase;
			text-align: right;

			&::before {
				content: '\2014';
				margin-right: 5px;
			}

			span {
				display: block;
				font-size: 60%;
				font-style: italic;
				font-weight: normal;
			}
		}
	}
}

JavaScript

Array.prototype.min = function () {
	return this.reduce(function(a, b) { return Math.min(a, b); })
}
Array.prototype.max = function () {
	return this.reduce(function(a, b) { return Math.max(a, b); })
}

var mod_testimonials = [];

function mod_testimonials_start( el, interval ) {
	mod_testimonials[0] = {
		'el': $( el ),
		'timer': null,
		'interval': interval,
	}
	mod_testimonials[0]['timer'] = setInterval(function(){
		var items = mod_testimonials[0]['el'].find('blockquote');
		if (0 < items.length) {
			var cur = items.filter('.on');
			if (0 == cur.length) {
				cur = items.last();
			}
			var next = cur.next();
			if (0 == next.length) {
				next = items.first();
			}

			cur.removeClass('on');
			next.addClass('on');
			if ( cur.index() == next.index() ) {
				clearInterval( mod_testimonials[0]['timer'] );
			}
		}
	}, mod_testimonials[0]['interval']);
}

$(document).ready(function(){
	$('#mod_testimonials').height(
		$('#mod_testimonials').children().map(function() {
			return parseInt( $( this ).outerHeight() );
		}).get().max()
	).children().first().addClass('on');
	mod_testimonials_start( $('#mod_testimonials'), 10000 );
	
	$( window ).on('resize', function(){
		$('#mod_testimonials').height(
			$('#mod_testimonials').children().map(function() {
				return parseInt( $( this ).outerHeight() );
			}).get().max()
		);
	});
});