Logo Erscheinen lassen

[Xcheta]

Hi leute ich suche jetzt schon länger ne möglichkeit ein Logo bzw. ein Text erscheinen zu lassen. Er soll nach dem anklicken der Startseite nach ca 5. langsam erscheinen also erst ganz "leicht sichtbar" und dann eben am schluss "mit vollen farben". Kann man so etwas in CSS realisieren oder sollte man eher auf etwas anderes zurückgreifen ?

 

[Chronos]

Dazu kannst du keyframes und JavaScript nutzen:
Edit: mach ich gleich ^^
Edit 2: Wörter und so

<div class="box"></div>

CSS:
Der Name deines keyframes musst dann in der hinzuzufügenden Klasse als Name aufgezählt werden.

.box {
    opacity: 0;
    width: 150px;
    height: 150px;
    background: gray;
}

@-webkit-keyframes blender { 
    from  { opacity: 0; }
      to  { opacity: 1; }
}

.blend {
    opacity: 1;
 
    -webkit-animation-name: blender;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear; 
    -webkit-animation-delay:  5s; 
    -webkit-animation-iteration-count: 1;
}

JavaScript (dafür brauchst du jQuery so wie ich es gemacht habe, aber eigentlich geht es nur darum die Klasse hinzuzufügen).

(function($, window, document) {
    $(function() {
        $('html').on({
            "click": function() {
                $('.box').addClass('blend');
            }
        });
    });
}(window.jQuery, window, document));

 

[pax]

Edit: mach ich gleich ^^
Edit 2: Wörter und so

rofl...


Keyframes kenn ich noch gar nicht. Sieht sehr proprietär aus. Heutzutage gibts dafür doch transitions. Belehr mich wenn ich irre :)

.box {
    opacity: 0;
    width: 150px;
    height: 150px;
    background: gray;
    transition: all 0.4s ease-out;
}

.box.blend {
     opacity: 1;
}

Wenn mans noch abwärtskompatibler braucht:

    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;

 

[scbawik]

rofl...


Keyframes kenn ich noch gar nicht. Sieht sehr proprietär aus. Heutzutage gibts dafür doch transitions. Belehr mich wenn ich irre :)

.box {
    opacity: 0;
    width: 150px;
    height: 150px;
    background: gray;
    transition: all 0.4s ease-out;
}

.box.blend {
     opacity: 1;
}

Wenn mans noch abwärtskompatibler braucht:

    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;

Nene, das ist schon Zukunft.
Mach das mal mit transitions:
http://tobiasahlin.com/spinkit/

 

[Chronos]

Nene, das ist schon Zukunft.
Mach das mal mit transitions:
http://tobiasahlin.com/spinkit/

Jo jo schon klar, aber dann muss er sich erst etwas ausdenken um das "nach x Sekunden" hinzubekommen, und das kann keyframes ja quasi eingebaut.
Das es anders geht ist schon klar :)

 

[scbawik]

Jo jo schon klar, aber dann muss er sich erst etwas ausdenken um das "nach x Sekunden" hinzubekommen, und das kann keyframes ja quasi eingebaut.
Das es anders geht ist schon klar :)

War nicht an dich gerichtet, sondern an @pax.
Jedenfalls gibt es auch transition-delay:
https://developer.mozilla.org/de/docs/Web/CSS/transition-delay

transition: opacity 1s 5s;

 

[Chronos]

War nicht an dich gerichtet, sondern an @pax.
Jedenfalls gibt es auch transition-delay:
https://developer.mozilla.org/de/docs/Web/CSS/transition-delay

transition: opacity 1s 5s;

Oh okay cool danke dafür. Iterationen wären dann noch cool, das geht dann wohl wirklich nur mit Keyframes (in denen es übrigens nicht direkt eine Pause zwischen Iterationen gibt).

 

[Xcheta]

Danke leute ihr seid echt der hammer hat geklappt =)