Weltgestalten » Theater - Kommunikation - Fotografie - Mediengestaltung
- Anmelden oder Registrieren um Kommentare zu schreiben
Benutzeranmeldung
Aktive Forenthemen
- Drupal 7 mit php8.2 eventuell möglich ?
- Das eine Problem, erstellen einer Galerie gelöst, ein anderes Problem mit Galerie gefunden
- PDF Anzeigen
- Internen Bereich umsetzen..wie
- [gelöst]hat jemand von euch bereits Drupal 9 im Produktiven einsatz?
- [gelöst] Nach Installation von spammaster -->Sendepause
- [gelöst]Probleme beim erstellen einer Galerie
- [gelöst]Zähler für Admins deaktievieren
- [gelöst] Zensurmodul gesucht
- Liste verfügbarer Aktualisierungen
- Heutige Seitenansichten und Seitenansichten gesamt funktionieren nicht
- Kontaktformular-Rätsel
Neue Kommentare
- Nein, aber in der
vor 11 Stunden 15 Minuten - lässt sich das direkt in de
vor 13 Stunden 44 Minuten - Die Anzeige von Warnungen
vor 14 Stunden 17 Minuten - Vielen Dank erst einmal.
vor 15 Stunden 5 Minuten - Soweit ich das sehe, ist das
vor 15 Stunden 12 Minuten - Die Anzahl von maximal 20
vor 15 Stunden 22 Minuten - Es lag an der Einstellung
vor 1 Tag 5 Stunden - Du irrst bei der Ursache: es
vor 2 Tagen 13 Stunden - pdf Modul
vor 3 Tagen 13 Stunden - Sorry, aber das ist keine
vor 3 Tagen 20 Stunden
Statistik
Beiträge im Forum: 249667
Registrierte User: 20019
Neue User:
- Nereiron
- Theresaabext
- Jaslytuh
| wla | 9433 |
| 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