Changeset 1431 in t29-www


Ignore:
Timestamp:
Jan 9, 2018, 11:23:52 PM (20 months ago)
Author:
heribert
Message:

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

Files:
2 added
3 edited

Legend:

Unmodified
Added
Removed
  • de/index.php

    r1430 r1431  
    88
    99<header class="teaser seitenstart">
    10 <!-- Autoplay: 5000ms Pause zwischen jedem Bild. -->
    11 <div class="slider-carousel" data-flickity='{ "autoPlay": 5000, "wrapAround": true, "cellAlign": "left", "contain": true }'>
     10<div class="slider play">
    1211        <!-- Erstes Bild (Noscript: Default) -->
    13         <div class="slide">
     12        <div class="slide slide1">
    1413                <h2>
    1514                Vergangenheit verstehen <br>
     
    2019
    2120
    22         <div class="slide js">
     21        <div class="slide slide2">
    2322                <h2>
    2423                Der Beginn der EDV<br>
     
    2827
    2928         
    30         <div class="slide js">
     29        <div class="slide slide3">
    3130                <h2>
    3231                Die Zeit der Lochkarten<br>
     
    3534        </div>
    3635       
    37  
    38 </div>
     36 </div>
    3937</header>
    4038
  • lib/ressourceloader.php

    r1423 r1431  
    209209                                $urls[] = 'http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAraTKZ5cINardZ8ITNVssKhRcOoEBtCgYLJRQznXYEV8m1M3fRRRT9wMSvFwhyo62fD3KyiwQxe5ruw';
    210210                                break;
    211                         case 'startseite':
    212                                 $urls[] = '/shared/js-v6/libs/flickity.pkgd.min.js'; // Caroussel-Slider
    213                                 break;
    214211                }
    215212                return $urls;
  • shared/css-v6/pagestyles/startseite.css

    r1423 r1431  
    251251
    252252
    253 /*** Slider (http://meandmax.github.io/lory/) Styles ***/
     253/*** Slider Styles ***/
    254254/*** Started 2018-01-07 ***/
    255255
     
    258258}
    259259
    260 /*! Flickity v2.0.10
    261 http://flickity.metafizzy.co
    262 ---------------------------------------------- */
    263 
    264 .flickity-enabled {
     260/* Pure CSS fade-in-out transition */
     261
     262.slider {
     263  width: 940px;
     264  height: 290px;
    265265  position: relative;
    266266}
    267267
    268 .flickity-enabled:focus { outline: none; }
    269 
    270 .flickity-viewport {
    271   overflow: hidden;
    272   position: relative;
    273   height: 100%;
    274 }
    275 
    276 .flickity-slider {
     268/* Pause-Button */
     269.slider .pause {
     270  display: inline-block;
     271  position: absolute;
     272  right: 32px;
     273  top: 32px;
     274  z-index: 100;
     275}
     276
     277.slider .slide {
    277278  position: absolute;
    278279  width: 100%;
    279280  height: 100%;
    280 }
    281 
    282 /* draggable */
    283 
    284 .flickity-enabled.is-draggable {
    285   -webkit-tap-highlight-color: transparent;
    286           tap-highlight-color: transparent;
    287   -webkit-user-select: none;
    288      -moz-user-select: none;
    289       -ms-user-select: none;
    290           user-select: none;
    291 }
    292 
    293 .flickity-enabled.is-draggable .flickity-viewport {
    294   cursor: move;
    295   cursor: -webkit-grab;
    296   cursor: grab;
    297 }
    298 
    299 .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
    300   cursor: -webkit-grabbing;
    301   cursor: grabbing;
    302 }
    303 
    304 /* ---- previous/next buttons ---- */
    305 
    306 .flickity-prev-next-button {
    307   position: absolute;
    308   top: 50%;
    309   width: 44px;
    310   height: 44px;
    311   border: none;
    312   border-radius: 50%;
    313   background: white;
    314   background: hsla(0, 0%, 100%, 0.75);
    315   cursor: pointer;
    316   /* vertically center */
    317   -webkit-transform: translateY(-50%);
    318           transform: translateY(-50%);
    319 }
    320 
    321 .flickity-prev-next-button:hover { background: white; }
    322 
    323 .flickity-prev-next-button:focus {
    324   outline: none;
    325   box-shadow: 0 0 0 5px #09F;
    326 }
    327 
    328 .flickity-prev-next-button:active {
    329   opacity: 0.6;
    330 }
    331 
    332 .flickity-prev-next-button.previous { left: 10px; }
    333 .flickity-prev-next-button.next { right: 10px; }
    334 /* right to left */
    335 .flickity-rtl .flickity-prev-next-button.previous {
    336   left: auto;
    337   right: 10px;
    338 }
    339 .flickity-rtl .flickity-prev-next-button.next {
    340   right: auto;
    341   left: 10px;
    342 }
    343 
    344 .flickity-prev-next-button:disabled {
    345   opacity: 0.3;
    346   cursor: auto;
    347 }
    348 
    349 .flickity-prev-next-button svg {
    350   position: absolute;
    351   left: 20%;
    352   top: 20%;
    353   width: 60%;
    354   height: 60%;
    355 }
    356 
    357 .flickity-prev-next-button .arrow {
    358   fill: #333;
    359 }
    360 
    361 /* ---- page dots ---- */
    362 
    363 .flickity-page-dots {
    364   position: absolute;
    365   width: 100%;
    366   bottom: -25px;
    367   padding: 0;
    368   margin: 0;
    369   list-style: none;
    370   text-align: center;
    371   line-height: 1;
    372 }
    373 
    374 .flickity-rtl .flickity-page-dots { direction: rtl; }
    375 
    376 .flickity-page-dots .dot {
    377   display: inline-block;
    378   width: 10px;
    379   height: 10px;
    380   margin: 0 8px;
    381   background: #333;
    382   border-radius: 50%;
    383   opacity: 0.25;
    384   cursor: pointer;
    385 }
    386 
    387 .flickity-page-dots .dot.is-selected {
    388   opacity: 1;
    389 }
     281  }
     282
     283/* Dauer = Gesamter Prozess. */
     284.play .slide1 { animation:fade1 15s infinite; -webkit-animation:fade1 15s infinite; }
     285.play .slide2 { animation:fade2 15s infinite; -webkit-animation:fade2 15s infinite; }
     286.play .slide3 { animation:fade3 15s infinite; -webkit-animation:fade3 15s infinite; }
     287
     288@keyframes fade1
     289{
     290  0%   {opacity:1}
     291  33.333% { opacity: 0}
     292  66.666% { opacity: 0}
     293  100% { opacity: 1}
     294}
     295@keyframes fade2
     296{
     297  0%   {opacity:0}
     298  33.333% { opacity: 1}
     299  66.666% { opacity: 0 }
     300  100% { opacity: 0}
     301}
     302@keyframes fade3
     303{
     304  0%   {opacity:0}
     305  33.333% { opacity: 0}
     306  66.666% { opacity: 1}
     307  100% { opacity: 0}
     308}
     309
     310
     311
     312
     313
     314
Note: See TracChangeset for help on using the changeset viewer.
© 2008 - 2013 technikum29 • Sven Köppel • Some rights reserved
Powered by Trac
Expect where otherwise noted, content on this site is licensed under a Creative Commons 3.0 License