CSS
* {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0;
}
body {
height: 100%;
}
#app {
display: flex;
justify-content: center;
align-items: center;
padding: 2em;
background-color: #ccc;
height: 100vh;
}
#controls {
position: fixed;
bottom: 0;
right: 0;
padding: 1em;
}
#output {
position: fixed;
bottom: 0;
left: 0;
font-size: 2em;
font-family: sans-serif;
border-radius:3px;
padding: 1em;
z-index: 999;
display: flex;
flex-direction: column;
color: white;
text-shadow: 0 0 3px rgba(0,0,0,.3);
}
#output #orientation {
font-size: 80%;
}
#output > #viewmodel {
font-size: 80%;
color: orangered;
}
#device {
position: relative;
background-color:white;
max-width: 100%;
max-height: 100%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
transition: all 2s ease;
}
#device.overflow {
overflow: hidden;
}
#device::before {
content: "";
border-radius: 7px;
border-style: solid;
border-color: white;
border-width: 10px 1px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: -moz-linear-gradient(-45deg, rgba(184,225,252,0.1) 0%, rgba(169,210,243,0.12) 10%, rgba(144,186,228,0.15) 25%, rgba(144,188,234,0.17) 37%, rgba(144,191,240,0.2) 50%, rgba(107,168,229,0.2) 51%, rgba(162,218,245,0.27) 83%, rgba(189,243,253,0.3) 100%);
background: -webkit-linear-gradient(-45deg, rgba(184,225,252,0.1) 0%,rgba(169,210,243,0.12) 10%,rgba(144,186,228,0.15) 25%,rgba(144,188,234,0.17) 37%,rgba(144,191,240,0.2) 50%,rgba(107,168,229,0.2) 51%,rgba(162,218,245,0.27) 83%,rgba(189,243,253,0.3) 100%);
background: linear-gradient(135deg, rgba(184,225,252,0.1) 0%,rgba(169,210,243,0.12) 10%,rgba(144,186,228,0.15) 25%,rgba(144,188,234,0.17) 37%,rgba(144,191,240,0.2) 50%,rgba(107,168,229,0.2) 51%,rgba(162,218,245,0.27) 83%,rgba(189,243,253,0.3) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1ab8e1fc', endColorstr='#4dbdf3fd',GradientType=1 );
}
#content {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
#content img {
transition: all .2s ease;
}
.portrait {
width: 320px;
height: 568px;
}
.landscape {
width: 568px;
height: 320px;
}
.cover img {
max-width: none;
max-height: none;
width: auto;
height: auto;
}
.contain img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
#device.portrait.cover img {
width: auto;
height: 100%;
}
#device.landscape.cover img {
width: 100%;
height: auto;
}
JAVASCRIPT
$(document).ready(function() {
var app = $('#app');
var device = $('#device');
var content = $('#content');
var image = $('img',content);
var output = $('#output');
device.addClass("portrait cover overflow");
image.attr("src",image.data("landscape"));
$.fn.toggleText = function(t1, t2){
if (this.text() == t1)
this.text(t2);
else
this.text(t1);
return this;
};
$('.btn-rotate').on('click',function() {
device.toggleClass("portrait landscape");
$('#orientation',output).toggleText('Portrait','Landscape');
$('#product',output).toggleText('iPhone','iPhone/Macbook');
$(this).toggleText('Portrait','Landscape');
});
$('.btn-view').on('click',function() {
device.toggleClass("contain cover");
$('#viewmodel',output).toggleText('Cover','Contain');
$(this).toggleText('Cover','Contain');
$('.btn-overflow').toggle();
});
$('.btn-image').on('click',function() {
image.attr("data-state", image.attr("data-state") == 'portrait' ? 'landscape' : 'portrait');
if(image.attr("data-state") == 'portrait')
image.attr("src",image.data("portrait"));
else
image.attr("src",image.data("landscape"));
});
$('.btn-overflow').on('click',function() {
device.toggleClass("overflow");
$(this).toggleText('Cut','Uncut');
});
});
// Formatfüllend
