-
November 8th, 2012, 07:55 AM
#1
[RESOLVED] Flip a picture
OK, the title is a tad misleading.
I have this script :
Main.js
PHP Code:
// wave sub objects
function WSubObj(num, img, object, iwidth, iheight){
this.S = num;
var o = document.createElement("span");
o.style.overflow = "hidden";
o.style.width = iwidth + "px";
o.style.height = iheight + "px";
o.style.top = (num-1) + "px";
var oI = document.createElement("img");
oI.src = img.src;
oI.style.left = "0px";
oI.style.top = (-iheight + num) + "px";
oI.style.width = iwidth + "px";
oI.style.height = iheight + "px";
o.appendChild(oI);
document.getElementById("wave_zone").appendChild(o);
this.spa = o.style;
this.ddx = 0
this.PX = 0
this.x = 0
if (num > 0) this.prev = object[num - 1];
}
WSubObj.prototype.main = function(power){
var x0 = (this.S == 0) ? Math.random() * power : this.prev.x;
this.x = this.PX += (this.ddx += ( (x0 - this.PX - this.ddx) * 2 ) / 2.8) / 1.4;
this.spa.left = Math.round(this.x) + "px";
}
// wave effect object
var weff = {
// variables
power : 2.2,
// inner variables
object : new Array(),
simg : null,
iwidth : 0,
iheight : 0,
// initialization function
init : function() {
for (var i = 0; i < this.iheight; i++)
this.object[i] = new WSubObj(i, this.simg, this.object, this.iwidth, this.iheight);
},
// main loop function of water effect
run : function() {
var i = 0, o;
while (o = weff.object[i++]) o.main(weff.power);
setTimeout(weff.run, 100);
}
};
// on page load
window.onload = function() {
weff.simg = document.getElementById("source_img");
weff.iwidth = weff.simg.width;
weff.iheight = weff.simg.height;
// set necessary width and height for wave zone element
var css = document.getElementById("wave_zone").style;
css.height = weff.iheight + "px"; //(weff.iheight/4 - 1) + "px";
css.width = weff.iwidth + "px";
weff.init();
weff.run();
}
With this CSS file :
Main.css
PHP Code:
#main_object {
position: relative;
}
#main_object img {
display: block;
}
#main_object #wave_zone img {
position:absolute;
left:-9999px;
}
#main_object span {
position:absolute;
font-size:0px;
}
#main_object #wave_zone {
position:relative;
display:block;
overflow:hidden;
background-color:#000;
}
Together they give a nice watery, wavy effect for one of my pictures. Problem is: The picture got flipped upside down. I have tried to play around with the script to see if I can identify the flipping part. I am unable to.
Can anyone help identify the part where the picture gets flipped upside down?
-
November 8th, 2012, 11:42 AM
#2
Re: Flip a picture
What does the HTML look like to match it? I would guess something like the following...but what is main_object?
Code:
<span id="wave_zone">
<img src="http://www.google.com/logos/2012/bram-stoker-2012-hp.jpg" id="source_img" alt="" />
</span>
If the post was helpful...Rate it! Remember to use [code] or [php] tags.
-
November 9th, 2012, 12:58 AM
#3
Re: Flip a picture
Yes, that is basically it. I just have some CSS inside as well as call to a JS function :
Code:
<div id="main_object" align="center">
<img id="source_img" border="0" src="images/cornerblock.png" width="288" height="172" style="position:absolute; top:-626;left:370;overflow:hidden" showOnTop(this); >
<div id="wave_zone" style="position:absolute; top:-626;left:370;overflow:hidden;background-color: transparent"
onmouseover="showOnTop(this)"></div>
</div>
-
November 9th, 2012, 02:25 AM
#4
Re: Flip a picture
Ah, I fixed it. I edited my Main.CSS file to include the CSS Transformations, like this :
PHP Code:
#main_object #wave_zone { position:relative; display:block; overflow:hidden; background-color:#000; -moz-transform: scaleY(-1); -webkit-transform: scaleY(-1); -o-transform: scaleY(-1); transform: scaleY(-1); -ms-filter: flipv; /*IE*/ filter: flipv; /*IE*/ }
Thanx for your help anyways!
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|