Bild Zoomer


Quellcode
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"><script> window.console = window.console || function(t) {};</script>
<script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); }</script>

<style type="text/css">
.elem-mask {stroke: #FFF; stroke-width: 0; -webkit-animation: stroke-width 7s infinite; animation: stroke-width 7s infinite;}
@-webkit-keyframes stroke-width { 50% {stroke-width: 300;}}
@keyframes stroke-width { 50% {stroke-width: 300;}}
.rotation__item {opacity: 0; -webkit-animation: hide 28s step-end infinite; animation: hide 28s step-end infinite; -webkit-mask: url(#m-lines); mask: url(#m-lines);}
.rotation__item:nth-child(4n+2) { -webkit-animation-delay: 7s; animation-delay: 7s;}
.rotation__item:nth-child(4n+3) { -webkit-animation-delay: 14s; animation-delay: 14s;}
.rotation__item:nth-child(4n+4) { -webkit-animation-delay: 21s; animation-delay: 21s;}
@-webkit-keyframes hide { 0% {opacity: 1;} 25% {opacity: 0;}}
@keyframes hide { 0% {opacity: 1;} 25% {opacity: 0;}}
.progress {width: 0; height: 5px; background: red; -webkit-animation: timer 28s infinite linear; animation: timer 28s infinite linear;}
@-webkit-keyframes timer { 100% {width: 100%;}}
@keyframes timer { 100% {width: 100%;}}
svg {width: 200px; height: 200px;}
</style>
</head>

<body>
<svg>
<defs>
<pattern id="p-1" width="200px" height="200px" viewBox="0 0 200 200" patternUnits="userSpaceOnUse">
<image xlink:href="../Bilder/hans busch 2022.jpg" width="200px" height="200px"/>
</pattern>
<pattern id="p-2" width="200" height="200" viewBox="0 0 200 200" patternUnits="userSpaceOnUse">
<image xlink:href="../Bilder/ambi.jpg" width="200" height="200"/>
</pattern>
<pattern id="p-3" width="200" height="200" viewBox="0 0 200 200" patternUnits="userSpaceOnUse">
<image xlink:href="../Bilder/life.jpg" width="200" height="200"/>
</pattern>
<pattern id="p-4" width="200" height="200" viewBox="0 0 200 200" patternUnits="userSpaceOnUse">
<image xlink:href="../Bilder/Astern.jpg" width="200" height="200"/>
</pattern>
<mask id="m-lines">
<line x1="0" y1="0" x2="100%" y2="100%" class="elem-mask"/>
<line x1="0" y1="100%" x2="100%" y2="0%" class="elem-mask"/>
</mask>
</defs>
<g class="rotation">
<rect width="100%" height="100%" fill="url(#p-1)" class="rotation__item"/>
<rect width="100%" height="100%" fill="url(#p-2)" class="rotation__item"/>
<rect width="100%" height="100%" fill="url(#p-3)" class="rotation__item"/>
<rect width="100%" height="100%" fill="url(#p-4)" class="rotation__item"/>
</g>
</svg>
<div class="progress"></div>
</body>

</html>