Eine Reihe nützlicher jQuery Ajax CSS3-Funktionen für Webentwickler. Interaktive Karte mit Tooltips „Tiny Scrollbar“-Plugin
Adaptives oder, wenn Sie es vorziehen, responsives Webdesign ist mittlerweile nicht nur ein weiterer Designtrend, sondern bereits ein gewisser Standard für die Website-Entwicklung, der die Vielseitigkeit von Websites und eine harmonische visuelle Wahrnehmung auf den Bildschirmen verschiedener Benutzergeräte gewährleistet. In jüngerer Zeit, während der Entwicklung adaptive Vorlage, hatte ich verschiedene Schwierigkeiten damit, bestimmte Schieberegler und Bildergalerien zu integrieren, ohne den gesamten Designstil zu stören. Heutzutage ist alles viel einfacher, es gibt eine Vielzahl vorgefertigter Lösungen im Internet und was besonders erfreulich ist, ist, dass die meisten davon frei verfügbar und Open Source sind.
Aufgrund der Vielfalt der angebotenen Tools habe ich einen kurzen Überblick über die bemerkenswertesten Entwicklungen responsiver jQuery-Image-Slider zusammengestellt, die in letzter Zeit erschienen sind und ohne Einschränkungen verbreitet werden, d. h. absolut frei.
WOW-SliderResponsiver jQuery-Bildschieberegler mit einer großen Auswahl an visuellen Effekten (Rotation, Flyout, Unschärfe, Spiralen, Jalousien usw.) und vielem mehr vorgefertigte Vorlagen. Mit dem integrierten Assistenten zum Einfügen von Seiten in WOW Slider können Sie einfach und mühelos in wenigen Minuten beeindruckende Diashows erstellen. Die Website des Entwicklers enthält die gesamte notwendige Dokumentation zum Einrichten und Verwenden des Plugins auf Russisch sowie hervorragende Live-Beispiele für die Funktionsweise des Plugins. Auch separat zum Download verfügbar Wordpress-Plugin und ein Modul für Joomla. Ich bin sicher, dass dieser wunderbare Slider vielen gefallen wird, sowohl Anfängern als auch erfahrenen Webmastern.
HiSliderHiSlider – HTML5, Jquery-Slider und Bildergalerie, absolut kostenloses Plugin für den persönlichen Gebrauch auf Websites mit gängigen Systemen – WordPress, Joomla, Drupal. Mit Hilfe dieses einfachen, aber sehr funktionalen Tools können Sie ganz einfach erstaunliche und lebendige Diashows, spektakuläre Präsentationen und Ankündigungen neuer Nachrichten auf den Seiten Ihrer Websites erstellen. Mehrere vorgefertigte Vorlagen und Skins für den Slider, erstaunliche Effekte für den Inhaltsübergang, unterschiedliche Ausgabe Multimedia-Inhalte: , Videos von YouTube und Vimeo, flexible Benutzereinstellungen, etc...
Nivo Slider ist ein guter alter, allen Kennern bekannter und einer der schönsten und benutzerfreundlichsten Bild-Slider. Das JQuery Nivo Slider-Plugin kann kostenlos heruntergeladen und verwendet werden und ist unter der MIT-Lizenz lizenziert. Es gibt auch ein separates Plugin für WordPress, aber leider ist es bereits kostenpflichtig und Sie müssen 29 US-Dollar für eine Lizenz bezahlen. Es ist besser, ein wenig mit den WP-Themedateien zu zaubern und die kostenlose jQuery-Version des Nivo Slider-Plugins an Ihren Blog anzuhängen, da es im Internet zahlreiche Informationen dazu gibt.
Was die Funktionalität betrifft, ist alles in bester Ordnung. Die jQuery v1.7+-Bibliothek wird für die Arbeit verwendet, schöne Übergangseffekte, einfach und sehr flexible Einstellungen, adaptives Layout, automatischer Bildzuschnitt und vieles mehr.
Die Idee des Sliders wurde von den Entwicklern inspiriert, die für ihren Präsentationsstil bekannt sind Apple-Produkte, bei dem sich mehrere kleine Objekte (Bilder) durch Klicken auf die ausgewählte Kategorie mit einem einfachen Animationseffekt verändern. Codrops stellt Ihnen ein detailliertes Tutorial zum Erstellen dieses Schiebereglers, ein vollständiges Layout des HTML-Markups, einen Satz CSS-Regeln und eine ausführbare Datei zur Verfügung jQuery-Plugin sowie ein wunderbares Live-Beispiel für die Verwendung des Schiebereglers.
Vollbild-Bild-Slider mit JQuery und CSS3 + ausführliches Tutorial zur Integration des Plugins in Website-Seiten. Die Idee besteht darin, die geöffnete aktuelle Folie mit bestimmten Inhalten aufzuteilen, wenn zum nächsten oder vorherigen Inhalt gewechselt wird. Mithilfe von JQuery- und CSS-Animationen können Sie einzigartige Übergänge zwischen Folien erstellen. Das responsive Slider-Layout stellt sicher, dass es auf allen Bildschirmen gleich gut aussieht verschiedene Arten Benutzergeräte.
Ein Inhaltsschieberegler, dessen Breite und Höhe automatisch an die Größe des übergeordneten Containers angepasst wird, in dem er sich befindet. Ganz einfach zu implementieren und flexibel in den Einstellungen, der Slider läuft auf JQuery, mit Navigation am unteren Rand, bei Änderung der Bildschirmgröße nach unten wird die Navigation in Form von Icons angezeigt. Sehr ausführliche Dokumentation (Erstellungs-Tutorial) und Live-Anwendungsbeispiele.
Eine experimentelle Version des Schiebereglers, die Bilder mit Übergängen aus der 3D-Ebene demonstriert. Die Bilder sind in zwei horizontale Stapel unterteilt, wobei die Navigationspfeile verwendet werden, um jedes nachfolgende Bild zu ändern und in den Anzeigestatus zu überführen. Im Allgemeinen nichts Besonderes, aber die Idee selbst und die Ausführungstechnik sind durchaus interessant.
Ein sehr einfacher, 100 % reaktionsfähiger jQuery-Bildschieberegler im Vollbildmodus. Die Funktionsweise des Schiebereglers basiert auf CSS-Übergängen (der Eigenschaft „transition“) in Verbindung mit der Magie von jQuery. Der Wert für die maximale Breite ist standardmäßig auf 100 % eingestellt, sodass sich die Größe der Bilder abhängig von Änderungen der Bildschirmgröße ändert. Es gibt keine besonderen Animationseffekte oder Schnörkel im Design, alles ist einfach und auf eine störungsfreie Bedienung ausgelegt.
Der Name spricht für sich, dies ist vielleicht einer der leichtesten und minimalistischsten jQuery-Bildschieberegler, die mir begegnet sind (1-KB-Plugin). ResponsiveSlides.js ist ein kleines JQuery-Plugin, das Diashows mithilfe von Elementen in einem Container erstellt. Funktioniert mit einer Vielzahl von Browsern, einschließlich aller Versionen von IE – der berühmten Fortschrittsbremse, ab IE6 und höher. Aus Gründen der Zuverlässigkeit verwendet die Arbeit CSS3-Übergänge in Verbindung mit Javascript. Einfaches Layout mit einer ungeordneten Liste, Anpassung von Übergängen und Zeitintervallen, automatische und manuelle Steuerung des Folienwechsels sowie Unterstützung mehrerer Diashows gleichzeitig. Hier ist so ein verspieltes „Baby“.
Camera ist ein kostenloses JQuery-Plugin zum Organisieren von Diashows auf Website-Seiten, ein leichter Schieberegler mit vielen Übergangseffekten, einem 100 % responsiven Layout und vielem mehr einfache Einstellungen. Passt perfekt auf die Bildschirme aller Benutzergeräte (PC-Monitore, Tablets, Smartphones usw.). Handys). Möglichkeit zur Demonstration eingebetteter Videos. Automatischer Diawechsel und manuelle Steuerung über Tasten und Bildminiaturblock. Praktisch vollständige Galerie Bilder im kompakten Design.
Ein weiterer recht einfacher responsiver Slider in jQuery. Sie können beliebige Inhalte, Videos, Bilder, Texte und andere Elemente auf Ihren Folien platzieren. Erweiterte Unterstützung Touchscreen. Verwendung von CSS-Übergangsanimationen. Eine Vielzahl unterschiedlicher Variationen von Diashows und kompakten Bildergalerien. Automatische und manuelle Steuerung. Wechseln Sie die Folien mithilfe der Schaltflächen und durch Auswahl von Miniaturansichten. Kleine Quelldateigröße, sehr einfach zu konfigurieren und zu implementieren.
FlexSlider 2 – Eine aktualisierte Version des gleichnamigen Sliders mit verbesserter Reaktionsfähigkeit, Minimierung des Skripts und Minimierung von Reflow/Neuzeichnen. Das Plugin umfasst einen einfachen Schieberegler, eine Schiebesteuerung mit Miniaturansichten, integrierte Links-Rechts-Pfeile und eine untere Navigationsleiste in Form von Schaltflächen. Die Möglichkeit, Videos in Folien anzuzeigen (Vimeo), flexible Einstellungen (Übergänge, Design, Zeitintervall), vollständig adaptives Layout.
Ein bekanntes und recht beliebtes responsives jQuery-Plugin zum Erstellen hochwertiger Bildergalerien und Slider. Die Slider-Oberfläche ähnelt dank ihres Bedienfelds optisch einem bekannten Videoplayer; das Plugin umfasst mehrere verschiedene Designthemen. Unterstützung für eingebettete Videos und Bilder von beliebten Diensten: Flickr, Vimeo, YouTube und anderen. Ausführliche Dokumentation zur Einrichtung und Nutzung.
Ein einfacher, schnörkelloser, kostenloser jQuery-Bild-Slider, der speziell für responsives Webdesign geschrieben wurde. Blueberry ist ein experimentelles Open-Source-jQuery-Plugin. Minimalistisches Design, keine Effekte, nur fließende Popup-Bilder, die sich nach einer gewissen Zeit gegenseitig ersetzen. Alles ist ganz einfach, installieren, anschließen und loslegen...
Ein sehr kompakter jQuery-Bild-Slider mit Lightbox-Elementen. Dank seiner flexiblen Abmessungen lässt es sich sehr einfach in jeden Container integrieren, in einen einzigen Eintrag in Form von Miniaturansichten, beim Bewegen des Mauszeigers oder beim Anklicken wird eine Lightbox mit vergrößertem Bild und Bedienelementen aktiviert. Es ist praktisch, einen solchen Schieberegler in Seitenwänden zu platzieren, um Produkte oder Neuigkeiten zu präsentieren. Eine ausgezeichnete Lösung für Websites mit einer großen Menge an Informationen.
Kostenloser responsiver Slider mit erweiterten CSS3-Übergängen. Minimalistischer Stil, 3 Designthemen. Jeder Rahmen wird horizontal verschoben und erscheint in der Mitte. Das Bild wird nach links verschoben, die Signatur nach rechts. Miniaturansichten werden in der unteren rechten Ecke dupliziert. Paginierung der Produktansichten, die in jedem Frame angezeigt werden sollen. Zu den Bedienelementen gehören auch Vor- und Zurück-Tasten. Unterstützung von allen moderne Browser.
Ein sehr einfacher Bildschieberegler, sowohl hinsichtlich der Funktionalität als auch der Einstellungen. Zu den Einstellungen gehören eine Änderung der Geschwindigkeit des Folienwechsels, die Aktivierung des manuellen Modus (Steuertasten sind aktiviert) und eine kontinuierliche Diashow. Dieser Slider hat das Recht zu existieren und er hat mich nur deshalb angezogen, weil er existiert; ich habe an dieser Entwicklung nichts besonders Interessantes gefunden, vielleicht habe ich nicht gut danach gesucht)))
So ein wunderschöner, adaptiver Bildschieberegler von Vladimir Kudinov, Genossen. Ein solides, gut gestaltetes Tool mit klaren Beispielen und detaillierte Anleitung zur Erstellung, Installation und Nutzung. Adaptives Design, schöne Tasten und grüne Pfeile, alles ist ganz schön ruhig, ohne Druck.
Kostenloses JQuery-Slider-Plugin mit Parallaxeneffekt für Bilder und Textfolien. Folienanimationen verfügen über mehrere Anzeigewerte mit vollständiger Kontrolle in jeder Zeit- und Animationseinstellung. Die Möglichkeit, mehrere Elemente auf einer Folie gleichzeitig zu animieren. Sie können verschiedene Animationsmethoden, Folienüberblendungen oder Übergänge aus einer bestimmten Richtung festlegen. Automatische Anzeige und manuelle Steuerung über Navigationspfeile, die angezeigt werden, wenn Sie mit der Maus über das Bild fahren. 10 Arten von Folienanimationseffekten und vieles mehr ...
Der Testbericht fiel recht umfangreich aus, war aber aufgrund der Vielzahl der betrachteten Produkte nicht aussagekräftig genug. Alle Details und ausführlichen Beschreibungen Funktionalität Welches Plugin es gibt, erfahren Sie direkt auf den Seiten der Entwickler. Ich kann nur hoffen, dass ich es jemandem leichter gemacht habe, das unbedingt notwendige Tool zum Erstellen farbenfroher Bild-Slider auf den Seiten seiner Websites zu finden.
Haben Sie jemals darüber nachgedacht, dass es schön wäre, mit russischsprachigen Vorlagen arbeiten zu können? Denken Sie einfach eine Minute darüber nach. Verschwenden Sie keine Zeit mit englischsprachigen Vorlagen. Wir freuen uns, Sie darüber zu freuen, dass Sie es jetzt auf dem TemplateMonster-Marktplatz finden können. Der Text für jeden von ihnen wurde von Hand geschrieben. Und natürlich sind alle vorgefertigten Lösungen unglaublich einfach zu bedienen.
Bei allem Respekt, Andrew
Browser erstellen automatisch Tooltips, wenn Webmaster Text zum Titelattribut hinzufügen (normalerweise wird das Titelattribut auf Tags angewendet). Und , d.h. zu Links und Bildern). Wenn Benutzer mit der Maus über Tags fahren, die ein Titelattribut enthalten, zeigt der Browser einen Tooltip an. Genau diese Pop-up-Tipps (Tooltip) werden wir bearbeiten.
In diesem Artikel wird Folgendes behandelt:
- wie man ein Plugin verwendet, um Standard-Tooltips zu ersetzen - wie man qTip-Tooltips anpasst - wie man Ajax-Inhalte in einem Tooltip anzeigt Einfache benutzerdefinierte Text-TooltipsIch hoffe, es bedarf keiner Erklärung, dass Attribute wie Titel und Alt oft äußerst notwendig sind. Schließlich helfen sie den Nutzern, sich in einer Vielzahl von Informationen besser zurechtzufinden, und sind darüber hinaus äußerst nützlich für die Suchmaschinenoptimierung der Website. Das einzige Problem bei Tooltips besteht darin, dass sie nicht mithilfe von CSS-Stilen geändert werden können. Um dieses Problem zu lösen, werden wir die Möglichkeiten nutzen.
1. Erstellen wir einen einfachen HTML-Dateirahmen, der das Titelattribut enthält.
Linkliste:
- heim
- Über das Unternehmen
- Kontakte
- Portfolio
2. Jetzt müssen Sie das qTip-Plugin aus dem Repository herunterladen.
3. Verbinden Sie die heruntergeladenen Dateien:
// Standard-jQuery-Bibliothek // Wir werden jQuery-Skripte in diese Datei schreiben
4. Damit der Tooltip funktioniert, schreiben Sie einfach in scripts.js:
$(document).ready(function())( $("a").qtip(); ));
Diese Konstruktion bedeutet, dass für alle Links, die ein Titelattribut haben, die Methode qtip() angewendet wird.
Einrichten von jQuery qTip1. Tooltips können auf unterschiedliche Weise konfiguriert werden. Ändern wir zunächst die Position, an der die Tooltips angezeigt werden.
$("a").qtip(( position: ( my: "unten in der Mitte", //Cursorposition bei: "oben in der Mitte", //Position des Tooltip-Ansichtsfensters: $(Fenster) //Der Tooltip wird nicht angezeigt die Kanten Bildschirm ) ));
2. Nachdem Sie die Position festgelegt haben, können Sie mit der Arbeit an der Farbgebung für die Anzeige des Tooltips beginnen. Standardmäßig enthält die Datei jquery.qtip.min.css die folgenden Farbstile:
Qtip-default (gelber Standardstil)
Qtip-Bootstrap
Sie können einigen dieser Stile einen Schatten hinzufügen: qtip-shadow . Darüber hinaus stört Sie niemand, Ihren eigenen Stil zu kreieren, der perfekt zum allgemeinen Stil passt, obwohl es mehr als genug Standard-Stile gibt.
$("a").qtip(( Position: ( my: "unten in der Mitte", bei: "oben in der Mitte", Ansichtsfenster: $(window) ), Stil: ( Klassen: "qtip-green qtip-shadow" ) ) );
Erstellen eines Navigationsmenüs mit Tooltips1. Erstellen wir zunächst ein HTML-Framework:
#navigation ( Hintergrund: rgb(132,136,206); /* Alte Browser */ Hintergrund: -moz-linear-gradient(top, rgba(132,136,206,1) 0%, rgba(72,79,181,1) 50%, rgba(132,136,206 ,1) 100 %); /* FF3.6+ */ Hintergrund: -webkit-gradient(linear, links oben, links unten, color-stop(0%,rgba(132,136,206,1)), color-stop(50 %,rgba(72,79,181,1)), color-stop(100%,rgba(132,136,206,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(132,136,206, 1) 0 %,rgba(72,79,181,1) 50 %,rgba(132,136,206,1) 100 %; /* Chrome10+,Safari5.1+ */ Hintergrund: -o-linear-gradient(top, rgba(132,136,206 ) ,1) 0%,rgba(72,79,181,1) 50%,rgba(132,136,206,1) 100%; /* Opera11.10+ */ Hintergrund: -ms-linear-gradient(top, rgba(132,136,206 , 1) 0%,rgba(72,79,181,1) 50%,rgba(132,136,206,1) 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8488ce", endColorstr = "#8488ce",GradientType=0); /* IE6-9 */ Hintergrund: linear-gradient(top, rgba(132,136,206,1) 0%,rgba(72,79,181,1) 50%,rgba(132,136,206, 1 ) 100 %); /* W3C */ list-style-type: none; Rand: 100px 20px 20px 20px; Polsterung: 0; Überlauf versteckt;
-webkit-Grenzradius: 5px; -moz-border-radius: 5px; Randradius: 5px; ) #navigation li ( margin: 0; padding: 0; display: block; float: left; border-right: 1px solid #4449a8; ) #navigation a ( color: #fff; border-right: 1px solid #8488ce; display : block; padding: 10px; ) #navigation a:hover (hintergrund: #859900; border-right-color: #a3bb00; )
Das Ergebnis sollte das folgende Bild sein:
3. Fügen Sie der Datei scripts.js Folgendes hinzu:
$("#navigation a").qtip(( position: ( my: "top center", at: "unten center", viewport: $(window) ), show: ( effect: function(offset) ( $(this ).slideDown(300); ) ), hide: ( Effekt: function(offset) ( $(this).slideUp(100); ) ), Style: ( Klassen: "qtip-green qtip-shadow", ) )) ;
Wenn Sie nun mit der Maus über das Navigationsmenü fahren, wird ein Tooltip (Titelattribut) angezeigt.Andere Inhalte im Tooltip anzeigen
Zusätzlich zur Anzeige von Standard-Tags können Sie im Tooltip auch andere Inhalte anzeigen, beispielsweise aus einer Datei, aus einem versteckten Container oder einer Datenbank, ohne die Seite mithilfe der Ajax-Technologie neu zu laden.
Dieser Link übernimmt Inhalte aus einer Datei mit Ajax
$(".infobox").each(function())( $(this).qtip(( content: ( text: "Loading...", //Während der Inhalt geladen wird, wird dieser Ajax-Eintrag angezeigt: ( url: $ (this).attr("href") //Woher soll der Inhalt kommen), title: ( //Fügt dem Tooltip-Text ein Titelfeld hinzu: $(this).attr("title"), button: true //Fügt eine Schaltfläche zum Schließen des Tooltips hinzu ) ), position: ( my: „top center“, at: „unten center“, effect: false, //Entfernt den Pop-out-Effekt viewport: $(window) ), show: ( event: „click“, // Der Tooltip wird angezeigt, wenn Sie auf einen Link klicken. Sie können ihn durch „Hover“ ersetzen. Der Tooltip wird dann angezeigt, wenn Sie den Link bewegen. solo: true // Ermöglicht die Anzeige nur ein Tooltip auf dem Bildschirm), hide: "unfocus", // Der Tooltip wird geschlossen, wenn Sie auf ein anderes Seitenelement klicken. Stil: (Klassen: "qtip-green qtip-shadow") )).bind("click", function(e)(e.preventDefault())); //Wenn Sie auf einen Link klicken, lädt der Browser die URL nicht
Diese Ajax-Technik funktioniert nur, wenn der Server läuft. Damit er Geld verdienen kann lokalen Computer Sie müssen zum Beispiel installieren.
Bevor ich es vergesse, welche Vor- und Nachteile Aluminium-Gliederheizkörper haben und welche Heizkörper normalerweise von Verbrauchern gewählt werden.
(Downloads: 409)
1. jQuery-Plugin „Hover Zoom“Eine originelle Lösung zum Implementieren von Bildbeschreibungen beim Bewegen des Cursors mithilfe des Zoom-Effekts.
2. Captify-Plugin 3. jQuery-Beschreibung der Bilder in der GalerieWenn Sie mit der Maus darüber fahren, erscheint eine Beschreibung des Bildes und das Bild selbst wird mit einer durchscheinenden Schicht einer bestimmten Farbe gefüllt.
4. jQuery-Implementierung von BildunterschriftenMehrere Optionen zum Implementieren von Bildunterschriften, die angezeigt werden, wenn Sie mit der Maus über das Bild fahren.
5. jQuery-SchiebetüreffektWenn Sie mit der Maus über ein Miniaturbild fahren, wird an dessen Stelle praktisch eine Beschreibung angezeigt.
6. jQuery-Plugin „Zoominfo“Wenn Sie mit der Maus über ein Bild fahren, wird es verkleinert und der Titel und die Beschreibung des Fotos werden angezeigt.
7. jQuery-Plugin „Mosaic“Implementierung von Popup-Bildbeschreibungen beim Bewegen des Mauszeigers. Es gibt 8 verschiedene Arten von Popup-Untertiteln. Sie können sie auf der Demoseite ansehen.
Wenn Sie den Mauszeiger über das Bild bewegen, wird es angezeigt Kurzbeschreibung mit Link zu detaillierten Informationen.
9. Plugin zur Implementierung von BildsignaturenEine weitere Option zum Implementieren von Popup-Bildunterschriften beim Hover. Für die Darstellung von Beschriftungen kann zwischen zwei jQuery-Effekten gewählt werden.
10. Bildbeschreibung „Vorschaufenster“Plugin zum Untertiteln von Bildern. Wenn Sie den Mauszeiger mit einem animierten Effekt bewegen, wird eine Beschreibung des Bildes angezeigt. jQuery wird zum Erstellen von Animationen verwendet.
Aus Materialien hergestellt
1. Tolle jQuery-Diashow „Elastic Slideshow“
Diashow mit Miniaturansichten und Folienbeschreibungen. Verschiedene bildverändernde Effekte. Es gibt zwei Möglichkeiten: mit und ohne automatischen Diawechsel.
2. Reiner CSS3-Slider
Schöner Bild-Slider mit Beschreibung und automatischem Dia-Wechsler. Wenn Sie mit der Maus über das Bild fahren, stoppt die Drehung. Der Stopp wird von einem CSS3-Effekt begleitet.
3. jQuery-Plugin „Photorama“
Schöner Galerie-Slider.
4. Texteffekte „Typografie-Effekte“
Interessante Effekte für die Arbeit mit Typografie mit CSS3 und jQuery. 7 verschiedene coole Effekte.
5. Darkbox-Plugin
Ein kleines, leichtes Plugin zum Anzeigen von Bildern in einem Popup-Block.
6. Hover-Effekt mit jQuery
Kreiseffekt beim Schweben.
7. Animierte jQuery CSS3-Schaltflächen
Viele verschiedene animierte CSS3-Effekte zum Erstellen fantastischer Schaltflächen für Ihre Website. Einfach wirklich coole Hover-Effekte.
8. HTML5 jQuery zum Ändern von Hintergrundbildern
Wenn Sie auf die Miniaturansichten klicken, ersetzen sich die Hintergrundbilder gegenseitig mit einem Unschärfeeffekt. Wenn Sie die Größe des Browserfensters ändern, ändert sich auch die Größe des Hintergrundbilds.
8. Interaktive Typografieeffekte
Interessante Texteffekte mit HTML5 und jQuery (4 verschiedene Effekte). Bewegen Sie den Mauszeiger über den Text, um den Effekt zu sehen.
9. Popup-Bildunterschriften
Viele verschiedene animierte Hover-Effekte zur Implementierung von Popup-Bildunterschriften.
10. Plugin „Portamento“
Floating-Block in jQuery. Bleibt immer sichtbar, wenn auf der Seite nach unten gescrollt wird.
11. Inhaltsscroller
jQuery-Plugin zur Darstellung des Scrollens in Blöcken fester Größe. Mehrere Stile.
12. Scrollbars-Plugin
jQuery-Implementierung des horizontalen und vertikalen Scrollens von Inhalten in einem Block fester Größe.
13. Tiny Scrollbar-Plugin
jQuery-Plugin zur Implementierung von vertikalem und horizontalem Scrollen von Inhalten.
Demo
Herunterladen
14. Plugin „jScrollPane“
Browserübergreifendes Scrollen des Inhalts in einem Block.
15. Floating-Block „Scroll Follow“
Plugin zum Erstellen eines Blocks, der beim Scrollen der Seite scrollt. Es ist möglich, eine Blockierung zu beheben, indem Sie auf einen Link klicken.
16. Popup-Seitenleisten
Ausziehbare Panels auf allen Seiten der Webseite.
17. Effektive CSS3-Lösungen für das Stub-Seitendesign
Drei Optionen zum Implementieren animierter Effekte, um einen „Site in Entwicklung“-Stub zu erstellen.
17. Auswirkung beim Scrollen der Seite
Ein verblüffender Effekt beim Scrollen der Seite: Elemente verschwinden aus dem Bereich hinter dem Bildschirm oder verstecken sich umgekehrt hinter dem Bildschirmbereich. Diese Lösung eignet sich perfekt für den Einsatz auf Portfolio-Websites, um abgeschlossene Projekte mit einer kurzen Beschreibung wirkungsvoll zu präsentieren.
19. Plugin „fancyBox 2“
Eine neue, komplett neu geschriebene Version des bekannten Fancybox-Plugins zur Anzeige von Bildern und anderen Inhalten in modalen Fenstern.
20. Galerie minimieren
Ein funktionales Plugin mit einer breiten Palette an Funktionen: Galerie, Karussell, Schieberegler, Menü, Expander, animierte Schaltflächen.
21. jQuery-News-TickerNews-Rotator auf der Website. Die Nachrichten folgen aufeinander und erscheinen mit einem interessanten Schreibmaschineneffekt. Sie können die Änderung von Nachrichten stoppen, indem Sie auf die Schaltfläche „Pause“ klicken. Mit den Pfeilen können Sie von einer Nachricht zur nächsten wechseln.
22. Adaptive Bilder
Skalierbare Bilder zur Anzeige auf mobile Geräte. Die Bildgrößen hängen von der Fenstergröße ab. Verwendete Technologien: JavaScript und PHP5.
23. vScroller
Vertikaler jQuery, CSS3-Scroller. Einstellbare Scrollgeschwindigkeit und Verzögerungszeit.
24. Mehrstufiges Dropdown-Menü „jQSimpleMenu“
Ein neues jQuery-Plugin zum Erstellen mehrstufiger horizontaler Dropdown-Menüs auf einer Website.
25. „jsCarousel 2.0“
jQuery-Plugin zur Implementierung vertikaler und horizontaler Karussells.
26. Rotator „Dynamic News“
jQuery-Plugin für eine schöne Anzeige der neuesten Nachrichten aus dem RSS-Feed.
27. Animiertes Menü
Animierter Effekt, wenn Sie mit der Maus über einen Menüpunkt fahren.
28. Animierter Texteffekt
Drei spektakuläre Beispiele für die Arbeit mit CSS-Eigenschaft„Hintergrundclip: Text“. Der CSS3-Effekt funktioniert in älteren Browsern nicht.
29. CSS3-jQuery-Unschärfeeffekt
Wenn Sie mit der Maus über einen Block fahren, wird dieser vergrößert und die übrigen Textblöcke verschwinden im Hintergrund.
30. CSS3 jQuery-Tooltips
Implementierung von Blöcken ähnlich wie Notizen mit Text.
34. Rlightbox
Anzeige von Medieninhalten in Popup-Blöcken: Bilder, Videos, Flash.
35. jQuery-Summer
Vergrößerung der quadratischen Fläche.
36. Beschreibung des CSS3-jQuery-Bildes
Plugin „Based Sliding Door Content Gallery“ zur Implementierung von Popup-Bildbeschreibungen. Wenn Sie mit der Maus über eines der angezeigten Bilder fahren, erscheint eine kurze Beschreibung mit einem Link zum vollständigen Artikel. Beim Schweben: Garagentor-Hebeeffekt.
37. „Vorher-Nachher“-Effekt jQuery-Plugin „uCompare“
Durch Ziehen des Vorhangs können Sie zwei übereinanderliegende Bilder vergleichen. Ideal für Fälle, in denen Sie zwei Versionen von etwas auf der Seite anzeigen müssen: Vorher und Nachher.
38. Bildrotationseffekt
Mehrere verschiedene animierte Übergangseffekte zwischen Folien.
