Forum: NOF - Tutorials (185 anschauliche Tutorials zum Lesen und Nacharbeiten) > Nützliche Funktionen & Elemente für Websites

rotierender Top-Button mit Fading-Effekt

(1/2) > >>

nettesekel:
Ein Top-Button der sich erst kurz vor Seitenende einblendet und bei Mausover rotiert ist eine nette Spielerei für eine Website, so baut man ihn ein...
***Quelle***
Wie das in einer NOF-Seite aussieht und funktioniert, könnt ihr in diesem Demo-Projekt testen. http://demos.nof-community.de/rotierender-top-button-mit-fading-effekt/demo.html

Bei diesem Tutorial gehe ich davon aus, dass ihr unter der Publizierungsstruktur "nach Assettyp" publiziert. Solltet ihr eine andere Publizierungsstruktur festgelegt haben, müsst ihr diese entwede umstellen ( https://www.nof-community.de/index.php/topic,1540.0) oder sämtliche Pfadangaben in diesem Tutorial eurer Struktur entsprechend anpassen.

nettesekel:
Speichert euch zunächst die Buttongrafik mit einem Rechtsklick von der Quellseite und bindet die Grafik als Asset in euer Projekt ein.

Eine Anleitung dazu findet ihr bei Bedarf hier: www.nof-community.de/index.php/topic,11.0

nettesekel:
Im nächsten Schritt bindet ihr folgenden Code zwischen den Headtags eurer Seite ein. Eine Anleitung hierzu findet Ihr bei Bedarf hier: https://www.nof-community.de/richtiger-umgang-mit-netobjects-fusion/code-zwischen-den-head-tags-der-seite-einfugen/

Da ihr den Button vermutlich nicht nur auf einer Seite verwenden werdet, bietet sich das Einbinden des Codes im Masterrahmen an. Beachtet jedoch, dass ihr dann für die Startseite einen eigenen Masterrahmen anlegen müsst (https://www.nof-community.de/richtiger-umgang-mit-netobjects-fusion/einen-neuen-masterrahmen-anlegen/) da sich die Pfadangaben für die Startseite von denen für die Unterseiten unterscheiden.

Eben aus diesem Grund ist für die Startseite eine kleine Anpassung der Pfandangabe im nachfolgenden Code nötig. Entfernt hierzu den ersten Punkt des Pfades in der gelb markierten Zeile.

Für alle Unterseiten verwendet ihr den Code ohne Änderung.


--- Code: HTML5 ---<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <style type="text/css">#smoothup {   height: 40px;   width: 40px;   position:fixed;   bottom:50px;   right:100px;   text-indent:-9999px;   display:none;   background: url("../assets/images/gototop.png");   -webkit-transition-duration: 0.4s;    -moz-transition-duration: 0.4s;    transition-duration: 0.4s; }#smoothup:hover {   rotate(360deg);   -moz-transform: rotate(360deg);   -ms-transform: rotate(360deg);   -webkit-transform: rotate(360deg) }</style>

nettesekel:
Damit das Ganze auch funktionieren kann, müssen wir nun eine zweite Code-Einfügung vornehmen.
Den  nachfolgenden Code fügt ihr nun am Body-Ende ein.
Auch für diesen Code bietet sich die Einfügung im Masterrahmen-HTML an.

In älteren NOF-Versionen kann man an der Aufschrift der Reiter im Codefenster unschwer erkennen, wo die Einfügungen für das Body-Ende hingehören..In den neuen NOF-Versionen befinden sich am oberen Fenstrand eine Reihe von Icons. Fahrt ihr mit der Maus über diese Icons wird euch in einem kleinen Tooltipp angezeigt, für welchen Bereich das entsprechende Icon steht. Sucht euch auf diese Weise das Icon für das Body-Ende, klickt es an und fügt nun dort, wo der Cursor zu blinken beginnt den kopierten Code ein. Mit einem Klick auf OK schließt ihr den Vorgang ab.



--- Code: HTML5 ---<script type="text/javascript">jQuery(document).ready(function($){        $(window).scroll(function(){        if ($(this).scrollTop() < 200) {                        $('#smoothup') .fadeOut();        } else {                        $('#smoothup') .fadeIn();        }    });        $('#smoothup').on('click', function(){                $('html, body').animate({scrollTop:0}, 400);                return false;                });});</script>

nettesekel:
Zum guten Schluss müssen wir nun noch den Code für den eigentlichen Button einfügen. Hierzu fügt
Ihr in eurer Arbeitsansicht ein kleines Textfeld ein und platziert den nachfolgenden Code nach dieser Kurzanleitung in diesem Textfeld.  https://www.nof-community.de/index.php/topic,47.0
Wo ihr das Textfeld platziert spielt eigentlich keine Rolle, da die Position des Buttons durch die Vorgaben im CSS geregelt wird. Am besten legt ihr ihn irgendwo unten ans Seitenende.


--- Code: HTML5 ---<a href="#top" id="smoothup" title="Back to top"></a>

Navigation

[0] Themen-Index

[#] Nächste Seite