[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:
(1878 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:
(1843 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:
(1722 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]