Hallo beisammen,
nachdem mir mit der Fotogalerie geholfen wurde (Danke nochmals) hier meine nächste Frage.
Wie bekomme ich einen onTopButton hin, der genauso funktioniert wie das data-widget auf der Magix Hompage (erscheint am rechten Rand bei einem bestimmten Scrollabstand zum Header und verschwindet wieder nach dem anklicken)?
Danke schon mal im Voraus
GeKo
Wenn Du diesen Effekt meinst:
Dann gilt zunächst das, was ich hier gesagt habe. Allerdings wirst Du da auf eine Funktion verwiesen, die ein Objekt bis zu oberen Fensterrand scrollen lässt und es dort fixiert.
Du suchst aber eine Funktion, die ein Objekt bei Erreichen einer bestimmten Scrollposition ein- und bei Verlassen der Position wieder ausblendet.
Das ist mit der JQuery Bibliothek-, JavaScript- und CSS realisierbar.
Die folgenden Scriptcodes habe ich für die weiter unten angegebene online Demo verwendet, in der ein Objekt (Bild) in der Größe von 100x150 px am rechten Fensterrand ein-/ausgeblendet wird, wenn das Fenster um 200px nach unten gescrollt wird:
Beide Codeteile kannst Du direkt in den HTML Bereich der Seite einbinden
HTML Head:
JQuery Bibliothek einbinden
CSS Script definieren
--------------------------------------------
<script src="./index_htm_files/jquery-1.9.1.js"></script>
<style type="text/css">
#pu_objekt {
position: fixed;
margin-left: 50%;
left: 450px;
top: 100px;
display:none;
}
</style>
--------------------------------------------
HTML Body:
Code für langsames Ein-/Ausblenden
--------------------------------------------
<div id="pu_objekt"><img src="index_htm_files/pu_picture.png" style="width: 100px; height: 150px;" ></div>
<script type="text/javascript">
window.onscroll = function()
{
if (document.documentElement.scrollTop > 200 || self.pageYOffset > 200) {
$('#pu_objekt').fadeIn("slow");
} else if (document.documentElement.scrollTop < 200 || self.pageYOffset < 200) {
$('#pu_objekt').fadeOut("slow");
}
}
</script>
--------------------------------------------
Die für die Größe- und Positionierung wichtigsten Werte sind oben farblich markiert.
Hier findest du die online Demo.
Was noch fehlt, ist ein Link auf dem eingeblendeten Objekt, der z. B. die Seite nach oben scrollt, aber das sollte Dir mit den Möglichkeiten die der WD bietet auch ohne Anleitung gelingen...
Viel Erfolg
Mit der neuen Funktion "Web-Animation" ist das realisierbar.
Du legst auf deiner Seite ein Rechteck-Objekt, was als "Trigger-Objekt" dienen soll. Die Grafik, die auftauchen soll, legst du so auf die Seite, dass sie erscheint, sobald das Trigger-Objekt in das Browserfenster kommt.
Damit man das Trigger-Obj. nicht sieht, bekommt es die Seitenfarbe, wenn alles passt.
Man kann aber auch Bilder oder Text als "Trigger-Objekt" definieren (Namen).
Wie die Animation und das Zusammenspiel mit dem Trigger zu "bauen" ist, beschreibt die Hilfe sehr gut.
Öffne die Hilfe und lies den Abschnitt "Web-Animationen verwenden".
Sollten noch Fragen sein, wie immer stellen.
Viel Erfolg!
Meine DEMO kannst du ...HIER sehen.
P.S. @BeRo, soviel "Aufwand" ist doch gar nicht mehr nötig - in DIESEM Fall.
@BilderMacher
[...] soviel "Aufwand" ist doch gar nicht mehr nötig- in DIESEM Fall. [...]
Leider doch.
Der neue WD bietet zwar eine einfache Lösung an, wenn ein Objekt bei Erscheinen eines beliebigen Trigger Objekts eingeblendet werden soll. Das funktioniert aber nicht, wenn der Effekt beim Verschwinden eines Objekts ausgelöst werden soll. Nur dann wäre das Einblenden von Objekten an einer bestimmten Scrollposition präzise zu steuern.
Im vorliegenden Fall soll z. B. ein Objekt eingeblendet werden, wenn die Seite um 200px nach unten gescrollt wurde.
Wo müsste das Trigger Objekt auf der Seite angeordnet werden, damit das bei jeder Fenstergröße (Höhe) funktioniert?
Bei einem sehr hohen Fenster erscheint das einzublendende Objekt ggf. sofort und bei einer sehr niedrig eingestellten Fensterhöhe muss die Seite evtl. komplett nach unten gescrollt werden um das einzublendende Objekt sichtbar zu machen.
Das wird auch der Grund sein, warum die Magix Entwickler den Effekt auf der eigenen Site mit Typo3 realisiert haben und nicht mit dem WD.
Wenn es "nur" darum geht, ein Objekt bei einer zufälligen Scroll Position einzublenden ist natürlich die neue WD Funktion ideal, aber eben nur dann...
Hallo Bildermacher und BERO,
Vielen lieben Dank für die Lösungsvorschläge welche ich beide am WE probieren werde. Da heißt es nimm den WD und du brauchst dich um nichts kümmern alles geht automatisiert, aber ohne tiefere HTML, JS und CSS Kenntnisse bist als Hobby Web Bastler aufgeschmissen.
Euch ne gute Zeit und danke nochmals
Gruß GeKo
Hallo BeRo hallo Bildermacher,
prinzipiell funktioniert BeRos Methode. Sobald ich aber das Script wie beschrieben im Header und Body implementiere, wird in meiner Galerie anstatt der im Widget festgelegten 4x4 Vorschaubilder alle Vorschaubilder angezeigt, was zu einem Überlauf der angezeigten Webseite führt. Da muss ich noch probieren wie das funzt.
Ich habe deshalb den Vorschlag von Bildermacher umgesetzt indem ich ein fest verankertes Bild im Footer als Anchor festgelegt habe, und mittels der Web-Animation das Fading des ScrollButtons ansteuere.
Danke nochmals an euch beide
Gruß GeKo