Verschwommene pixelige benutzerdefinierte Einblendung
Ich möchte eine benutzerdefinierte Einblendung mit jQuery oder JS erstellen. Ich möchte, dass das Überblenden übertrieben wird und von sehr verschwommen, zu pixelig, bis zu dem klaren, klaren Bild geht. Einmaliges Laden der Seite.
Dies ist für ein Bild. Ja, traditionell gemacht, indem ich ein animiertes gif mache, nehme ich an. Aber kann ich den Effekt mit jQuery schreiben?
Beim Laden der Seite. Ergreifen Sie das Bild #div & gt;
Bild lädt verschwommen & gt; dann pixelates in & gt; und dann wird das klare Original-HQ-Bild aufgelöst.
3 Antworten
Um ein Bild zu pixeln, können Sie die Leinwand direkt auf einfache Weise verwenden (hier vorausgesetzt, dass das Bild bereits geladen wurde):
%Vor%Sie können den Regler unten verwenden, um verschiedene Größen und die Geschwindigkeit zu sehen, die für Ihren Übergang benötigt werden (verwenden Sie Chrome, um das Live-Update zu sehen, wenn Sie den Schieberegler bewegen) oder klicken Sie einfach auf den Animieren-Button.
Wenn wir die Interpolation (Bildglättung) ausschalten, erscheint das neue vergrößerte Bild blockartig. Diese Methode ist auch schneller als die meisten anderen näherte hauptsächlich wegen Bildglättung kann jetzt in den gängigen Browsern ausgeschaltet werden.
In dieser Antwort finden Sie eine ausführlichere Anleitung zum Ausschalten der Glättung in den meisten Browsern:
Bilder im Webbrowser sind leicht verschwommen. Wie kann ich es deaktivieren?
Die letzte drawImage verwendet einen ausgeschnittenen Teil der Quelle (hier: Canvas selbst). Weitere Informationen hierzu finden Sie hier. Methode.
Was den Unschärfe-Effekt betrifft, würde ich Ihnen empfehlen, das Bild vor dem Verwischen zu verwischen, da dieser Prozess einen großen Overhead hat und die Pause auf den meisten Computern bemerkbar ist.
Falls Sie das Bild noch "live" verwischen möchten, können Sie diesen Stapel-Blur verwenden:
Ссылка
Sie könnten Pixelate schließen von David DeSandro verwenden. Der Pixelator ist ein gutes Beispiel dafür.
Ich würde diesen Link überprüfen und von dort aus gehen. Der beste Teil von Javascript ist, dass es sehr lasche Ideen hat.
Tags und Links javascript jquery css