WeBiker - svg

by PhilQ

HTML

<article class="tour-reviews">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="541px" height="561.26px" viewBox="0 0 541 561.26" enable-background="new 0 0 541 561.26" xml:space="preserve">
	<g id="bicycle">
		<path fill="#C4060E" stroke="#C4060E" stroke-width="3" stroke-miterlimit="10" d="M230.497,246.617h-33.443
			c-10.416,0-17.104,4.865-20.064,14.561l-7.804,26.879h181.707l7.801-20.159l-43.475-11.2c-2.229,0-3.344-1.488-3.344-4.48
			c0-3.727,1.479-5.601,4.459-5.601h86.951v21.281h-22.296l-7.803,20.159l28.982,66.081c2.229,0,4.635-0.368,7.247-1.121
			c2.594-0.735,5.382-1.487,8.362-2.239c2.227-0.735,7.8-1.121,16.72-1.121c28.235,0,52.01,10.081,71.344,30.241
			c20.066,19.425,30.098,43.313,30.098,71.681c0,28.384-10.031,52.639-30.098,72.8c-19.334,19.425-43.108,29.12-71.344,29.12
			c-24.526,0-46.089-7.455-64.656-22.4c-20.065-15.681-31.963-35.455-35.671-59.36h-42.363c-5.954,0-11.147-2.239-15.606-6.721
			L155.809,331.737l-7.804,25.761c19.317,8.225,34.174,20.912,44.59,38.08c11.88,16.433,17.837,35.104,17.837,56
			c0,27.633-10.034,51.904-30.099,72.8c-21.564,19.425-45.706,29.12-72.46,29.12c-28.25,0-52.026-9.695-71.344-29.12
			c-20.064-20.161-30.098-44.416-30.098-72.8c0-28.368,10.034-52.255,30.098-71.681c18.567-20.16,42.36-30.241,71.344-30.241
			c7.419,0,14.109,0.753,20.066,2.241l30.099-96.32c0.731-6.721,5.574-13.809,14.493-21.28c7.419-5.216,15.606-7.841,24.523-7.841
			h33.443V246.617z M122.366,370.938c-2.23-0.735-7.073-1.12-14.492-1.12c-22.294,0-41.245,7.84-56.852,23.52
			c-16.356,16.432-24.524,35.841-24.524,58.241c0,24.64,8.168,44.064,24.524,58.239c15.607,15.68,34.558,23.52,56.852,23.52
			c23.027,0,42.361-7.84,57.967-23.52c15.606-15.681,23.411-35.088,23.411-58.239c0-14.929-4.093-29.487-12.262-43.68
			c-9.667-14.175-21.564-24.255-35.673-30.241l-23.411,77.28c-1.497,4.48-4.841,6.72-10.032,6.72
			c-6.688,0-10.033-3.36-10.033-10.079c0-1.487,0.366-2.609,1.114-3.36L122.366,370.938z...

SCSS

$near-black: #252525;
$grey: #555;
$near-white: #f2f2f2;
$blue-lighter: #a8e1ff;
$blue-light: #50b9e1;
$blue: #08578c;
$blue-dark: #152a3f;
$red: #c4060e;

$tripadvisor: #00a680;

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

.tour-reviews {
	$cycler-height: 40px;
	
	font-family: Montserrat;
	position: relative;
	width: 100%;
	display: inline-block;
	padding: 30px;
	padding-bottom: $cycler-height + 10px;
	background-color: rgba(168,225,255,.9);
	overflow: hidden;
	
	svg {
		position: absolute;
		left: 100%;
		bottom: 0px;
		height: $cycler-height;
		width: auto;
	}

	.tour-reviews-wrapper {
		position: relative;
		width: 100%;
		height: auto;
		overflow: hidden;

		.tour-reviews-row {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: flex-end;
			padding-bottom: 15px;

			.tour-review {
				position: relative;
				width: 100%;
				flex: 0 0 100%;
				padding: 15px 15px 14px 15px;
				font-size: 1rem;
				background-color: #fff;
				border-radius: 14px;
				text-align: right;
				opacity: 0;

				.corner {
					display: inline-block;
					position: absolute;
					width: 29px;
					height: 29px;
					border-color: transparent;
					border-width: 0px;
					border-style: solid;
					border-top-color: #fff;
					border-top-width: 29px;
					bottom: -15px;
					left: 100%;
					border-left-width: 29px;
					border-right-width: 0px;
				}

				.tour-review-title {
					display: inline-block;
					width: 100%;
					font-size: 1.2rem;
					text-align: center;
					padding-bottom: 15px;
				}

				.tour-review-author {
					color: $blue;
					display: inline;

					.tour-review-author_name {}

					.tour-review-author_info {}
				}

				.tour-review-source {
					font-style: italic;
					color: #ccc;
					display: inline;
				}
			}
		}
	}
}

JavaScript

jQuery(document).ready(function() {
	$review_svg = jQuery('.tour-reviews svg');
	reviews_current = -1;
	nextReview();
});

var reviews_cnt = 0,
	reviews_timer,
	reviews_interval = 10000,
	reviews_current = -1,
	$review_svg,
	review_wrapper_width = 0,
	review_container_width = 0;
	
function nextReview() {
	reviews_cnt = jQuery('.tour-review').length;
	if (reviews_cnt > 0) {
		review_wrapper_width = parseInt(jQuery('.tour-reviews-wrapper').width());
		review_container_width = parseInt(jQuery('.tour-reviews').outerWidth());
		reviews_current = ((reviews_current + 1) >= reviews_cnt)? 0: (reviews_current + 1);
		var $review = jQuery('.tour-review').eq( reviews_current );
		var $review_corner = $review.find('.corner');
		
		// Set next review position
		jQuery('.tour-reviews-wrapper').scrollLeft( reviews_current * review_wrapper_width );

		// Show review
		$review.animate({
			opacity: 1
		}, 350, 'swing', function() {

			// Start cycler
			$review_svg.css('left', review_container_width + 'px').animate({'left': '-' + parseInt($review_svg.width()) + 'px'}, reviews_interval, 'linear', function(){} );
			
			// Start corner animation
			$review_corner.css({
				'left': review_wrapper_width + 'px',
				'opacity': 1,
				'border-left-width': '29px',
				'border-right-width': '0px'
			}).animate({
				'left': '-29px',
				'border-left-width': '0px',
				'border-right-width': '29px'
			}, reviews_interval, 'linear', function() {
				
				// Hide corner
				$review_corner.css({ opacity: 0 });

				// Hide review
				$review.animate({
					opacity: 0
				}, 350, 'swing', function() {
					
					// Animate next review
					nextReview();
			
				});

			});
		});
	}
}