hallo ich habe folgendes Problem, und zwar verwende ich ich für meine neue Webseite "Scrollorama", komischerweise funtkioniert es nicht. Kann mal jemand über den Code schauen und mir sagen was ich falsch gemacht habe?
Code:
<!DOCTYPE html><html>
<head>
<!-- Title -->
<title>Seite</title>
<!-- Charset -->
<meta charset="UTF-8">
<!-- Description -->
<meta name="description" content="">
<!-- Author -->
<meta name="author" content="">
<!-- Keywords -->
<meta name="keywords" content="">
<!-- CSS -->
<!-- CSS - reset -->
<link href="reset.css" type="text/css" rel="stylesheet">
<!-- CSS - library -->
<link href="lib.css" type="text/css" rel="stylesheet">
<!-- CSS - style -->
<link href="style.css" type="text/css" rel="stylesheet">
<!-- CSS - font -->
<link href="font.css" type="text/css" rel="stylesheet">
<!-- jQuery -->
<script src="jquery-1.10.2.min.js"></script>
<!-- Scrollorama -->
<script src="Javascript/jquery.scrollorama.js"></script>
<script src="Javascript/jquery.lettering-0.6.1.min.js"></script>
<!-- Icon -->
<link href="favicon.ico" type="image/x-icon" rel="shortcut icon">
</head>
<body>
<h1 id="willkommen">Willkommen</h1>
<div id="navigation">
<ul>
<li><a href="#bilder"><img src="Images/32px/images.png" width="32" height="32" style="border: 0px;" /> Bilder </a></li> <span id="i">I</span>
<li><a href="#videos"><img src="Images/32px/play.png" width="32" height="32" style="border: 0px;" /> Videos </a></li>
</ul>
</div>
<div id="starttext"><p>Herzlich Willkommen auf meiner Seite,<br /> hier findest du zahlreiche Bilder und Videos.</p></div>
<div id="wrapper">
</div>
<script>
$(document).ready(function() {
// initialize the plugin, pass in the class selector for the sections of content (blocks)
var scrollorama = $.scrollorama({ blocks:'.scrollblock' });
// assign function to add behavior for onBlockChange event
scrollorama.onBlockChange(function() {
var i = scrollorama.blockIndex;
$('#console')
.css('display','block')
.text('onBlockChange | blockIndex:'+i+' | current block: '+scrollorama.settings.blocks.eq(i).attr('id'));
});
// lettering.js for coolness
$('#title').lettering();
$('#title span')
.css('display','block')
.css('float','left');
$('.char9').css('padding-left','6px');
// animate the title letters to explode
scrollorama
.animate('#title',{ duration: 300, property:'zoom', end: 8 })
.animate('#author',{ duration: 10, property:'z-index', end: 0 });
$('#title span').each(function() {
scrollorama
.animate($(this),{ duration: 400, property:'top', end: Math.random()*120-180 })
.animate($(this),{ duration: 300, property:'rotate', start:0, end:Math.random()*720-360 });
});
// animate some examples
scrollorama
.animate('#unpin',{ duration:500, property:'padding-top', start:400, pin:true })
.animate('#fade-in',{ delay: 400, duration: 300, property:'opacity', start:0 })
.animate('#willkommen',{ delay: 400, duration: 300, property:'left', start:-1400, end:0 })
.animate('#rotate-in',{ duration: 800, property:'rotate', start:720 })
.animate('#zoom-in',{ delay: 200, duration: 600, property:'zoom', start:8 })
.animate('#any',{ delay: 700, duration: 200, property:'opacity', start:0 })
.animate('#any',{ delay: 800, duration: 200, property:'letter-spacing', start:18 });
// animate the parallaxing
scrollorama
.animate('#parallax2',{ delay: 400, duration: 600, property:'top', start:800, end:-800 })
.animate('#parallax3',{ delay: 200, duration: 1200, property:'top', start:500, end:-500 });
// animate some easing examples
var $easing = $('#easing'),
$clone = $easing.clone().appendTo('#examples-easing')
.css({position:'relative',top:'-2.95em'})
.lettering();
$easing.css({ color: '#131420', textShadow: '0 1px 0 #363959' });
easing_array = [ 'easeOutBounce',
'easeOutQuad',
'easeOutCubic',
'easeOutQuart',
'easeOutQuint',
'easeOutExpo' ];
$clone.find('span')
.each( function( idx, el ){
scrollorama.animate( $(this), { delay:400, duration: 500,
property:'top', end: 300,
easing: easing_array[idx] });
})
});
</script>
</body></html>