JavaScript Text beim scrollen animiert verkleinern

[hemorieder]

Hey,

ich baue gerade eine Mobilseite mit jQuery.

Dort lasse ich als Logo einen Text einblenden, sagen wir in Schriftgröße 20.

Sobald man dann scrollt soll der Text nun in Schriftgröße 10 sein.
Das ganze realisieren ich bereits so:

$(document).on("scroll",function(){
   if($(document).scrollTop()>20)
   {
        $("header").removeClass("large").addClass("small");
   } 
   else
    {
        $("header").removeClass("small").addClass("large");
    }
});

und das ist der css code

header.small {line-height:3pt; font-size:10pt; padding: 0pt 0pt 5pt 5pt}
header.large {line-height:3pt; font-size:20pt; padding: 0pt 0pt 5pt 5pt}

nun passiert logischerweise gerade folgendes:

Ich scrolle und "plop" ist der Text klein.

Das ganze will ich aber nun "smooth". Also das der text langsam kleiner wird und nicht so plötzlich.
Ich weiß das animate() gibt, nur das ist mir irgendwie etwas zu komplex, bzw versteh ich das nicht.

Das muss doch irgendwie einfach möglich sein.

So ala:

$("header").SMOOTH.removeClass("large").SMOOTH.addClass("small");

Habt ihr eine Idee ?

lg

 

[Yuuri]

Entweder du machst es mittels JQuery und animate oder du fügst der entsprechenden CSS-Deklaration eine Animation hinzu.

 

[hemorieder]

würde das mit der css animation laufen ? oder wie würde das mit jquery und animate easy gehen, ich finde immer nur so ultra komplexe sachen

 

[DasBoeseLebt]

Das ganze kannst du auch mit CSS3 realisieren, ansonsten bietet dir JQuery auch die Funktion animate() an.

http://api.jquery.com/animate/
http://www.w3schools.com/css/css3_animations.asp

$(document).on("scroll",function(){
   if($(document).scrollTop()>20)
   {
       $( "header" ).animate({ "font-size": "1em" }, "slow" );
   } 
   else
    {
        $( "header" ).animate({ "font-size": "2em" }, "slow" );
    }
});

Dürfte doch schon reichen? (Natürlich die Größen noch anpassen)

 

[Daaron]

JavaScript - Mumpitz... Schriftgrößen reagieren auf CSS3 Transitions. Ignoriert man veraltete Browser ist das also ein Einzeiler.

 

[hemorieder]

und würde der spaß mit css3 aussehen ?

@DasBoeseLebt
Danke, ja das klappt auch. Allerdings nicht wirklich konsistent. Wenn mann z.b beim iPhone auf die Uhr drückt, es also ohne zu scrollen nach oben geht, wird die Schrift nicht mehr groß.

Das die Schrift wieder groß wird wenn man oben ist, klappt z.b bei Android garnicht, oder nur sehr verzögert


Edit:

Mein Script klappt sehr zuverlässig, nur leider springt es halt, kann man nicht mein script einfach nur animieren lassen ? ohne das die funtktion ansich verändert wird ?

also

$("header").SMOOTH.removeClass("large").SMOOTH.addClass("small");

 

[Daaron]

Ich halt das bei solchen Sachen immer so, dass ich nicht direkt per JS das CSS manipuliere, sondern mit addClass/removeClass eine CSS-Klasse umschalte. Dadurch trennt man sauber die reinen Styles von der dahinter liegenden Logik.

Um also die Variante von DasBoeseLebt aufzugreifen: ersetze jeweils den Animate-Aufruf durch add/removeClass mit ner aussagekräftigen Klasse. Nennen wir sie mal "toggle".

Der Rest ist dann einfach. Nennen wir das Objekt, das wir verändern wollen, mal #container...

/*CSS*/
#container {font-size: 1em; transition: font-size 0.5s;}
#container.toggle {font-size: 0.5em;}

Zusammen mit dem angepassten JS-Code oben hat man hier direkt ne butterweiche Animation. transition bietet noch viel mehr Möglichkeiten. Die einfachste wäre, statt "font-size" eben "all" anzugeben. Jetzt kann man in einem Abwasch jeden animierbaren Parameter bearbeiten: Höhen, Breiten, Schriftgröße, Abstände, Farben, Opacity, Positionen,... (nur: kein display und keine "auto"-Werte)

 

[Teisi]

Sers,

Ich machs immer noch Mit jQuery animate Warum? Ganz einfach ie8, der is leider immer noch wahnsinnig verbreitet...
Nachteil ohne JavaScript funktioniert bei mir fast garnix, aber wer hat das heute schon noch deaktiviert? Gerade bei Mobile devices...

Außerdem bin ich noch ned sicher was Ich von dem ganzen CSS3 und css4 halten soll... Ich meine noch ist es besser getrennt: strucktur html, Design CSS, Funktionen bzw Animationen PHP und JavaScript... Aber Mit dem neuen CSS vermischt sich wieder alles etwas...

Naja mal sehen Wo die Reise hin geht...

Ach Ja vielleicht hier auch ganz interessant: bei Font-size statt px bzw pt probiert mal vm bzw vn etc...

Grüße

 

[Daaron]

Ich machs immer noch Mit jQuery animate Warum? Ganz einfach ie8, der is leider immer noch wahnsinnig verbreitet...

Ähm... Scheiß drauf? Mal ganz ehrlich, sieht man die Animation? Ist die so wichtig? Und sind dir Idioten mit veralteten Browsern so wichtig?

Denk mal logisch: Was für Menschen nutzen IE6-8? Genau: Alte Knacker, Vollidioten und Opfer restriktiver Firmenpolitiken. Die ersten geben einen Scheiß auf Optik, für die könnten Webseiten auch wie ne Ausgeburt der 90er aussehen. DIe nächste Gruppe verdient kein Mitleid und die letzte Gruppe hat im Zweifel kein JavaScript an.

Nachteil ohne JavaScript funktioniert bei mir fast garnix, aber wer hat das heute schon noch deaktiviert?

Stichwort Barrierefreiheit. Stichwort NoScript & Snowden-Paranoia.

Außerdem bin ich noch ned sicher was Ich von dem ganzen CSS3 und css4 halten soll...

Es gibt kein CSS4. CSS3 ist hingegen DER Standard.

Ich meine noch ist es besser getrennt: strucktur html, Design CSS, Funktionen bzw Animationen PHP und JavaScript... Aber Mit dem neuen CSS vermischt sich wieder alles etwas...

Falsch. Ist eine Animation denn KEIN Design? Wenn ich über einen Link fahre und der dann unterstrichen dargestellt wird, dann ist das eine Animation mit ner Dauer 0. Trotzdem ist so etwas seit Urzeiten möglich, a:hover{} geht sogar im IE6. Animationen sind pures Design. Der einzige Unterschied zu früher ist, dass CSS3 eben nicht nur ne Animation mti Dauer 0 sondern mit flexibler Dauer, und somit sanftem Übergang, ermöglicht.
Es gibt nur einen Aspekt im CSS (2.0), die ich als Vermischung leidlich gelten lasse: :before & :after. Das hängt dann aber davon ab, wie man den Kram verwendet.

Und was ist mit CSS3 calc()? Muss ich wirklich jede Größen-Berechnung durch JavaScript schießen? Angenommen, ich habe ein Objekt von 400px Breite, dass aber 1em Margin links und rechts benötigt. Wie breit ist das Objekt? Genau: calc(400px - 2em); Brauch ich dafür JavaScript? Ganz sicher nicht.

JavaScript ist NICHT für Design zuständig, sondern für Programm-Logik. Manche Logik hat Einfluss auf das Design, aber das eine schließt das andere nicht aus. JS ist in erster Linie dazu da, den DOM zu manipulieren. DOM-Manipulation in Echtzeit kann sonst keiner.

Aber gerade wenn du so auf Mobilgeräte achtest, solltest du unnötiges JS vermeiden. Warum? Weil JS immer mehr Rechenzeit benötigt als CSS. Eine jQuery-Animation ist intern übrigens so oder so eine CSS3 Transition. Es steht nur eben nicht explizit da... Warum verwenden die JS-Frameworks CSS3 als Basis? Weil CSS3 weniger Leistung kostet UND perfekt durch GPUs beschleunigt werden kann.

Ach Ja vielleicht hier auch ganz interessant: bei Font-size statt px bzw pt probiert mal vm bzw vn etc...

Kann man machen, muss man aber nicht. Das sorgt für ein ziemlich unnatürliches Handling. Tatsächlich gebe ich quasi gar keine definitiven Schriftgrößen mehr an sondern verwende ausschließlich em. Alles ist im Verhältnis zur Betriebssystem-Schriftgröße -> keine Medienbruch für User mit speziellen Einstellungen.

 

[Teisi]

Warum? Weils der kunde wünscht, das der ie8 Unterstützung findet... also wirds gemacht...

Och es gibt css4 zumindest in ansätzen...

Ja css ist schneller, trotzdem jede design änderung folgt einer gewissen logik (wann, wie und warum es sich verändert) man reagiert quasi auf die benutzer bedienung, man manipuliert zum beispiel ein ein und ausfaden, das ist vielleicht nur ein einzeiler und trotzdem kann man dies schon als programmablauf bezeichnen... dafür war css ursprunglich meines wissen nie gedacht... deswegen bin ich mir ned sicher was ich davon halten soll... :-)

Wenn ich sage das bei mir quasi nix funktioniert meine ich: die webseite an sich funktioniert schon, aber gewisse Effekte gehen nicht oder sind nicht so schön....

Zu fontsize, findest du? Weiß nicht, bin ich gerade noch am rumspielen....:-)

 

[Daaron]

Warum? Weils der kunde wünscht, das der ie8 Unterstützung findet... also wirds gemacht...

Dann gibts dafür n Fallback. Es macht keinen Sinn, moderne Browser mit altem Schrott zu belasten. Modernizr oder Conditional Comments sind hier der richtige Weg.

Och es gibt css4 zumindest in ansätzen...

Ja, du weißt alles besser... besonders als ein Mitglied der CSS Working Group des W3C

Ja css ist schneller, trotzdem jede design änderung folgt einer gewissen logik

Nur weil CSS3 tatsächlich sogar Turing-vollständig ist, heißt das nicht, dass es die Trennung von Syntax, Design und Logik sprengt.
Tatsächlich ist sogar die Vererbung (Cascading... ne?) eine Programmlogik.

Weißt du, was jQuery Animate macht? Es nimmt Ausgangs- Endwert, guckt sich die nötigen Zwischenschritte an und ändert dann Frame für Frame den jeweiligen CSS-Wert als Inline-Style.
Was macht CSS3? Du übergibst Anfangs- und Endwert. Der Browser ermittelt jetzt die notwendigen Zwischenschritte und wendet diese Frame für Frame an, bloß ohne über einen Inline-Style zu gehen sondern eine interne Variable zu nutzen.

deswegen bin ich mir ned sicher was ich davon halten soll... :-)

Genau deshalb sag ich dir als Profi auch, was du davon zu halten hast: CSS3 ist DER Weg. Schreib meinetwegen Fallbacks, wenn es zwingend nötig ist. Aber CSS3 ist immer der erste Ansatz. Es ist leichter, schneller, kompatibel, flexibel,...

Wenn ich sage das bei mir quasi nix funktioniert meine ich: die webseite an sich funktioniert schon, aber gewisse Effekte gehen nicht oder sind nicht so schön....

Wie gesagt: Animate() macht nichts anderes als CSS3, nur mit viel mehr Rechenaufwand und viel nichtvorhandener GPU-Nutzung.

Ich habe bei einem aktuellen Projekt eine Mischung aus CSS3- und JS-Animationen. JS wird hierbei nur da eingesetzt, wo CSS einfach nicht geht (z.B. Größen ohne definierten Start- und Endwert, oder bei Slidern). Während die JS-Geschichten auf Smartphones deutlich ruckeln, läuft CSS vollkommen flüssig. Die Unterschiede sind gewaltig.

 

[Teisi]

also ich verstehe was du meinst, mir gehts ja auch aufn sack, quasi kein html5 oder css3 zu verwenden...
und natürlich gibt es diverse möglichkeiten die page trotz verwendung aktueller techniken im ie vernünftig darzustellen...
nur eines vergisst du dabei, entweder geht es auf die performance im ie... weil man diverse scripte nach lädt, also nur im ie... was wieder nicht funktioniert wenn javascript deaktiviert ist... oder man macht ne eigene page, nachteil... hoher aufwand <- zahlt kein mensch, oder man lässt gewisse design-funktionen einfach weg... was aber irgendwie auch ned sinn der sache is, oder?

naja dauert ja hoffentlich nimmer lange, jetzt wo xp abgelaufen is... ruhe in frieden... endlich...

also bisher hatte ich noch keine echten performance probleme aufgrund von javascript... das liegt für gewöhnlich an den HQ-Bildern, die verwendung finden...

zu css4:
hmm also wenn ich den ersten satz scho lese, "es wird nie ein css4 geben", hört sich das eher nach bill gates an...

also es mag ja technisch gesehen sein, das was in deinem link steht... ganz realistisch ist das aber nicht...
denn wenn man von css2 3 oder 4 redet meint man eher den funktionsumfang und es ist nunmal so das z.b. der ie 8 quasi kein css3 kann und schon garned die quasi css4 dinge... ein ie10 kann zwar css3 wird aber trotzdem mit den darauffolgenden änderungen an css der macher, so seine probleme haben, bzw. uns bereiten.

so gesehen kann man finde ich, schon von verschiedenen versionen von css reden... demnach gibt es auch ein css4 oder hab ich was falsch verstanden?

 

[Daaron]

und natürlich gibt es diverse möglichkeiten die page trotz verwendung aktueller techniken im ie vernünftig darzustellen...

Die meisten Sachen haben automatisch "sanfte" Fallbacks. Kein border-radius, kein box-shadow, kein transition? Ja und? Sind die Ecken halt eckig, gibts halt keine Schatten und statt in 0.3s ändern sich die Werte sofort. Merkt kein Schwein.

nur eines vergisst du dabei, entweder geht es auf die performance im ie... weil man diverse scripte nach lädt, also nur im ie... was wieder nicht funktioniert wenn javascript deaktiviert ist...

Wer einen veralteten Browser verwendet UND zusätzlich noch Fallbacks auf JS-Basis blockt, dem ist einfach nicht zu helfen. Das sind keine relevanten Marktanteile.
Mach das Netz besser, bau Seiten mit modernen Techniken udn biete Notfall-Fallbacks an.

naja dauert ja hoffentlich nimmer lange, jetzt wo xp abgelaufen is... ruhe in frieden... endlich...

Minimal-Browser für Vista: IE7.
Minimal-Browser für Server 2k3: IE6
Minimal für Win7: IE8
Also: Bevor nicht Win7 ebenfalls ausgelaufen ist, wird DAS gar nichts bringen.

hmm also wenn ich den ersten satz scho lese, "es wird nie ein css4 geben", hört sich das eher nach bill gates an...

HTML5 und CSS3 sind eben keine klassischen Versionen. Die Dinger sind die letzte klassische Version. Ab jetzt läuft es als "Living Standard", der sich modular erweitert.

denn wenn man von css2 3 oder 4 redet meint man eher den funktionsumfang

Falsch. CSS1, 2 und 2.1 sind jeweils in sich geschlossene, monolithische Versionen. CSS3 ist ein neues Konzept, bei dem es nur noch modular weiter geht. Daher gibt es eben kein CSS4, es ist nicht nötig. Die monolithische Versionsstruktur früher hat dafür gesorgt, dass es ewig und drei Tage gedauert hat, bis neue Features standardisiert werden konnten. Erst musste überlegt werden, was in das nächste "major release" soll. Das musste sich dann lohnen, also hat sichs verzögert, und verzögert, und verzögert.
Jetzt laufen HTML und CSS über modulare Konzepte. Wenn ein neues Feature/Feature-Level reif für die Standardisierung ist, dann wird es eben standardisiert. Es muss nicht auf andere Features gewartet werden. Daher kommen eben in HTML auch bald neue Spielzeuge wie die Web Components... ohne, dass erst ein HTML6 durch die Standardisierung muss.

Analog dazu ist der IE11 übrigens auch keine monolithische Version. Tatsächlich haben IE10 und 11 die Möglichkeit, neue Features zu erlernen.

und es ist nunmal so das z.b. der ie 8 quasi kein css3 kann und schon garned die quasi css4 dinge

Irrelevant. Das Web ist darwinistisch. Mach den Leuten klar, dass ihr Holzklasse-Browser deine Seite nicht korrekt darstellen kann und ihnen wichtige Features deiner Seite entgehen werden. FF, Chrome & Opera sind kostenlos. IE11 läuft unter allem aktuellen außer Vista.
Außerdem: Der Löwenanteil der Features ist nur Show. Alles was keine Show ist, kann man mit Werkzeugen wie Shim nachrüsten.

... ein ie10 kann zwar css3 wird aber trotzdem mit den darauffolgenden änderungen an css der macher, so seine probleme haben, bzw. uns bereiten.

Wieder: Irrelevant. Das Netz lebt, es wächst, es verändert sich, es lernt neue Tricks. Wer bei veraltetem Schrott hängen bleiben will, der darf sich nicht beschweren, wenn etwas nicht korrekt dargestellt wird.
Wichtig ist: Man muss dem Kunden verklickern, WIESO es nicht geht und WIESO das vollkommen egal ist.

so gesehen kann man finde ich, schon von verschiedenen versionen von css reden... demnach gibt es auch ein css4 oder hab ich was falsch verstanden?

Nein, man redet von Feature Levels.
Die Selektor-Engine ist z.B. schon steinalt, sie existiert logischerweise seit jeher. Sachen wie div, .class, #id gibts seit Level 1. Jedes Mal, wenn neue Selektoren hinzu gefügt wurden, wird das Feature Level eben angehoben. IE10/11 unterstützen Selector Level 3. Chrome/FF können sogar schon Teile von Selector Level 4, wie z.B. :any().

 

[Teisi]

ahhjaa...

na wieder was gelernt, schön...
mercy