Morphing Iphone

Developer
Chung Man Chau
Size
3,862 Kb
Views
4,048
  1. Morphing Iphone Previews
  2. Morphing Iphone HTML Codes
  3. Morphing Iphone CSS Codes
  4. Morphing Iphone JS Codes

How do I make an morphing iphone?

What is a morphing iphone? How do you make a morphing iphone? This script and codes were developed by Chung Man Chau on 15 January 2023, Sunday.

Morphing Iphone Previews
IQ Test

Morphing Iphone - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Morphing Iphone</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper">	<div id="device">	<div class="device-top">	<span class="camera"></span>	<span class="sensor"></span>	<span class="speakers"></span>	</div>	<div class="device-content">	<span class="screen"></span>	</div>	<div class="device-bottom">	<span class="home-btn"></span>	</div>	</div>	</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Morphing Iphone - Script Codes CSS Codes

html { height: 100%;
}
html body { height: 100%; background: #333;
}
html body .wrapper { padding-top: 15vh;
}
#device { position: relative; margin: 0 auto; padding: 0; transition: all .5s ease;
}
#device .device-top { transition: all .5s ease;
}
#device .device-content { transition: all .5s ease;
}
#device .device-bottom { text-align: center;
}
#device .device-bottom .home-btn { transition: all .5s ease;
}
#device .device-bottom .home-btn:after { transition: all .5s ease;
}
#device span { display: block;
}
#device.macbook { width: 50rem; height: 33rem; border: 5px solid #0b0b0b; border-radius: 1.5rem 1.5rem 0 0rem; background: #0b0b0b; box-shadow: 0 0 0 2px #313131, 0 0 2rem 0 rgba(0, 0, 0, 0.5);
}
#device.macbook .device-top { padding: .4rem 4.5rem .5rem; text-align: center;
}
#device.macbook .device-top .camera { display: block; width: .5rem; height: .5rem; margin: 0 auto .6rem; border-radius: 50%; background: #313131;
}
#device.macbook .device-content { height: 29.1rem; padding: 0 1.5rem;
}
#device.macbook .device-content .screen { display: block; overflow: hidden; width: 100%; height: 100%; background: url(https://raw.githubusercontent.com/chungmanchau/morphing-devices/master/images/background.jpg) center center no-repeat; background-size: auto 100%; box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2);
}
#device.macbook .device-content .screen::-webkit-scrollbar { display: none;
}
#device.macbook .device-bottom .home-btn { position: relative; display: inline-block; width: 68rem; height: 3rem; margin-top: 2rem; margin-left: -9rem; border-radius: 0 0 30% 30%; background: #666;
}
#device.macbook .device-bottom .home-btn:after { position: relative; display: block; width: 9rem; height: 1rem; margin: 0 auto; content: ''; border-radius: 0 0 2rem 2rem; background: gray;
}
#device.ipad { width: 30rem; height: 40rem; border: 5px solid #0b0b0b; border-radius: 1rem; background: #0b0b0b; box-shadow: 0 0 0 2px #313131, 0 0 2rem 0 rgba(0, 0, 0, 0.5);
}
#device.ipad .device-top { padding: 1.2rem 4.5rem 1rem; text-align: center;
}
#device.ipad .device-top .camera { display: block; width: .5rem; height: .5rem; margin: 0 auto .6rem; border-radius: 50%; background: #313131;
}
#device.ipad .device-content { height: 33.5rem; padding: 0 2.5rem;
}
#device.ipad .device-content .screen { display: block; overflow: hidden; width: 100%; height: 100%; background: url(https://raw.githubusercontent.com/chungmanchau/morphing-devices/master/images/background.jpg) center center no-repeat; background-size: auto 100%; box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2);
}
#device.ipad .device-content .screen::-webkit-scrollbar { display: none;
}
#device.ipad .device-bottom { padding: .5rem 6rem 1rem;
}
#device.ipad .device-bottom .home-btn { position: relative; display: inline-block; width: 2.3rem; height: 2.3rem; border-radius: 50%;
}
#device.ipad .device-bottom .home-btn:after { position: absolute; top: .1rem; left: .1rem; width: 2.1rem; height: 2.1rem; content: ''; border-radius: 50%; background: radial-gradient(#313131 0%, #313131 100%);
}
#device.iphone { width: 15rem; height: 31rem; border: 5px solid #c99d97; border-radius: 2rem; background: #f8f8f8; box-shadow: 0 0 0 1px #b87d75, 0 0 2rem 0 rgba(0, 0, 0, 0.5);
}
#device.iphone .device-top { padding: .6rem 4.5rem 1.6rem; text-align: center;
}
#device.iphone .device-top .camera { display: block; width: .3rem; height: .3rem; margin: 0 auto .6rem; border-radius: 50%; background: #313131;
}
#device.iphone .device-top .sensor { float: left; width: .5rem; height: .5rem; border-radius: 50%; background: #313131;
}
#device.iphone .device-top .speakers { display: block; width: 2.4rem; height: .3rem; margin: 0 auto; border-radius: .7rem; background: #313131;
}
#device.iphone .device-content { height: 23.6rem; padding: 0 .5rem;
}
#device.iphone .device-content .screen { display: block; overflow: hidden; width: 100%; height: 100%; background: url(https://raw.githubusercontent.com/chungmanchau/morphing-devices/master/images/background.jpg) center center no-repeat; background-size: auto 100%; box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2);
}
#device.iphone .device-content .screen::-webkit-scrollbar { display: none;
}
#device.iphone .device-bottom { padding: .5rem 6rem 1rem;
}
#device.iphone .device-bottom .home-btn { position: relative; display: inline-block; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: #b87d75;
}
#device.iphone .device-bottom .home-btn:after { position: absolute; top: .1rem; left: .1rem; width: 2.1rem; height: 2.1rem; content: ''; border-radius: 50%; background: radial-gradient(#e6e6e6 0%, #ffffff 100%);
}

Morphing Iphone - Script Codes JS Codes

var classes = ["iphone", "ipad", "macbook"];
var i = 0;
morph();
function morph() {	$('#device').removeClass();	$('#device').addClass(classes[i]);	if (i > classes.length - 2){	i = 0;	console.log(classes[i]);	} else {	i++;	console.log(classes[i]);	};
};
setInterval(morph, 2000);
Morphing Iphone - Script Codes
Morphing Iphone - Script Codes
Home Page Home
Developer Chung Man Chau
Username chungman93
Uploaded January 15, 2023
Rating 3
Size 3,862 Kb
Views 4,048
Do you need developer help for Morphing Iphone?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chung Man Chau (chungman93) Script Codes
Name
Animated Gradient Text
Burger To Close
Holy Grail Layout - CSS Grid
Rolling Word Hover
Using grid in the real world
BBC Beta - Grid
Color Variables
Target Last Row - CSS Only
Hover Underlining
Hexagonal Colour Picker
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!