kostenloser Webspace werbefrei: lima-city


Button erst nach bestimmter Zeit einblenden

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    computergottshomepage

    computergottshomepage hat kostenlosen Webspace.

    Hi,

    ich suche eine Möglichkeit, dass ein Button erst eingeblendet wird, wenn man z.b. 5 Sekunden auf der Seite war.Hoffe ihr könnt mir nen code dazu geben?

    Danke
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. willstdueswissen

    Kostenloser Webspace von willstdueswissen

    willstdueswissen hat kostenlosen Webspace.

    Mit window.setTimeout("neu()", 5000);
    Das sähe dann so aus:

    <head>
    <style>
    .Buttonunsichtbar{
    position:absolute;
    display: none;
    }
    
    .Buttonsichtbar{
    position:absolute;
    }
    </style>
    <script>
    function buttonsichtbar(){
    document.getElementById("Button").className="Buttonsichtbar";
    }
    window.setTimeout("buttonsichtbar()", 5000);
    </script>
    </head>
    <body>
    <input type="button" id="Button" value="Klick Mich" class="Buttonunsichtbar">
    </body>


    Beitrag zuletzt geändert: 4.1.2014 18:45:47 von willstdueswissen
  4. Geht auch nur mit CSS:
    @keyframes zeigedich{
    from {opacity:0;height: auto;}
    to {opacity:1;height: auto;}
    }
    
    @-webkit-keyframes zeigedich{
    from {opacity:0;height: auto;}
    to {opacity:1;height: auto;}
    }
    #button{
    opacity:0;
    height: 0;
    animation-name: zeigedich;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-delay: 5s;
    animation-iteration-count:1;
    animation-play-state: running;
     
    -webkit-animation-name: zeigedich;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-delay: 5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-play-state: running;
    }


    Ganzes Beispiel: http://codepen.io/anon/pen/itGeF


    Browser Support: http://caniuse.com/css-animation
  5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!