Willkommen auf dem Portal für Mediengestalter
|
|
Autor |
Nachricht |
JoeMelRamos
Threadersteller
Dabei seit: 11.02.2012
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 03.07.2012 20:50
Titel Scrollen animiert HElllppppp :( |
|
|
Hey Leutz!
Versuche seit genau 3 stunden diese Funktion. Klickt man oben auf dem Menü einen Link, so wird
automatisch runtergescrollt. Mache das mit jQuery (animate). Bin dankbar für jede Hilfe.
und hier meine Codes ^^
html
Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Portfolio</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.7.1.min.js">
</script>
<script type="text/javascript" src="jQuery.js">
</script>
</head>
<body>
<div id="normal">
<div id="navigation">
<table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr>
<td><a href="#haus">Haus</a></td>
<td><a href="#person">Person</a></td>
<td><a href="#arbeit">Arbeit</a></td>
<td><a href="#treffen">Treffen</a></td>
<td><a href="#recht">Recht</a></td>
</tr>
</table>
</div>
<div id="eltern">
<div id="eins"></div>
<div id="top"><a href=""><img src="links.gif" width="50" height="50" /></a></div>
<div id="haus">HAUS</div>
<div id="person">PERSON</div>
<div id="arbeit">ARBEIT</div>
<div id="treffen">TREFFEN</div>
<div id="recht2">RECHT</div>
<div id="recht"><table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr>
<td>Impressum</td>
<td>Kontakt</td>
<td>Keine Ahnung</td>
</tr>
</table>
</div>
<div id="unten"></div>
</div>
</div>
<div id="bw-scaling-background">
<div>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<img src="kaffee.jpg">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
|
css
Code: |
* { margin: 0; padding: 0; }
html, body, #bw-scaling-background, #bw-scaling-background table, #bw-scaling-background td { height:100%; width:100%; overflow:hidden; }
#bw-scaling-background { z-index: 0;}
#bw-scaling-background div { height:200%; left:-50%; position:absolute; top:-50%; width:200%; }
#bw-scaling-background td { text-align:center; vertical-align:middle; }
#bw-scaling-background img { margin:0 auto; min-height:50%; min-width:50%; }
#normal{ position:absolute; top:0; left:0; z-index:70; overflow:auto; width:100%; height:100%}
#navigation{position:fixed;
top:0px;
width:100%;
height:60px;
color:white;
text-align:center;
padding:16px;
z-index:100;
font-family:Verdana, Geneva, sans-serif;}
#eltern{position:absolute;
width:100%;
height:5200px;
backgound-color: black;}
#eins{position:fixed;
width:100%;
height:60px;
background-color:#CC3333;
z-index:71;}
#haus{
position:absolute;
top:800px;
width:100%;
height:500px;
background-color:#CC3333;
font-family:Verdana, Geneva, sans-serif;
font-size:20px;
text-align:center;
color:white;}
#person{position:absolute;
top:1600px;
width:100%;
height:500px;
background-color:#CC3333;
font-family:Verdana, Geneva, sans-serif;
font-size:20px;
text-align:center;
color:white;}
#arbeit{position:absolute;
top:2400px;
width:100%;
height:500px;
background-color:#CC3333;
font-family:Verdana, Geneva, sans-serif;
font-size:20px;
text-align:center;
color:white;}
#treffen{position:absolute;
top:3200px;
width:100%;
height:500px;
background-color:#CC3333;
font-family:Verdana, Geneva, sans-serif;
font-size:20px;
text-align:center;
color:white;}
#recht2{position:absolute;
top:4000px;
width:100%;
height:500px;
background-color:#CC3333;
font-family:Verdana, Geneva, sans-serif;
font-size:20px;
text-align:center;
color:white;}
#recht{position:absolute;
bottom:0px;
width:97%;
color:white;
text-align:center;
padding:16px;
z-index:80;
font-family:Verdana, Geneva, sans-serif;}
#top{position:absolute;
bottom:70px;
right:0px;}
#unten{position:absolute;
bottom:0px;
width:100%;
height:50px;
background-color:#CC3333;}
|
jQuery
Code: |
$(function(){
$(document).ready(function() {
$('a[href*=#]').bind("click", function(event) {
event.preventDefault();
var ziel = $(this).attr("href");
$('html,#normal').animate({
scrollTop: $(ziel).offset().top
}, 2000 , function (){location.hash = ziel;});
});
return false;
});
});
|
DANKE
Zuletzt bearbeitet von choise am Di 03.07.2012 21:28, insgesamt 1-mal bearbeitet
|
|
|
|
|
Karlarsch
Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht:
|
|
|
|
|
Anzeige
|
|
|
eden1983
Dabei seit: 02.03.2012
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Mi 04.07.2012 09:04
Titel
|
|
|
Habe diese Funktion verwendet: ( Leider habe ich den Autor dafür nicht mehr zur Hand - war aber zur Nutzung freigegeben *zum Glück* )
Diese Funktion sollte greifen, wenn du auf einen Anker verweist.
$(document).ready(function() {
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
var locationPath = filterPath(location.pathname);
var scrollElem = scrollableElement('html', 'body');
$('a[href*=#]').each(function() {
var thisPath = filterPath(this.pathname) || locationPath;
if ( locationPath == thisPath
&& (location.hostname == this.hostname || !this.hostname)
&& this.hash.replace(/#/,'') ) {
var $target = $(this.hash), target = this.hash;
if (target) {
var targetOffset = $target.offset().top;
$(this).click(function(event) {
event.preventDefault();
$(scrollElem).animate({scrollTop: targetOffset}, 2000, function() {
location.hash = target;
});
});
}
}
});
// use the first element that is "scrollable"
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}
});
Bin aber selbst noch nicht soweit, dass ich da etwas umschreiben könnte. ( >bringe mir gerade selbst die Materie bei ).
Vielleicht hilft es dir
|
|
|
|
|
Alex
Dabei seit: 29.11.2005
Ort: Dortmund
Alter: 37
Geschlecht:
|
|
|
|
|
fyll
Dabei seit: 20.09.2003
Ort: Augsburg
Alter: 39
Geschlecht:
|
Verfasst Mi 04.07.2012 14:41
Titel Re: Scrollen animiert HElllppppp :( |
|
|
JoeMelRamos hat geschrieben: | ...
Versuche seit genau 3 stunden diese Funktion. Klickt man oben auf dem Menü einen Link, so wird
automatisch runtergescrollt. Mache das mit jQuery (animate). Bin dankbar für jede Hilfe.
... | nimm mal lieber position().top ^^
|
|
|
|
|
|
|
|
Ähnliche Themen |
[Suche] Countdownzähler -animiert-
eigener Bildschirmschoner, animiert
(Flash) animiert-wechelnde Bilder
PDF animiert blättern? Und pflegeleicht/einpflegbar?
CSS - DIV scrollen
CSS scrollen im div tag
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben. Du kannst auf Beiträge in diesem Forum nicht antworten. Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|