| Autor |
Nachricht |
Esteffan
Threadersteller
Dabei seit: 05.01.2006
Ort: -
Alter: 47
Geschlecht: -
|
Verfasst Fr 03.10.2008 15:09
Titel Back to top mit slide Effekt |
  |
|
Hallo!
Ich suche etwas wie auf dieser Seite:
http://www.nue-media.com/about
Ich habe es mir im Quelltext alles angeschaut, aber es scheint, als würden da zu viele Bibliotheken mit dabei sein, sowie andere JS Anweisungen, die bestimmtes Verhalten wieder "aufheben" etc..
Vielleicht hat jemand einen Tipp, wo ich etwas dieser Art also Tutorial bzw. fertiges Skript finde.
MfG,
Esteffan
|
|
| |
  |
 |
status4
Dabei seit: 01.10.2008
Ort: -
Alter: -
Geschlecht: -
|
|
| |
|
|
|
Anzeige
|
|
|
Esteffan
Threadersteller
Dabei seit: 05.01.2006
Ort: -
Alter: 47
Geschlecht: -
|
Verfasst Fr 03.10.2008 18:33
Titel
|
|
|
Ich danke Dir.
Genau den habe ich schon in Anwendung auf einer anderen Seite:
http://bowling-star.de/
Mich interessiert der Effekt, wie er bei der von mir verlinkten Seite (1st Post) funktioniert, nämlich, dass der Button mit einer gewissen verzögerung "nachrückt".
Habe schon etliche Zeit verbracht es zu finden, aber ohne Resultat.
Daher wollte ich mal hier auf die "Erfahrungsdatenbank" mal zurückgreifen.
MfG,
Esteffan
|
|
| |
|
|
status4
Dabei seit: 01.10.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 03.10.2008 19:48
Titel
|
|
|
http://www.dynamicdrive.com/dynamicindex1/staticmenu.htm
Ist jetzt nicht unbedingt das modernste Script aber es läuft. Du hast gar keine Javascript Library
zum animieren in Gebrauch? Denn damit kannst du das ganze natürlich in wenigen Zeilen machen.
Wie in deinem Beispiel sollte jQuery genutzt werden zum Beispiel:
| Code: | jQuery(window).scroll(function({
jQuery('#scrolltop').css('opacity',1).stop().animate({top:jQuery(window).scrollTop()+190},750,'swing');});
} |
Zuletzt bearbeitet von status4 am Fr 03.10.2008 20:02, insgesamt 4-mal bearbeitet
|
|
| |
|
|
Esteffan
Threadersteller
Dabei seit: 05.01.2006
Ort: -
Alter: 47
Geschlecht: -
|
Verfasst Sa 04.10.2008 00:44
Titel
|
|
|
Ich bedanke mich.
Der Link zu Dynamic Drive ist schon ein guter Tipp.
Bibliothek: ja. Es wird in dem WB CMS Template, an dem ich momentan arbeite MooTools eingesetzt.
Zusätzlich jQ wäre zu umständlich.
Dein Snippet für jQ: gibts da auch etwas ähnliches, nur für MooTools? Ich bin "nicht geschickt" mit Coden, esscheint, als wäre es Dir so aus dem Eff-Eff eingefallen.
VG,
Esteffan
|
|
| |
|
|
status4
Dabei seit: 01.10.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 04.10.2008 11:49
Titel
|
|
|
| Esteffan hat geschrieben: | | Dein Snippet für jQ: gibts da auch etwas ähnliches, nur für MooTools? Ich bin "nicht geschickt" mit Coden, esscheint, als wäre es Dir so aus dem Eff-Eff eingefallen. |
Nein, das Snippet stammt aus dem Quelltext von der von dir verlinkten Seite 
Aber für Mootools schüttel ich mir das aus dem Handgelenk:
| Code: | window.addEvent('scroll', function() {
var s = window.getScroll();
$('float').tween('top', $('float').getStyle('top').toInt(),s.y+100);
}); |
#float muss absolut positioniert sein. (in dem Fall hier die Ausgangsposition top: 100px;)
Hier ein kleines Beispiel:
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>float menu</title>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var s = window.getScroll();
$('float').tween('top', $('float').getStyle('top').toInt(),s.y+100);
window.addEvent('scroll', function() {
var s = window.getScroll();
$('float').tween('top', $('float').getStyle('top').toInt(),s.y+100);
});
});
</script>
<style type="text/css">
#float {
background: #eee;
height: 100px;
position: absolute;
top: 100px;
width: 100px;
}
#fake_height {
height: 5000px;
}
</style>
</head>
<body>
<div id="float">float</div>
<div id="fake_height">blub</div>
</body>
</html> |
Ach ja, und wenn du sowieso Mootools einsetzt kannst du auch gleich noch das SmoothScroll
Plugin anstatt des anderen scripts benutzen: http://mootools.net/docs/Plugins/SmoothScroll
Zuletzt bearbeitet von status4 am Sa 04.10.2008 12:03, insgesamt 3-mal bearbeitet
|
|
| |
|
|
Esteffan
Threadersteller
Dabei seit: 05.01.2006
Ort: -
Alter: 47
Geschlecht: -
|
Verfasst So 05.10.2008 21:23
Titel
|
|
|
| status4 hat geschrieben: | | Esteffan hat geschrieben: | | Dein Snippet für jQ: gibts da auch etwas ähnliches, nur für MooTools? Ich bin "nicht geschickt" mit Coden, esscheint, als wäre es Dir so aus dem Eff-Eff eingefallen. |
Nein, das Snippet stammt aus dem Quelltext von der von dir verlinkten Seite
Aber für Mootools schüttel ich mir das aus dem Handgelenk... |
Ich bin beeindruckt bedanke mich.
Ich werde versuchen es einzubauen.
Wenn ich ein Ergebnis erzielt habe, werde ich es Dich hier wissen lassen.
MfG,
Esteffan
|
|
| |
|
|
Esteffan
Threadersteller
Dabei seit: 05.01.2006
Ort: -
Alter: 47
Geschlecht: -
|
Verfasst Do 16.10.2008 20:20
Titel
|
|
|
Hi, bin jetzt grad soweit mit meinem neuen Websitebaker Template, dass ich das einzubauen versuche.
Dem Link folgend:
finde ich kein "Plugin" zum Download, oder was soll ich da machen?
Gruß,
Esteffan
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Slide in - Effekt gesucht
[JS / Suche Effekt] Slide zum Ankerpunkt
Wie realisiere ich eine Webseite mit Slide-In Effekt
Javascript Hyperlink Fade // Slide Effekt
Webdesign / Schicker Slide-Effekt - mit CSS realisierbar?
back to top pfeil...
|
|
Willkommen auf dem Portal für Mediengestalter
