diedVIPs

html knowhow

Überlagernde Iframes









Überlagernde Iframes

So sieht´s aus




Quellcode
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style type="text/css">
.viewer {width: 80%; height: 90vh; display: flex; justify-content: space-between; perspective: 3000px; }
iframe {width: 45%; border-radius: 10px; box-shadow: 0px 0px 15px #2b2b2b30; transition: 0.3s ease-in-out; z-index: 8000; transform: rotateY(20deg);}
iframe:not(:first-child) {margin-left: -10rem;}
iframe:hover {transform: translateY(-1rem); width: 100%; z-index: 9000;}
iframe~iframe {transform: translateX(10rem/2.5);}
.white-mode {text-decoration: none; padding: 7px 10px; background-color: #122; border-radius: 3px; color: #FFF; transition: .35s ease-in-out; position: absolute; left: 15px; bottom: 15px}
.tab-wrap .dot{position: absolute; width:5em; height:30px; border-radius: 10%; left: calc(50% - 20px); bottom: 0; background-color:lime; border: 2px solid yellow; transition: all 0.5s ease;}
.tab-wrap .dot:hover{background: red; }
.tab-wrap .tab {background: white; color: black; padding: 1em; overflow: scroll; height: 100%;}
.tab-wrap .tab.less {padding: 0; }
.tab-wrap .tab h1 {text-align: center; background: fuchsia; margin: 0 0 .5em; padding: .25em;}
.tab-wrap .tab p {margin: .5em 0 ;}
[class^="col-"],[class*="col-"] {float:left; padding-left: .25em; padding-right: .25em;}
</style>
</head>

<body >
<div id="tab-container"><div class="tab-wrap"><div class="viewer"></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
let listOfPages = [
{index: 0, url: "http://htmlknowhow.de/datenschutz.html"},
{index: 1, url: "http://htmlknowhow.de/kontakt.html"},
{index: 2, url: "http://htmlknowhow.de/Impressum.html"}, ];
let iframeContainer = document.querySelector(".viewer");
for (let i of listOfPages) {
iframeContainer.innerHTML += `<iframe src="${i.url}" frameborder="0" width="100%" height="100%"></iframe>`;}
</script>
</body>

</html>








Kontakt    Datenschutz    Impressum