mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Mi 24.04.2024 19:32 Benutzername: Passwort: Auto-Login

Thema: HTML Bilderslider mit Rollovereffekt vom 22.09.2014


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> HTML Bilderslider mit Rollovereffekt
Autor Nachricht
birddesign2014
Threadersteller

Dabei seit: 22.09.2014
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 22.09.2014 18:34
Titel

HTML Bilderslider mit Rollovereffekt

Antworten mit Zitat Zum Seitenanfang

Hallo Ihr Kreativen da draussen,

ich bin gerade dabei einige Übungen mit html und css zu gestalten. Da mich das Thema schon sehr interessiert.

Ich möchte nun als Beispiel, 5 Logos anlegen, die als Slider durch meine kleine Testweb laufen. Von rechts nach links. Das heisst, sobald das Erste Logo links herraus läuft, läuft es gleichzeitig rechts wieder rein. Das Besondere dabei soll es sein, das beim hover dann eine Verlinkung mit auf das Logo gelegt ist.

Jetzt wäre meine Frage, kennt Jemand ein schönes Beispiel eines Html Scripts, wo ich mir das mal anschauen kann und ausprobieren kann?

Ich danke euch für eure Unterstützung.

lg
  View user's profile Private Nachricht senden
remote

Dabei seit: 10.11.2006
Ort: /var/www/
Alter: 110
Geschlecht: Männlich
Verfasst Mo 22.09.2014 20:21
Titel

Antworten mit Zitat Zum Seitenanfang

http://codepen.io/search?q=slider&limit=all&depth=everything&show_forks=false
  View user's profile Private Nachricht senden
Anzeige
Anzeige
qualidat

Dabei seit: 14.09.2006
Ort: Eichwalde bei Berlin
Alter: 63
Geschlecht: Männlich
Verfasst Mo 22.09.2014 22:18
Titel

Antworten mit Zitat Zum Seitenanfang

Zitat:
Ich möchte nun als Beispiel, 5 Logos anlegen, die als Slider durch meine kleine Testweb laufen. Von rechts nach links. Das heisst, sobald das Erste Logo links herraus läuft, läuft es gleichzeitig rechts wieder rein. Das Besondere dabei soll es sein, das beim hover dann eine Verlinkung mit auf das Logo gelegt ist.


Man kann prima Javascript/CSS/HTML lernen, wenn man sich vornimmt, sowas mal ohne fremde Hilfe bzw. fertigen Code zu schaffen, nur mit einer Sprachreferenz ... Fremde Beispiele versteht man in diesem Stadium evtl. garnicht oder die Grundlagen werden von trickreichen "Spezialkonstrukten" der eingefleischen Profis quasi "verdeckt". Nicht jeder funktionierende Fremdcode ist auch gut zum Lernen.

Bei sowas geht man schrittweise vor, z.B.:

- Bringe ein Bild auf den Screen, positioniere es per CSS
- greife per Javascript auf die CSS-Eigenschaften zu und verändere die Position
- führe eine JS-Funktion zeitgesteuert aus (Timer)
- verschiebe das Bild zeitgesteuert
- wenn es mit einem Bild geht, gehts auch mit mehreren ... usw.

Der Grundgedanke heisst: Vom Einfachen zum Komplizierten durch schrittweises Verknüpfen einfacher Grundfunktionen zu immer komplexeren ...


Zuletzt bearbeitet von qualidat am Mo 22.09.2014 22:26, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Zim

Dabei seit: 05.12.2006
Ort: Earth Rocks
Alter: -
Geschlecht: Männlich
Verfasst Mo 22.09.2014 22:45
Titel

Antworten mit Zitat Zum Seitenanfang

Ja Frank da haste eigentlich Recht wenn ... ja wenn da nicht Javascript im Spiel wäre.

Ohne Vorwissen direkt an JS ist nicht sehr aufbauend.

Möglicherweise ist JS in dem BSP auch gar nicht nötig mit den Animate Funktionen von CSS3?
  View user's profile Private Nachricht senden
 
Ähnliche Themen HTML/CSS Problem mit <html><body> komischer Abstand unten
Anzeige in HTML aber ohne html ;-)
Externe HTML in HTML einbinden
html css
html css what ever
html und osX
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.