LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

CSS
/*	Basic Reset and General */
	* { 
		margin: 0px; 
		padding: 0px; 
	}
	html, body {
		min-width: 435px;
		min-height: 1000px;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	
	div.background {
		position: absolute;
		top: 0px; left: 0px;
		min-width: 435px;
		min-height: 1000px;
		height: 100%; width: 100%;
		background: #408dce url('https://hoidrop.s3-us-west-2.amazonaws.com/cp_social_app_background.jpg') no-repeat center center; 
		-webkit-background-size: cover;
		   -moz-background-size: cover;
		     -o-background-size: cover;
		        background-size: cover;
	}

	div.circle {
		height: 77px; width: 77px;
		background: url('https://hoidrop.s3-us-west-2.amazonaws.com/cp_social_app_circle.png');
		position: absolute;
		top: 50%; left: 50%;
		z-index: 200;
		margin: -328px 0px 0px -180px;	
		pointer-events: none;
		animation: pulse 5s infinite;
		-webkit-animation: pulse 1.5s infinite; 
		opacity: 0;
	}
		@keyframes pulse {
			0%   { opacity: 0; }
			50%  { opacity: 1; }
			100% { opacity: 0; }
		}
		@-webkit-keyframes pulse {
			0%   { opacity: 0; }
			50%  { opacity: 1; }
			100% { opacity: 0; }
		}
		



/*	The Device */

	div.iphone {
		height: 810px; width: 435px; 
		position: absolute;
		margin: auto;
		top: 0px; bottom: 80px; left: 0px; right: 0px;
		background: url('https://hoidrop.s3-us-west-2.amazonaws.com/cp_social_app_iphone.png') no-repeat center center; 
		-webkit-background-size: cover;
		   -moz-background-size: cover;
		     -o-background-size: cover;
		        background-size: cover;
	}
	div.screen {
		height: 568px; width: 320px;
		position: absolute;
		top: 119px; left: 59px;
		overflow: hidden;
		position: relative;
	}


/*	Content */
	div.menu {
		position: absolute;
		height: 100%; width: 100%;
		background: url('https://hoidrop.s3-us-west-2.amazonaws.com/cp_social_app_blur.jpg') no-repeat center center; 
		-webkit-background-size: cover;
		   -moz-background-size: cover;
		     -o-background-size: cover;
		        background-size: cover;
	}
		div.menu ul { 
			width: 600px;
			list-style: none; 
			margin: 95px 0px 0px 75px;
		}
		div.menu li {
			font-family: 'HelveticaNeue-UltraLight', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', sans-serif; 
			font-weight: 200;
			font-size: 19px;
			line-height: 19px;
			margin-bottom: 28px;
			
			-webkit-transition: all 400ms ease-in-out, opacity 1000ms ease;
			   -moz-transition: all 400ms ease-in-out, opacity 1000ms ease;
			    -ms-transition: all 400ms ease-in-out, opacity 1000ms ease;
			     -o-transition: all 400ms ease-in-out, opacity 1000ms ease;
			        transition: all 400ms ease-in-out, opacity 1000ms ease;
			-webkit-transform: translate3d(-150px, 0px, 0px) scale(0.2);
			opacity: 0;
		}
		div.menu li.visible {
			-webkit-transform: translate3d(0px, 0px, 0px) scale(1);
			opacity: 1;
		}
		div.menu li a {
			color: rgba(255,255,255,0.9);
			text-decoration: none;
		}
		
	div.status {
		position: absolute;
		top: 0px; left: 0px;
		z-index: 200;
		height: 20px; width: 100%;
		background: url('https://hoidrop.s3-us-west-2.amazonaws.com/cp_social_app_status_black.png') no-repeat center center; 
		-webkit-background-size: cover;
		   -moz-background-size: cover;
		     -o-background-size: cover;
		        background-size: cover;
	}
	div.status.active {
		background-image: url('https://hoidrop.s3-us-west-2.amazonaws.com/cp_social_app_status_white.png'); 
	}
	
	div.content {
		position: absolute;
		top: 0px; left: 0px;
		height: 568px; width: 320px;
		background: #fff url('https://hoidrop.s3-us-west-2.amazonaws.com/cp_social_app_screen.jpg') no-repeat center center; 
		-webkit-background-size: cover;
		   -moz-background-size: cover;
		     -o-background-size: cover;
		        background-size: cover;
		-webkit-transition: all 300ms ease-in-out;
		   -moz-transition: all 300ms ease-in-out;
		    -ms-transition: all 300ms ease-in-out;
		     -o-transition: all 300ms ease-in-out;
		        transition: all 300ms ease-in-out;
		-webkit-backface-visibility: hidden;
	}
		div.content.inactive {
			cursor: pointer;
			-webkit-transform: translate3d(160px, 0px, 0px) scale(0.5);
			   -moz-transform: translate3d(160px, 0px, 0px) scale(0.5);
			    -ms-transform: translate3d(160px, 0px, 0px) scale(0.5);
			        transform: translate3d(160px, 0px, 0px) scale(0.5);
		}
	
	
		div.button {
			width: 30px; height: 30px;
			position: absolute;
			top: 23px; left: 3px;
			cursor: pointer;
		}
JS
/*	Define Click Event for Mobile */
	if( 'ontouchstart' in window ){ var click = 'touchstart'; }
	else { var click = 'click'; }



	
	/*	Reveal Menu */
	$('div.button').on(click, function(){
		if( !$('div.content').hasClass('inactive') ){
			// Remove circle
			$('div.circle').remove();
		
			// Slide and scale content
			$('div.content').addClass('inactive');
			setTimeout(function(){ $('div.content').addClass('flag'); }, 100);
			
			// Change status bar
			$('div.status').fadeOut(100, function(){
				$(this).toggleClass('active').fadeIn(300);
			});
			
			// Slide in menu links
			var timer = 0;
			$.each($('li'), function(i,v){
				timer = 40 * i;
				setTimeout(function(){
					$(v).addClass('visible');
				}, timer);
			});
		}
	});
	
	

	/*	Close Menu */
	function closeMenu() {		
		// Slide and scale content
		$('div.content').removeClass('inactive flag');
		
		// Change status bar
		$('div.status').fadeOut(100, function(){
			$(this).toggleClass('active').fadeIn(300);
		});
		
		// Reset menu
		setTimeout(function(){
			$('li').removeClass('visible');
		}, 300);
	}
	
	$('div.content').on(click, function(){
		if( $('div.content').hasClass('flag') ){
			closeMenu();
		}
	});
	$('li a').on(click, function(e){
		e.preventDefault();
		closeMenu();
	});

Description

Front end animation based on the work of CreativeDash. http://dribbble.com/shots/1230861-Social-Feed-iOS-7-CSS
Term
Mon, 11/27/2017 - 21:23

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv