Changeset 1431 in t29-www

Timestamp:

Jan 9, 2018, 11:23:52 PM (5 years ago)

Author:

heribert

Message:

Startseiten-Slider durch Fading ersetzt. Wird aber gleich wieder zurückgemacht.

Files:

• de/index.php (modified) (4 diffs)
• lib/ressourceloader.php (modified) (1 diff)
• shared/css-v6/pagestyles/startseite.css (modified) (2 diffs)
• shared/img-v6/pause-button.svg (added)
• shared/js-v6/pagescripts/startseite.js (added)

de/index.php

@@ -8 +8 @@
 
 <header class="teaser seitenstart">
-<!-- Autoplay: 5000ms Pause zwischen jedem Bild. -->
-<div class="slider-carousel" data-flickity='{ "autoPlay": 5000, "wrapAround": true, "cellAlign": "left", "contain": true }'>
+<div class="slider play">
         <!-- Erstes Bild (Noscript: Default) -->
-        <div class="slide">
+        <div class="slide slide1">
                 <h2>
                 Vergangenheit verstehen <br>
@@ -20 +19 @@
 
 
-        <div class="slide js">
+        <div class="slide slide2">
                 <h2>
                 Der Beginn der EDV<br>
@@ -28 +27 @@
 
          
-        <div class="slide js">
+        <div class="slide slide3">
                 <h2>
                 Die Zeit der Lochkarten<br>
@@ -35 +34 @@
         </div>
         
- 
-</div>
+ </div>
 </header>
 

lib/ressourceloader.php

@@ -209 +209 @@
                                 $urls[] = 'http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAraTKZ5cINardZ8ITNVssKhRcOoEBtCgYLJRQznXYEV8m1M3fRRRT9wMSvFwhyo62fD3KyiwQxe5ruw';
                                 break;
-                        case 'startseite':
-                                $urls[] = '/shared/js-v6/libs/flickity.pkgd.min.js'; // Caroussel-Slider
-                                break;
                 }
                 return $urls;

shared/css-v6/pagestyles/startseite.css

@@ -251 +251 @@
 
 
-/*** Slider (http://meandmax.github.io/lory/) Styles ***/
+/*** Slider Styles ***/
 /*** Started 2018-01-07 ***/
 
@@ -258 +258 @@
 }
 
-/*! Flickity v2.0.10
-http://flickity.metafizzy.co
----------------------------------------------- */
-
-.flickity-enabled {
+/* Pure CSS fade-in-out transition */
+
+.slider {
+  width: 940px;
+  height: 290px;
   position: relative;
 }
 
-.flickity-enabled:focus { outline: none; }
-
-.flickity-viewport {
-  overflow: hidden;
-  position: relative;
-  height: 100%;
-}
-
-.flickity-slider {
+/* Pause-Button */
+.slider .pause {
+  display: inline-block;
+  position: absolute;
+  right: 32px;
+  top: 32px;
+  z-index: 100;
+}
+
+.slider .slide {
   position: absolute;
   width: 100%;
   height: 100%;
-}
-
-/* draggable */
-
-.flickity-enabled.is-draggable {
-  -webkit-tap-highlight-color: transparent;
-          tap-highlight-color: transparent;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-}
-
-.flickity-enabled.is-draggable .flickity-viewport {
-  cursor: move;
-  cursor: -webkit-grab;
-  cursor: grab;
-}
-
-.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
-  cursor: -webkit-grabbing;
-  cursor: grabbing;
-}
-
-/* ---- previous/next buttons ---- */
-
-.flickity-prev-next-button {
-  position: absolute;
-  top: 50%;
-  width: 44px;
-  height: 44px;
-  border: none;
-  border-radius: 50%;
-  background: white;
-  background: hsla(0, 0%, 100%, 0.75);
-  cursor: pointer;
-  /* vertically center */
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
-}
-
-.flickity-prev-next-button:hover { background: white; }
-
-.flickity-prev-next-button:focus {
-  outline: none;
-  box-shadow: 0 0 0 5px #09F;
-}
-
-.flickity-prev-next-button:active {
-  opacity: 0.6;
-}
-
-.flickity-prev-next-button.previous { left: 10px; }
-.flickity-prev-next-button.next { right: 10px; }
-/* right to left */
-.flickity-rtl .flickity-prev-next-button.previous {
-  left: auto;
-  right: 10px;
-}
-.flickity-rtl .flickity-prev-next-button.next {
-  right: auto;
-  left: 10px;
-}
-
-.flickity-prev-next-button:disabled {
-  opacity: 0.3;
-  cursor: auto;
-}
-
-.flickity-prev-next-button svg {
-  position: absolute;
-  left: 20%;
-  top: 20%;
-  width: 60%;
-  height: 60%;
-}
-
-.flickity-prev-next-button .arrow {
-  fill: #333;
-}
-
-/* ---- page dots ---- */
-
-.flickity-page-dots {
-  position: absolute;
-  width: 100%;
-  bottom: -25px;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-  text-align: center;
-  line-height: 1;
-}
-
-.flickity-rtl .flickity-page-dots { direction: rtl; }
-
-.flickity-page-dots .dot {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  margin: 0 8px;
-  background: #333;
-  border-radius: 50%;
-  opacity: 0.25;
-  cursor: pointer;
-}
-
-.flickity-page-dots .dot.is-selected {
-  opacity: 1;
-}
+  }
+
+/* Dauer = Gesamter Prozess. */
+.play .slide1 { animation:fade1 15s infinite; -webkit-animation:fade1 15s infinite; } 
+.play .slide2 { animation:fade2 15s infinite; -webkit-animation:fade2 15s infinite; } 
+.play .slide3 { animation:fade3 15s infinite; -webkit-animation:fade3 15s infinite; } 
+
+@keyframes fade1
+{
+  0%   {opacity:1}
+  33.333% { opacity: 0}
+  66.666% { opacity: 0}
+  100% { opacity: 1}
+}
+@keyframes fade2
+{
+  0%   {opacity:0}
+  33.333% { opacity: 1}
+  66.666% { opacity: 0 }
+  100% { opacity: 0}
+}
+@keyframes fade3
+{
+  0%   {opacity:0}
+  33.333% { opacity: 0}
+  66.666% { opacity: 1}
+  100% { opacity: 0}
+}
+
+
+
+
+
+