CMSimple - Forum

Code: Select all

@keyframes zoom { /* DOR: Entnommen von Blindtexte_spielwiese_modal_popup_neu/css/modal_popup_blindtext.css */
  from {transform:scale(0)} to {transform:scale(1)}
}
@keyframes zoom_out { /* DOR: hinzugefuegt fuer Bild ausblenden, hat aber einen komischen Effekt gebracht und nix kaputt gemacht */
  from {transform:scale(1)} to {transform:scale(0)}
}

div#shShutter
.............

background: rgba(51,51,51, .5); /* DOR: grosses bild hintergrund - #333 */
opacity: 0.7;  /*DOR: hier wird der abgedunkelte hintergrund heller - doppeltes moppelchen: bei 'background' rgba() angegeben'! */
transition: opacity .5s; /* DOR: Bild schneller einblenden */
animation-name: zoom; /* DOR: Entnommen von Blindtexte_spielwiese_modal_popup_neu/css/modal_popup_blindtext.css, '@keyframes zoom' gehoert dazu . Shutter macht sich von unten nach oben-aussen auf, nicht wie im JS von innen nach aussen!*/
animation-duration: 0.6s; /* DOR: einblendung besser als 0.8s; Entnommen von Blindtexte_spielwiese_modal_popup_neu/css/modal_popup_blindtext.css */

div#shNavBar
............

background: #444;

#shImage
........

animation-name: zoom; /* DOR: hinzugefuegt und geschafft!!! Bild wird von innen nach aussen eingeblendet - CHACKA!!! */
animation-duration: 2.5s; /* DOR: hinzugefuegt und geschafft!!! Bild wird von innen nach aussen eingeblendet - CHACKA!!! */

img#shTopImg
............

padding: 6px; /* DOR: hinzugefuegt, Abstand modales Bild zum aeussern Rand */
border: 3px solid #710; /* DOR: border ist jetzt gut so, farbe wie hintergrund Ticker. gleicher effekt. #930 sieht heller aus */
box-shadow: 0 0 15px #710; /* DOR: hinzugefuegt, schatten drumherum, farbe wie hintergrund Ticker. gleicher effekt. #930 sieht heller aus */
border-radius: 0 24px 24px 0; /* DOR: hinzugefuegt, ecken rechts sind jetzt rund */
/* animation-name: zoom_out; DOR hinzugefuegt und klappt, aber der Effekt ist ...hm... komisch! */
/*animation-duration: 4s;  DOR hinzugefuegt und klappt, aber der Effekt ist ...hm... komisch! */

div#shTitle
...........

background: #444;
font-family: SpecialElite, NormalFraktur, arial, sans-serif; /* DOR: hier NormalFraktur als schrift eingefuegt. Am anfang als '@font-face' eingebunden. */
font-size: 24px; /* DOR: Beschriftung groesser */
font-weight: 550; /* DOR: entweder 500 oder 600. dazwischen is nix */
padding: 15px 12px 12px 12px; /* DOR: abstand beschriftung bild oben hoeher */
animation: opacity05 1s; /* DOR: Hintergrund wird von innen nach aussen eingeblendet - CHACKA!!! */

Code: Select all

  // DOR: Ausblenden geoeffnetes Bild mit shutter 
	function shCloseShutter() 
	{
    // DOR: Original
    //--------------
    
    //document.getElementById('shTopImg').style.opacity = '0';
    //document.getElementById('shShutter').style.opacity = '0';
    //document.getElementById('shImage').style.opacity = '0';
    //document.getElementById('shTitle').style.opacity = '0';
    //document.getElementById('shNavBar').style.opacity = '0';
    //setTimeout (function() 
		//{
		//	shutterMobile.hideShutter();
		//},510);

    // DOR: Angepasst...so lala
    //-------------------------
    // 'zoom_out' ist in 'fotopro/css/stylesheets.css' als '@keyframes zoom_out {from {transform:scale(1)} to {transform:scale(0)}}' definiert. Konstante sind individualisiert. 
    
		//document.getElementById('shTopImg').style.transform = 'translate(1,0)';
    //document.getElementById('shTopImg').style.animation = 'zoom_out .5s';  DOR: Bloss nicht aktivieren! Das gibt 2x zoom_out
		document.getElementById('shTopImg').style.transition = 1200; //DOR: rattenegal, was ich hier eintrage
    // DOR: shSutter ausblenden
		//document.getElementById('shShutter').style.transform = 'translate(1,0)';
    //document.getElementById('shShutter').style.animation = 'zoom_out 2s';
    // DOR: entnommen von 'https://developer.mozilla.org/en-US/docs/Web/API/Element/animate' und angepasst
    // Der modale Hintergrund kommt mit der Drehung nicht klar...
    const modal_weg0 = [ 
    //{ transform: 'rotate(0) scale(1)' }, /* DOR: von aussen nach innen weg rechts drehend ausblenden */
      { transform: 'scale(1)' }, /* DOR: nach innen ausblenden */
      //{ transform: 'rotate(360deg) scale(0)' } /* DOR: von aussen nach innen weg rechts drehend ausblenden */
      { transform: 'scale(0)' } /* DOR: nach innen ausblenden */
    ];
    const ModalTiming0 = {
		duration: 1480, // DOR: Wert von 2000 auf 1500 reduziert, weil es zeitlich besser passt. -> Modal einblenden zu Modal ausblenden
		iterations: 1
    }
    const mach_zu0 = document.getElementById('shShutter'); //DOR: das hat gewirkt, richtiger Selector, aber 'modal' kommt wieder hoch, wenn nicht 'SetTimeout' ausgeloest wird
    mach_zu0.addEventListener('click', () => {
      mach_zu0.animate(modal_weg0, ModalTiming0);
    });
    //document.getElementById('shImage').style.transform = 'translate(1,0)';
    // DOR: shImage ausblenden
    //  DOR: entnommen von 'https://developer.mozilla.org/en-US/docs/Web/API/Element/animate'
    const modal_weg1 = [ 
    //{ transform: 'rotate(0) scale(1)' }, /* DOR: von aussen nach innen weg rechts drehend ausblenden */
      { transform: 'scale(1)' }, /* DOR: nach innen ausblenden */
      //{ transform: 'rotate(360deg) scale(0)' } /* DOR: von aussen nach innen weg rechts drehend ausblenden */
      { transform: 'scale(0)' } /* DOR: nach innen ausblenden */
    ];
    const ModalTiming1 = {
		duration: 1500, // DOR: Wert von 2000 auf 1500 reduziert, weil es zeitlich besser passt. -> Modal einblenden zu Modal ausblenden
		iterations: 1
    }
    const mach_zu1 = document.getElementById('shImage'); //DOR: das hat gewirkt, richtiger Selector, aber 'modal' kommt wieder hoch, wenn nicht 'SetTimeout' ausgeloest wird
    mach_zu1.addEventListener('click', () => {
      mach_zu1.animate(modal_weg1, ModalTiming1);
    });
    //document.getElementById('shImgage').style.animation = 'zoom_out 4s';
		//document.getElementById('shTitle').style.transform = 'translate(1,0)';
		document.getElementById('shTitle').style.animation = 'zoom_out 1.5s';
		//document.getElementById('shNavBar').style.transform = 'translate(1,0)';
		document.getElementById('shNavBar').style.animation = 'zoom_out 1.5s';
		setTimeout (function() 
		{
			shutterMobile.hideShutter();
		},1480); // DOR: 20 ms vor 'ModalTiming' auausloesen, damit kein 'flackern' entsteht
		// DOR: man kann bei dieser implementaton nicht irgendwo hinklicken und das Modal schließt sich. Bei meiner JS implementierung ist es so...schade...wahrscheinlich rotzt mir lightbox dazwischen...
	}