Imam sledeci kod:
Code:
...
<style type="text/css">
#animate-area {
width:inherit;
height:1080px;
background:url(images/0background.jpg) 0 0 repeat-x;
z-index:1;
}
</style>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript">
window.addEvent('domready',function() {
//settings
var duration = 50000;
var length = 700;
var count = 0;
var tweener = $('animate-area').set('tween',{ duration: duration, transition: 'linear' });
//showtime!
var run = function() {
tweener.tween('background-position','-' + (++count * length) + 'px 0px');
};
run();
run.periodical(duration);
});
</script>
</head>
<body>
<div id="animate-area">
...
...
<style type="text/css">
#animate-area {
width:inherit;
height:1080px;
background:url(images/0background.jpg) 0 0 repeat-x;
z-index:1;
}
</style>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript">
window.addEvent('domready',function() {
//settings
var duration = 50000;
var length = 700;
var count = 0;
var tweener = $('animate-area').set('tween',{ duration: duration, transition: 'linear' });
//showtime!
var run = function() {
tweener.tween('background-position','-' + (++count * length) + 'px 0px');
};
run();
run.periodical(duration);
});
</script>
</head>
<body>
<div id="animate-area">
...
gde se slika kontinuirano pomera levo-desno duz ekrana (preko CSS-a, iz #animate-area).
Da li neko moze da mi pomogne da povezem animaciju sa sledecim fade-om:
Code:
window.addEvent('domready', function() {
Element.implement({
fancyShow: function() {
this.fade('in');
},
fancyHide: function() {
this.fade('out');
}
});
});
...
<p>
<strong>Fancy: </strong><a href="javascript:$('blove2').fancyShow();">Show</a> | <a href="javascript:$('blove2').fancyHide();">Hide</a><br />
<img src="/dw-content/beatles-love.jpg" id="blove2" />
</p>
window.addEvent('domready', function() {
Element.implement({
fancyShow: function() {
this.fade('in');
},
fancyHide: function() {
this.fade('out');
}
});
});
...
<p>
<strong>Fancy: </strong><a href="javascript:$('blove2').fancyShow();">Show</a> | <a href="javascript:$('blove2').fancyHide();">Hide</a><br />
<img src="/dw-content/beatles-love.jpg" id="blove2" />
</p>