Ankündigung

Einklappen
Keine Ankündigung bisher.

FadeIn/FadeOut in CSS

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • FadeIn/FadeOut in CSS

    ALL-INKL.COM - Webhosting Server Hosting Domain Provider
    Hallo Freunde,
    Kriege einfach ein Problem nicht gelöst.
    Meine Seite arbeitet mit der Responsive-Technik grundlegende Abfragen der Bildschirmgrößen per CSS3-Media Queries. (REM)
    In der Index Seite will ich ( OHNE JS) ein FadeIn/FadeOut einbinden wie in dieser Testseite mit JS. Aber in CSS weil ich die Bildauflösung für die kleinen Geräte wie Handy, Ipad usw. nicht hin kriege
    Meine Testseite: www.sandrawies.com/test/index.html.
    Was mache ich falsch ? Weiss einer eine Lösung.??
    Hier der JS Code:
    <!-- Fade-In / Fade-Out für Reklame -->

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(e) {
    $('#outer').click(function() {
    $('#outer').fadeOut({queue:false,duration:1000});
    });
    $('#outer').fadeIn(2000).delay(10000).fadeOut(2000 );
    });
    </script>
    <style type="text/css">
    #outer {
    display:none;
    position: fixed;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-color: RGBA(0,0,0,0.6);
    }
    #outer #inner {
    opacity:1.0;
    position:relative;
    margin:auto 0;
    top:50vh;
    text-align:center;
    }
    #inner img {
    margin-top: -200px;
    box-shadow: 5px 5px 10px;
    }
    </style>

    <!-- Fade-In / Fade-Out für Reklame ENDE--> /HEAD
    ----------------------
    <!-- Fade-In / Fade-Out für Reklame im Body-->

    <div id="outer">
    <div id="inner">
    <img src="images/fenster/xmas_2016_600.jpg" width="424" height="600" border="0" alt="Monat Juni 2016">
    </div>
    </div> /HTML
    ----------
    Danke für ne Hilfe !!

  • #2
    AW: FadeIn/FadeOut in CSS

    verstehe nicht was JavaScript mit deinem Responsiveproblem zutun hat aber ein Fade kannst du in CSS so bauen:

    .base {transition: opacity 2;opacity:1}
    .base.fadeOut {opacity:0}

    Kommentar


    • #3
      AW: FadeIn/FadeOut in CSS

      Ansich: kein Problem.
      Ich will nur so wenig wie möglich JS auf der Seite einsetzen.
      Und kriege das nicht hin.
      Hat einer sein JS ausgeschaltet, erscheint die Anzeige nicht.
      Die soll Ja : einblenden, stehen bleiben und dann automatisch ausblenden, aber wie gesagt in CSS.
      Und das kriege ich wieder nicht hin.
      Aber Danke für den Ansatz.
      Wäre Fro wenn einer eine komplette Lösung parat hätte.

      Kommentar


      • #4
        ALL-INKL.COM - Webhosting Server Hosting Domain Provider
        AW: FadeIn/FadeOut in CSS

        Die soll Ja : einblenden, stehen bleiben und dann automatisch ausblenden, aber wie gesagt in CSS.
        Mit einer CSS-Animation kein Problem:
        Code:
                <span id="mytext">Text</span>
                <style>
                    #mytext {
                        opacity: 0;
                        animation: fadeinout 10s;  
                    }
                    @keyframes fadeinout {
                      0% {
                        opacity: 0;
                      }
                      20% {
                        opacity: 1;
                      }
                      80% {
                        opacity: 1;
                      }
                      100% {
                        opacity: 0;	
                      }
                    }
                </style>

        Kommentar

        homepage-forum.de - Hilfe für Webmaster! Statistiken

        Einklappen

        Themen: 56.539   Beiträge: 427.605   Mitglieder: 28.120   Aktive Mitglieder: 46
        Willkommen an unser neuestes Mitglied, Balle.

        Online-Benutzer

        Einklappen

        132 Benutzer sind jetzt online. Registrierte Benutzer: 2, Gäste: 130.

        Mit 2.057 Benutzern waren am 14.07.2019 um 12:45 die meisten Benutzer gleichzeitig online.

        Die neuesten Themen

        Einklappen

        Die neuesten Beiträge

        Einklappen

        Lädt...
        X