Transition beim Laden der Seite

Hallo zusammen,

ich möchte das eine Überschrift beim Laden der Seite langsam per Transition erscheint. Dazu habe ich folgenden Code geschrieben:

PHP-Code:

---

<h1>
<a href="">
<span class="headline">Headline</span>
<img src="files/content/fotos/colorbar.svg">
<span class="subheadline headline">Unterüberschrift</span>
</a>
</h1> 


---

CSS:

PHP-Code:

---

opacity: 1;
    transition-duration: 2400ms;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); 


---

JS

PHP-Code:

---

<script>
$( "span" ).addClass( "headline" );
</script> 


---

Leider funktioniert die Transition so nicht. Kann mir jemand da einen Tipp geben?

Eigentlich brauchst du dafür kein JS.Allein die CSS Transition müsste hier reichen wenn die Klasse zugewiesen ist.

Zitat:

---

Zitat von Kahmoon

Eigentlich brauchst du dafür kein JS.Allein die CSS Transition müsste hier reichen wenn die Klasse zugewiesen ist.

---

Ok. Habe der Klasse .headline und .subheadline die Transition wie folgt zugewiesen:

PHP-Code:

---

.headline
{
opacity: 1;
transition-duration: 2400ms;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
} 


---

klar die präfixe fehlen noch. Aber im Firefox müsste es doch dann funktionieren. In meinem Fall leider nicht.

Vielleicht hilft dir das hier weiter: https://fabriceleven.com/design/crea...-on-page-load/

oder hier https://daneden.github.io/animate.css/

Mal abgesehen davon, dass du die Prefixes vergessen hast, musst du mit CSS3-Animationen und Keyframes arbeiten (Prefixes nicht vergessen). Transitions verwendest du z.B. bei Hover.

Einfach mal nach "css3 animation on page load" oder so googlen. :)

PS: Vielleicht hilft dir dieses Beispiel weiter? http://codepen.io/chrissp26/pen/szoyk
Ich hoffe, ich habe dein Anliegen auch richtig verstanden.

Zitat:

---

Zitat von Kahmoon

Vielleicht hilft dir das hier weiter: https://fabriceleven.com/design/crea...-on-page-load/

---

Besten Dank für den Tipp. Hab es ausprobiert. Leider funktioniert es bei mir nicht.
Ich vermute es wird am opacity: 0; liegen

Mein Code:

PHP-Code:

---

@keyframes fadeIn { from { opacity:0; } to {opactiy:1; }}

h1 {
    margin:0 0 0 .5rem;
    padding:0;
    font-size:4rem;
    color:#333;
}

.fade-in {
    opacity: 0;
    animation: fadeIn ease-in 1;
    animation-fill-mode: forwards;
    animation-duration 1s;
}

.fade-in.headline {
    animation-delay: 0.7s;
} 


---

PHP-Code:

---

<h1 class="fade-in headline">
<a href="">
<span>headline</span>
<img src="files/content/fotos/colorbar.svg">
<span>subheadline</span>
</a>
</h1> 


---

Du hast die Browser-Prefixes vergessen und auch die Keyframes.

Die Keyframes findest du bei deinem Link ganz oben, sind blöderweise dort ausgegraut. Es handelt sich um diese Zeilen:

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

Mit Keyframes legst du zum einen den Namen der Animation fest, den du dann beim Selektor aufrufen musst, zum anderen gibst du an, zu welchen Zeitpunkten sich welche Eigenschaften wie verändern sollen.

Edit: Sorry, hab die Keyframes in deinem Code übersehen :o Eventuell fehlen dir nur die Prefixes.

Edit 2: Du hast einen Rechtschreibfehler "opactiy" :)

Zitat:

---

Zitat von monaco

ich möchte das eine Überschrift beim Laden der Seite langsam per Transition erscheint. ...
Leider funktioniert die Transition so nicht. Kann mir jemand da einen Tipp geben?

---

Ohne Keyframes:

Zuerst die Überschrift verstecken und die Transition schonmal aufsetzen

HTML-Code:

---

h2 {
  opacity: 0;
  transition: opacity 2.4s cubic-bezier(.39, .575, .565, 1) 1s;
}

---

So, jetzt ist das Dingen erstmal weg.

Zustand deklarieren für Sichtbarkeit

HTML-Code:

---

h2.show {
  opacity: 1;
}

---

Jetzt muss du die Klasse mit Javascript aufsetzen und zwar nachdem der DOM geladen ist, sonst wäre es wahrscheinlich zu früh. (jQuery Beispiel)

HTML-Code:

---

(function($) {
  $(document).ready(function() {

    $('h2').addClass('show');

  });
})(jQuery);

---

Ich habe mal H2 genommen anstatt SPAN, weil ich es in der Online-Demo getestet habe.

Für MooTools einfach den anderen Wrapper nehmen und den Selektor $$('h2').

oh mist. Dankeschön für den Hinweis. Das war's. Fehler verbessert.

Am besten du baust auch noch ein Fallback ein wenn JS deaktiviert ist.
Mit der Erweiterung [classjs] oder ein bischen JS kannst du die Klasse no-js setzen.

Code:

---

h2.show, .no-js h2 {
  opacity: 1;
}

---

Zitat:

---

Zitat von Kim

Am besten du baust auch noch ein Fallback ein wenn JS deaktiviert ist.
Mit der Erweiterung [classjs] oder ein bischen JS kannst du die Klasse no-js setzen.

Code:

---

h2.show, .no-js h2 {
  opacity: 1;
}

---

---

Dankeschön für den Tipp ;)

Hätte da noch ne spezifische Frage zu jquery. Habe leider nur rudimentäre Kenntnisse. Es beim scrollen einfach die diversen Blöcke mit den Klassen .slideap, slidegv etc. eingeblendet werden.
So funktioniert es:

PHP-Code:

---

$(document).ready(function() {
    $('.slideap').bind('inview', function(e, isInView, visiblePartX, visiblePartY) {
        if (isInView) {
            if (visiblePartY == 'both' || visiblePartY == 'bottom') {
                $('.slideap').css('visibility', 'visible');
                $('.slideap').addClass('animated fadeInLeft');
                $('.slideap').unbind('inview');
            }
        }
    });
});

$(document).ready(function() {
    $('.slidegv').bind('inview', function(e, isInView, visiblePartX, visiblePartY) {
        if (isInView) {
            if (visiblePartY == 'both' || visiblePartY == 'bottom') {
                $('.slidegv').css('visibility', 'visible');
                $('.slidegv').addClass('animated fadeInLeft');
                $('.slidegv').unbind('inview');
            }
        }
    });
}); 


---

Aber kann ich das auch verkürzt schreiben? Ich habe schon versucht die diversen Klassen in eine funcktion zu packen, also so:

PHP-Code:

---

(document).ready(function() {
    $('.slideap, slidegv').bind('inview', function(e, isInView, visiblePartX, visiblePartY) {
        if (isInView) {
            if (visiblePartY == 'both' || visiblePartY == 'bottom') {
                $('.slideap, .slidegv').css('visibility', 'visible');
                $('.slideap, .slidegv').addClass('animated fadeInLeft');
                $('.slideap, .slidegv').unbind('inview');
            }
        }
    });
}); 


---

Aber das funktioniert leider nicht

Ich weiß zwar nicht, was du da machst, aber hier ne kleine Korrektur

Code:

---

$('.slideap, .slidegv')

---