CSS3 Übergänge mit Anker

Ich kann nicht verankern, den übergang zur Arbeit! Bitte sagen Sie mir, was Sie denken.

Hier ist der CSS -

a.transition {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

Und hier ist der HTML -

<h1 id="intro">Let's Build Something... </h1>
<h1 id="intro2"><a class="transition" href="#create">Together</a>.</h1>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<p><a name="create" class="transition">My name is Geoff Phillips, and I'm an innovator. What can I create for you?<a/></p>
Was den übergang..? Sie sind sich nicht jedem hinzufügen von css-Eigenschaften zu verwandeln über. Versuchen Sie, ein hover pseudo-Klasse mit Eigenschaften Farbe (sowie eine Kopie der übergang Eigenschaften).
Ich glaube, Sie versuchen zu animieren, das Fenster scrollen, um den Anker, wenn ein link angeklickt wird, korrekt? Dies ist nicht möglich, mit CSS.

InformationsquelleAutor Nash Bridges | 2012-09-28

  1. 8

    Ich glaube nicht, dass Sie es tun können, nur mit CSS. Hier ist eine Funktion um es zu erreichen, mit der jQuery:

    $('a[href^=#]').on("click",function(e){
    var t= $(this.hash);
    var t=t.length&&t||$('[name='+this.hash.slice(1)+']');
    if(t.length){
        var tOffset=t.offset().top;
        $('html,body').animate({scrollTop:tOffset-20},'slow');
        e.preventDefault();
    }
});​

    Diese arbeiten mit jedem <a href="#any-id-or-name"> Anker.
    Demo.

    Zu machen, scrollen Sie schneller oder langsamer, ändern 'slow' zu 'fast' oder ein beliebiger numerischer Wert in Millisekunden.

    Ich habe versucht, die Umsetzung dieser (und das ist genau das, was ich brauchte), aber es immer noch nicht funktionieren. Es arbeitete in Ihrem demo, also ich bin mir nicht sicher, warum es funktioniert nicht auf meiner Website.
    Haben Sie jQuery in Ihre head Abschnitt? Fügen Sie diesen code: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
    Ja, das ist es. Vielleicht etwas anderes ist, bringt ihn bis. http://www.geoffphillips.me/version2.0
    Sorry, kopieren Sie den vollständigen code in meinem edit
    Das macht Sinn! Funktioniert immer noch nicht obwohl.

    InformationsquelleAutor Giona

  2. 0

    Blättern Sie, um jedes element einer Seite mit der scrollIntoView JavaScript-Methode. Es ist auf jedem element.
    document.getElementById("yourElement").scrollIntoView(); Blättern Sie zu yourElement. Mit Firefox kann man sogar scrollen Sie flüssig durch hinzufügen {behavior:'smooth'} als Parameter der Methode. Dies ist nicht cross-browser-leider.

    Wenn Sie möchten, eine cross-browser-VanillaJS lib, würde ich empfehlen, Smooth-scroll

    InformationsquelleAutor Fla

Schreibe einen Kommentar