Karten Flip Slideshow | |
| So sieht´s aus | |
| |
| Quellcode | |
|
<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script> <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"> .container {width: 1000px; position: relative; margin: 0 auto; -webkit-perspective: 900px; perspective: 900px;} .pane {width: 150px; height: 150px; margin: 5px; float: left; position: relative; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: center center; transform-origin: center center;} .pane img {width: 150px;} .pane .card {z-index: -1; visibility: hidden; background-color: red; display: block; position: absolute; width: 100%; height: 100%; box-shadow: 0 0 10px rgba(0,0,0,0.5); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -backface-visibility: hidden; -webkit-transform: rotateX( 180deg ); transform: rotateX( 180deg );} .pane .active { z-index: 1; visibility: visible; background-color: transparent; -webkit-transform: rotateX( 0deg ); transform: rotateX( 0deg );} .pane.one .card {-webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s;} .pane.two .card {-webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s;} .pane.three .card {-webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s;} .pane.four .card {-webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s;} .pane.five .card {-webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s;} .pane.six .card {-webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s;} </style> <head> <body > <input type="button" class="flipBtn" value="Zurück" /> <input type="button" class="flipBtn" value="Weiter" /> <section class="container"> <div class="pane one"> <div class="card"><img src="../Bilder/life.jpg"></div> <div class="card active"><img src="../Bilder/andie macdowell.jpg"></div> <div class="card"><img src="../Bilder/ambi.jpg"></div> <div class="card"><img src="../Bilder/astern.jpg"></div> <div class="card"><img src="../Bilder/ambi2.jpg"></div> </div> <div class="pane four"> <div class="card"><img src="../Bilder/andie macdowell.jpg"></div> <div class="card active"><img src="../Bilder/life.jpg"></div> <div class="card"><img src="../Bilder/astern.jpg"></div> <div class="card"><img src="../Bilder/ambi2.jpg"></div> <div class="card"><img src="../Bilder/ambi.jpg"></div> </div> <div class="pane two"> <div class="card"><img src="../Bilder/life.jpg"></div> <div class="card active"><img src="../Bilder/astern.jpg"></div> <div class="card"><img src="../Bilder/ambi.jpg"></div> <div class="card"><img src="../Bilder/ambi2.jpg"></div> <div class="card"><img src="../Bilder/andie macdowell.jpg"></div> </div> <div class="pane three"> <div class="card"><img src="../Bilder/ambi.jpg"></div> <div class="card active"><img src="../Bilder/ambi2.jpg"></div> <div class="card"><img src="../Bilder/andie macdowell.jpg"></div> <div class="card"><img src="../Bilder/astern.jpg"></div> <div class="card"><img src="../Bilder/life.jpg"></div> </div> <div class="pane five"> <div class="card"><img src="../Bilder/ambi2.jpg"></div> <div class="card active"><img src="../Bilder/ambi.jpg"></div> <div class="card"><img src="../Bilder/andie macdowell.jpg"></div> <div class="card"><img src="../Bilder/life.jpg"></div> <div class="card"><img src="../Bilder/astern.jpg"></div> </div> <div class="pane six"> <div class="card"><img src="../Bilder/andie macdowell.jpg"></div> <div class="card active"><img src="../Bilder/astern.jpg"></div> <div class="card"><img src="../Bilder/life.jpg"></div> <div class="card"><img src="../Bilder/ambi.jpg"></div> <div class="card"><img src="../Bilder/ambi2.jpg"></div> </div> </section> <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script id="rendered-js" > $('.flipBtn').on('click', function () { var itemNum = $('.pane.one .active'); // get an active item in a stack var crnt = $('.pane.one .card').index(itemNum); // find out the index of an active card var end = $('.pane.one .card').length - 1; // find out how many cards are in a stack $(this).val() == 'Next' ? crnt++ : crnt--; // next / previous if (crnt > end) {// at the end, so start over crnt = 0; } else if (crnt < 0) {// at the front, so go to the end crnt = end; } $('.pane .active').removeClass('active'); $('.pane .card:nth-child(' + (crnt + 1) + ')').addClass('active'); }); </script> </body> </html> |
Rollierende Bildershow | |
Der Rahmen bewegt sich automatisch ums Bild. | |
| So sieht´s aus | |
| |
| Quellcode | |
|
<html> <head> <style type="text/css"> .slideshow {list-style-type: none;} .slideshow, .slideshow:after { position: absolute; width: 100%; height: 70%; left: 0px; z-index: 0; } .slideshow li span { position: absolute; width: 100%; height: 70%; top: 0px; left: 0px; background-size: 100%; background-position: 50% 50%; background-repeat: no-repeat; opacity: 0; z-index: 0; animation: imageAnimation 30s linear infinite 0s; } .slideshow li:nth-child(1) span { background-image: url("http://saleorbuy.lmfd.de/Bilder/werbung/B-Dinner.jpg"); } .slideshow li:nth-child(2) span { background-image: url("http://saleorbuy.lmfd.de/Bilder/werbung/B-MSGS.jpg"); animation-delay: 6s; } .slideshow li:nth-child(3) span { background-image: url("http://saleorbuy.lmfd.de/Bilder/werbung/B-HBart.jpg"); animation-delay: 12s; } .slideshow li:nth-child(4) span { background-image: url("http://saleorbuy.lmfd.de/Bilder/werbung/B-Hdil.jpg"); animation-delay: 18s; } .slideshow li:nth-child(5) span { background-image: url("http://saleorbuy.lmfd.de/Bilder/werbung/B-Ovoice.jpg"); animation-delay: 24s; } @keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 }} @keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 }} .no-cssanimations .cb-slideshow li span {opacity: 1;} </style> </head> <body > <div id="captioned-gallery"> <figure class="slider"> <figure><a href="http://todayslunch.de"><img src="../../bilder/Werbung/B-Dinner.jpg" /></a></figure> <figure><a href="http://hbart.de"><img src="../../bilder/Werbung/B-hbart.jpg" /></a></figure> <figure><a href="http://meinsolargarten.de"><img src="../../bilder/Werbung/B-msgs.jpg" /></a></figure> <figure><a href="http://ovoice.de"><img src="../../bilder/Werbung/B-Ovoice.jpg" /></a></figure> <figure><a href="http://htmlknowhow.de"><img src="../../bilder/Werbung/B-hkh.jpg" /></a></figure> </figure> </div> </body> </html> |
Kontakt Datenschutz Impressum | |
