Weltgestalten » Theater - Kommunikation - Fotografie - Mediengestaltung
- Anmelden oder Registrieren um Kommentare zu schreiben
Benutzeranmeldung
Aktive Forenthemen
- Maintenance mode läst sich nicht ausschalten
- Anzeige lässt sich beim Medientyp Video nicht bearbeiten
- [gelöst] Umstellung von D10.3.6 auf D11.x Fragen
- Impressum, Kontakt, Datenschutzbestimmungen trotz Wartungsmodus erreichbar
- [gelöst]Nach letztem Update weiße Seite in den Einstellungen meines Themes
- Views: Anzahl in Feld mit mehreren Werten
- Views Slideshow unvollständig
- Modul Flag
- Wo speichert das Theme Barrio Bottstrap 5 die local Librarie?
- Upload limits
- EXIF Modul
- Anzeige der Anzahl der Posts in Taxonomie
Neue Kommentare
- Du kannst über die Kommandozeile...
vor 1 Tag 12 Stunden - Der Browser war das Problem
vor 2 Tagen 8 Stunden - Es gibt Provider, die die PHP
vor 2 Tagen 10 Stunden - Bei mir sind die Symbole ganz
vor 2 Tagen 14 Stunden - Scheint zu klappen
vor 3 Tagen 3 Stunden - Genau die fehlt.
vor 3 Tagen 4 Stunden - Ja ich erhalte 8.2.5
vor 3 Tagen 14 Stunden - Was erhälts Du, wenn Du auf
vor 4 Tagen 3 Stunden - Nein, das ist nicht ohne
vor 4 Tagen 5 Stunden - Ganz rechts sollte eine
vor 4 Tagen 5 Stunden
Statistik
Beiträge im Forum: 249607
Registrierte User: 20004
Neue User:
- Tyronewramp
- EstherAsyMn
- frank1990
| wla | 9423 |
| stBorchert | 6003 |
| quiptime | 4972 |
| Tobias Bähr | 4019 |
| bv | 3924 |
| ronald | 3852 |
| md | 3717 |
| Thoor | 3678 |
| Alexander Langer | 3416 |
| Exterior | 2903 |
Wow !
am 08.12.2011 - 22:25 Uhr
eine echt tolle, moderne Seite.
Zwei Sachen interessieren mich:
das "weiche" Einblenden der Seiten und
die Bilder-Gallery.
Welche Skripte benutzt du da ?
Danke
Sepp
Danke fürs Lob. Hier die
am 11.12.2011 - 13:10 Uhr
Danke fürs Lob.
Hier die Scripte für die Seitenübergänge. Die Idee war, einerseits die gefühlte Wartezeit für den Besucher zu verkürzen, andererseits das "blitzartige" Erscheinen von Inhalten erträglicher zu gestalten.
Das weiche Ausblenden betrifft nur den eigentlichen Inhalt - Header und Footer bleiben stehen.
Mit der Animate-Funktion wird die Seite immer sanft nach oben gescrollt.
window.onbeforeunload = function(){$("#main-content").fadeTo(500, 0);
$("#content-top").fadeTo(500, 0);
$("#footer").fadeTo(500, 0);
$("#block-block-3").fadeTo(500, 0);
$('html, body').animate({scrollTop:0}, 1000);
}
Das weiche Einblenden funktioniert genauso, nur das es mittels window.onload geladen wird. Durch unterschiedliche Zeiten "rollt" der Inhalt quasi rein.
Mittels der Klasse front ist beim Laden der Startseite eine längere Dauer eingebaut, da hier der Code das erste Mal in den Cache geladen wird. (Setzt natürlich voraus, dass die Besucher immer über die Startseite kommen...)
window.onload = function(){
$(".not-front #content-top").fadeTo(400, 1);
$(".not-front #main-content").fadeTo(600, 1);
$(".not-front #footer").fadeTo(1500, 1);
$(".not-front #block-block-3").fadeTo(2000, 1);
$(".front #page").fadeTo(500, 1);
$(".front #content-top").fadeTo(1000, 1);
$(".front #main-content").fadeTo(1500, 1);
$(".front #block-block-13").fadeTo(2000, 1);
$(".front #block-block-4").fadeTo(2500, 1);
$(".front #block-block-3").fadeTo(3000, 1);
$(".front #footer").fadeTo(3000, 1);
}
Hier die Scripte für die Bilder.
Die Bilder liegen in voller Vorschaugröße in 2 div's von 186x186, wo sie mittels overflow:hidden beschnitten werden. Das innere div (.photo) wird dann animiert.
Ziel war, die Bilder beim Vergrößern mittig über dem Rahmen zu platzieren. Die Schwierigkeit bestand darin, die Höhe/Breite der Bilder zu ermitteln, da diese durch Picasa nicht im Quellcode übermittelt werden.
Lösung siehe Code - das Script funktioniert mit allen Bildformaten :-)
Details im Code.
$('.photo').hover(function(){$(this).css({'z-index' : '10'}); //der Container des Bildes wird über alle anderen gelegt
$("#block-picasa-photo-teaser").find("img").fadeTo(200, 0.4); // alle Bilder werden etwas blasser,
$(this).find("img").fadeTo(100, 1); // außer dem aktuellen Bild
$(this).find("img").css({'z-index' : '11','box-shadow' : '0 0 10px #555555','background' : 'none #ffffff','border' : '1px solid #cccccc','border-radius' : '7px 7px 7px 7px','padding' : '10px','margin' : '10px','opacity' : '1'}); // äußeres Styling des Bildes
imgHeight = $(this).find("img").outerHeight(); //Bildhöhe wird ermittelt
imgHeight = imgHeight+34; //plus zweimal box-shadow und padding
marginT = -((imgHeight-200)/2); // Mittelpunkt wird ermittelt - die 200 ergibt sich aus dem Rahmen (186px + padding)
imgWidth = $(this).find("img").outerWidth();
imgWidth = imgWidth+34;
marginL = -((imgWidth-200)/2);
$(this).addClass('hover').stop() //und jetzt wird das Bild zu seiner vollen Größe ausgefahren
.animate({
width:imgWidth,
height:imgHeight,
marginTop: marginT,
marginLeft: marginL //WICHTIG: bei der letzten Zeile kein Komma
}, 200);
}, function() { //hier wird es wieder an die ursprüngliche Position gebracht
$(this).find("img").css({'z-index' : '0','box-shadow' : '0 0 0','background' : 'none','border' : '0','border-radius' : '0','padding' : '0','margin' : '0'});
$(this).removeClass('hover').stop()
.animate({
width:'186',
height:'186',
marginLeft:'0',
marginTop:'0'
}, 300);
$(this).css({'z-index' : '0'});
});
Hoffe, das ist einigermaßen verständlich.
Weltgestalten » Webdesign - Mediengestaltung - Fotografie - Kommunikation