cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              -var baseURL = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/'

-var info = [ {city: 'Venice', country: 'Italy', population: '260,060', founded: '697', image: baseURL + 'venice.jpg', emblem: baseURL + 'italian-emblem.svg'}, {city: 'Paris', country: 'France', population: '2.2 Million', founded: '~250BC', image: baseURL + 'paris.jpg', emblem: baseURL + 'french-emblem.svg'}, {city: 'Salzburg', country: 'Austria', population: '145,871', founded: '1622', image: baseURL + 'salzburg.jpg', emblem: baseURL + 'austrian-emblem.svg'}, {city: 'Prague', country: 'Czech Republic', population: '1.2 Million', founded: '870', image: baseURL + 'prague.jpg', emblem: baseURL + 'czech-emblem.svg'}]
#container
	each item in info
		.slide.anim-in
			.image(style='background-image: url(' + item.image + ');')
			.overlay
			.content
				h1.title(data-title=item.city)= item.city
				.emblem(style='background-image: url(' + item.emblem + ');')
				ul.city-info
					li.country= 'Country: ' + item.country
					li.founded= 'Founded: ' + item.founded
					li.population= 'Population: ' + item.population
			.btn-close
a#codepen-link(href='https://www.codepen.io/seanfree' target='_blank')
            
          
!
            
              html,body
	height: 100vh
	width: 100vw
	box-sizing: border-box
	
body
	background: #1f1f1f
	font-family: 'Raleway', sans-serif
h1,h2,h3,h4
	font-family: 'Abril Fatface', serif
#container
	position: relative
	top: 50px
	left: 50px
	display: flex
	align-items: center
	height: calc(100% - 100px)
	width: calc(100% - 100px)
.slide
	position: relative
	flex: 1
	height: 100%
	overflow: hidden
	cursor: pointer
	transition: all 1.5s ease-in-out
	&.last-viewed
		.btn-close
			&:after
				transition-delay: 0s
			&:before
				transition-delay: 0.1s
		.content
			.city-info
				transition-delay: 0s
				li
					@for $i from 1 through 3
						&:nth-of-type(#{$i})
							transition-delay: ($i * 0.2s)
			.emblem
				transition: all 0.5s ease-in-out
				transition-delay: 0s
	&.last-viewed, &.active
		.image
			top: 0
			left: 0
			height: 100%
			width: 100%
	&.active
		cursor: default
		.overlay
			width: 25%
			background-size: 100% 100%
			transition: all 1.25s ease-in-out
			transition-delay: 1.75s
		.content
			position: absolute
			top: 0
			left: 0
			height: 100%
			width: 100%
			.title
				width: 25%
				opacity: 1
				transform: translateY(30px)
				transition: all 1s ease-in-out
				transition-delay: 1.25s
				&:after
					height: 100%
					color: white
					overflow: initial
				&:before
					transform: scaleX(1)
					transition-delay: 2s
			.city-info
				opacity: 1
				li
					opacity: 1
					transform: translateX(0)
			.emblem
				opacity: 0.8
				transform: translateY(100px)
		.btn-close
			cursor: pointer
			pointer-events: auto
			&:before, &:after
				opacity: 1
			&:after
				transform: rotate(45deg) translateX(0px)
			&:before
				transform: rotate(-45deg) translateX(0px)
	&.anim-in
		transition-delay: 0.5s
		.image
			top: -20%
			left: -140%
			height: 140%
			width: 140%
			animation: img-anim-in 1.2s ease-in-out forwards
	&.anim-out
		flex: 0
		cursor: default
		transition-delay: 0.5s
		.image
			top: 0
			left: 0
			height: 100%
			width: 100%
			animation: img-anim-out 1.2s ease-in-out forwards
	@for $i from 1 through 4
		&:nth-of-type(#{$i})
			&.anim-in
				.image
					animation-delay: $i * 0.2s
			&.anim-out
				.image
					animation-delay: $i * 0.2s
	.image
		position: absolute
		background-size: cover
		background-position: center center
		pointer-events: none
		transition: all 1s ease-in-out
	.overlay
		position: absolute
		top: 0
		left: 0
		height: 100%
		width: 100%
		background-image: linear-gradient(rgba(20,20,20,0.7),rgba(20,20,20,0))
		background-position: 0 0
		background-size: 100% 200%
		opacity: 1
		pointer-events: none
		transition: all 0.5s ease-in-out
	.content
		position: absolute
		top: 0
		left: 0
		height: 100%
		width: 100%
		pointer-events: none
		.title
			position: absolute
			top: -10px
			height: 65px
			width: 100%
			box-sizing: border-box
			font-size: 3em
			text-align: center
			text-shadow: 0 2px 2px #2f2f2f
			color: #3f3f3f
			opacity: 0
			pointer-events: none
			transition: all 0.5s ease-in-out
			&:after
				position: absolute
				top: 0
				height: 0
				width: 100%
				display: block
				content: attr(data-title)
				overflow: hidden
				color: #fff59d
				transition: all 0.85s ease-in-out
			&:before
				position: absolute
				bottom: 15px
				display: block
				content: ''
				height: 2px
				width: 85%
				background: white
				box-shadow: 0 2px 6px #2f2f2f
				transform-origin: left center
				transform: scaleX(0)
				transition: transform 1.25s ease-in-out
		.emblem
			position: absolute
			height: 200px
			width: 25%
			opacity: 0
			transform: translateY(120px)
			transition: all 1s ease-in-out
			transition-delay: 1.75s
			background-position: center center
			background-repeat: no-repeat
			background-size: auto 100%
		.city-info
			position: absolute
			bottom: 30px
			right: 30px
			padding: 30px 30px 30px 120px
			font-size: 1.25em
			color: white
			text-shadow: 0 1px 4px #0f0f0f
			background-image: linear-gradient(90deg, rgba(20,20,20,0), rgba(20,20,20,0.7))
			opacity: 0
			transition: all 1s ease-in-out
			transition-delay: 2s
			li
				position: relative
				margin-bottom: 5px
				text-align: justify
				opacity: 0
				transform: translateX(-30px)
				transition: all 0.75s ease-in-out
				@for $i from 1 through 3
					&:nth-of-type(#{$i})
						transition-delay: ($i * 0.2s) + 2.5s
	.btn-close
		position: absolute
		z-index: 100
		top: 20px
		right: 20px
		height: 24px
		width: 24px
		pointer-events: none
		&:before, &:after
			position: absolute
			top: 12px
			display: block
			content: ''
			width: 100%
			height: 4px
			background-color: white
			opacity: 0
			cursor: pointer
			transition: all 0.5s ease-in-out
		&:after
			transform: rotate(45deg) translateX(-12px)
			transition-delay: 3s
		&:before
			transform: rotate(-45deg) translateX(12px)
			transition-delay: 3.2s
	&:hover:not(.active):not(.anim-out)
		.image
			transform: scale(1.1)
		.overlay
			opacity: 0.6
		.content .title
			opacity: 1
			transform: translateY(30px)
			&:after
				height: 100%
#codepen-link
	position: absolute
	left: 30px
	bottom: 30px
	height: 40px
	width: 40px
	z-index: 10
	border-radius: 50%
	background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/logo.jpg')
	background-position: center center
	background-size: cover
	opacity: 0.7
	transition: all 0.25s
	&:hover
		opacity: 1
		box-shadow: 0 2px 6px #0f0f0f
@keyframes img-anim-in
	to
		top: 0
		left: 0
		height: 100%
		width: 100%
@keyframes img-anim-out
	to
		left: -100%
            
          
!
            
              (function(window, document, $, undefined) {
	var $slides, $btnArr;

	function onClick(e) {
		var $target = $(e.target);
		if ($target.hasClass('slide') && !$target.hasClass('active') && !$target.siblings().hasClass('active')) {
			$target.removeClass('anim-in last-viewed').addClass('active')
			$target.siblings().removeClass('anim-in last-viewed').addClass('anim-out');
		}
	}

	function closeSlide(e) {
		var $slide = $(e.target).parent();
		$slide.removeClass('active anim-in').addClass('last-viewed');
		$slide.siblings().removeClass('anim-out').addClass('anim-in');
	}

	$(function() {
		$slides = $('.slide');
		$btnArr = $slides.find('.btn-close');
		$slides.on('click', onClick);
		$btnArr.on('click', closeSlide);
	});
})(this, document, jQuery);
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console