[GastForen Programme Web/Internet Adobe Dreamweaver Überblendungs-Animation ohne flash (iOS kompatibel)

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Web/Internet - Webdesign, eForms
Themen
Beiträge
Moderatoren
Letzter Beitrag

Überblendungs-Animation ohne flash (iOS kompatibel)

matz
Beiträge gesamt: 39

11. Jan 2012, 15:24
Beitrag # 1 von 3
Bewertung:
(1817 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Moin allerseits.
Wie erstelle ich eine Animation wie sie auf der Seite

http://www.mennoniten-kr.de/

zu sehen ist?

Wer kann mir helfen, den Trick zu finden.
Danke, Matthias
X

Überblendungs-Animation ohne flash (iOS kompatibel)

Ecki
Beiträge gesamt: 378

12. Jan 2012, 10:47
Beitrag # 2 von 3
Beitrag ID: #487758
Bewertung:
(1782 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Matthias,

ein Blick in den Quellcode der Seite hilft immer!

Code
 
[b]Head:

<script src="http://www.mennoniten-kr.de/wp-content/themes/Magnificent/js/jquery.cycle.all.min.js" type="text/javascript">


[b]Body:

<div id="main-content">
<div id="featured">
<div id="featured-overlay"></div>
<div id="slides" style="position: relative; width: 461px; height: 276px;">
<div class="slide" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 461px; height: 276px;">
<a href="http://www.mennoniten-kr.de/termine/">
<div class="description">
<h2 class="title">
<a href="http://www.mennoniten-kr.de/termine/">Termine von Gottesdiensten und Verans...</a>
</h2>
<p class="meta-info"></p>
</div>
</div>
<div class="slide" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 461px; height: 276px;">
<div class="slide" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 461px; height: 276px;">
<div class="slide" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 461px; height: 276px;">
<div class="slide" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 6; opacity: 1; width: 461px; height: 276px;">
</div>


[b]CSS:

#featured-overlay {
background: url("images/slider-bg.png") no-repeat scroll 0 0 transparent;
height: 286px;
left: 0;
position: absolute;
top: 0;
width: 476px;
z-index: 20;
}


Und dann guckst du noch hier:

http://www.google.de/...amp;client=firefox-a
http://jquery.malsup.com/cycle/options.html
http://jquery.malsup.com/cycle/download.html

Gruß von Ecki


als Antwort auf: [#487709]

Überblendungs-Animation ohne flash (iOS kompatibel)

matz
Beiträge gesamt: 39

11. Feb 2012, 18:26
Beitrag # 3 von 3
Beitrag ID: #489642
Bewertung:
(1661 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Spät kommt mein Danke - doch hier ist es!
Dass es sich hier um das JQuery Cycle Plugin handelt war mir beim Durchsehen des Codes nicht aufgefallen.
Matthias


als Antwort auf: [#487758]

Aktuell

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
01.03.2023 - 09.03.2023

Online
Mittwoch, 01. März 2023, 00.00 Uhr - Donnerstag, 09. März 2023, 00.00 Uhr

Online Webinar

Wie gehen wir mit diesen Veränderungen um? Was ist notwendig, damit wir die Digitalisierung im Unternehmen klappt? Veränderungsprozesse verstehen und entsprechend handeln Mitarbeiter als Botschafter Webseite mit WordPress erstellen SEA /SEO (Ads aufschalten)

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: B. Isik, E-Mailinfo AT snfa DOT ch

https://www.fernstudiumfitness.ch/digitalisierung-schweiz/