пропозиції роботи
Artur
Pakuła
webdeveloper,
którego największa
pasja jest jego
pracą
Temat: Podmiana obrazka w ruszających się obrazkach
Witam wszystkich zainteresowanych!Przeszukałem już spory kawałek bustwa zwanego Internet i nie znalazłem odpowiedzi więc piszę do Was:
Na początek link online: http://tem.com.pl/images/testy/
i wersja kodowa gdybym wywalił online:
Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>parallaX - Interactive DHTML art-demos</title>
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
overflow: hidden;
}
body {
margin: 0px;
padding: 0px;
background: #000;
width: 100%;
height: 100%;
}
#screen {
position: absolute;
left: 50%;
top: 50%;
width: 600px;
height: 400px;
margin-left: -300px;
margin-top: -200px;
overflow: hidden;
background: #000;
outline: #FFF solid 50px;
}
#screen img {
position: absolute;
left: -2000px;
}
</style>
<script type="text/javascript">
// ===============================================================
// -------- parallax 3D scrolling ------
// script written by Gerard Ferrandez - Ge-1-doot - December 2005
// http://www.dhteumeuleu.com
// thanks to UncageArtist for the idea :)
// ===============================================================
var cx=0;
var cy=0;
var xm=0;
var ym=0;
var scr;
var img;
function parallax(rx, ry){
var pos = function(i, x, y) {
img[i].style.left = Math.round(x) + "px";
img[i].style.top = Math.round(y) + "px";
}
pos(0,-20+(rx/2),-80+(ry*2));
pos(1,140+(rx/2),70+(ry/2));
pos(2,160+(rx/3),100+(ry/3));
pos(3,180-(rx/2),130-(ry/2));
pos(4,200-rx,160-ry);
pos(5,240-rx*2,190-ry*2);
}
function mainloop(){
cx+=Math.round((xm-cx)/10);
cy+=Math.round((ym-cy)/10);
parallax(
-((scr.offsetWidth/2)-cx)/7,
-((scr.offsetHeight/2)-cy)/4.75
);
setTimeout(mainloop, 16);
}
onload = function(){
scr = document.getElementById("screen");
img = scr.getElementsByTagName("img");
parallax(0,0);
scr.onmousemove = function(e){
if (window.event) e = window.event;
xm = -scr.offsetLeft + (e.x || e.clientX);
ym = -scr.offsetTop + (e.y || e.clientY);
}
mainloop();
}
</script>
</head>
<body>
<div id="screen">
<img src="images/images.jpg">
<img src="images/5.png">
<img src="images/1.png">
<img src="images/2.png">
<img src="images/4.png">
<img src="images/3.png">
</div>
</body>
</html>
Jak widzicie ładnie to wygląda, pokazuje co miało pokazywać, ale dla mnie to za mało... Chciałbym móc zmieniać 1szy element, czyli potrzebuje podmiany odbrazka (dynamicznie naturalnie ) - ale to proste. Wykopałem że należy przez CSS zmieniać background z warością url. no to się bawiłem... ale poległem, bo mimo iż wyświetli mi się obrazek z tła to niestety siedzi w jednym miejscu (określonym przez CSS), a ja chcę by poruszał się jak frontowy obrazek (obrazek później zrobiłbym przeźroczysty i po problemie z widocznością żądanego tła).
Mam nadzieje że dość jasno opisałem. Domyślam się że jakaś wartość css załatwi sprawę ale nie mam pojecia jaka (position:xxxxx - probowałem).
Za każdą pomoc serdecznie podziekowania
