Flowing picture file

Hi,
is there one example to show one flowing picture file, from top to bottom, on the web-page, using PHP?
LVL 11
HuaMin ChenProblem resolverAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
It's called "parallax scrolling".  Here's a site https://ihatetomatoes.net/product/parallax-scrolling-master-class/  that offers a class on it (not free but you might find it elsewhere).  It doesn't have anything necessarily to do with PHP.
0
HuaMin ChenProblem resolverAuthor Commented:
Is there any way to achieve the same within one web page developed by PHP codes? Thanks a lot
0
Dave BaldwinFixer of ProblemsCommented:
I don't know but I doubt it.  All those effects are done by JavaScript and HTML5 in the browser.  Not in PHP on the server.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

HuaMin ChenProblem resolverAuthor Commented:
Yes, Javascript and Html 5 is fine to my case. But your previous link is giving me one tool to buy and not one clear example that I expect to have.
0
Dave BaldwinFixer of ProblemsCommented:
I don't have a "clear example".  Maybe someone else can give that to you.  Although you could look at the source code for one of those pages.
0
Ray PaseurCommented:
Let's try to disambiguate the problem a little bit.  The client makes a request of the server, usually via HTTP, the server prepares and sends a response document, and the client uses the response document to show the human what the server sent.  You need to understand this protocol clearly if you want to develop web sites and applications because it is the underpinning of all of the other technologies.  Client ==> Request.  Server ==> Response.
http://www.experts-exchange.com/articles/11271/Understanding-Client-Server-Protocols-and-Web-Applications.html

PHP is a server-side technology, usually used in concert with a database like MySQL.  By itself, it cannot "do anything" - it can only respond to client requests and send the response documents it generates.

The client side of the process uses the response document information sent from the server to create visual behaviors that affect the appearance information of the viewport on the iPhone, Android, iPad, laptop or desktop computer.  

Here's a rough breakdown of the responsibilities in the response document:
HTML - semantic markup - shows us the meaning of data elements
CSS - visual presentation - affects the color, size, location of data elements
JavaScript - animation and behavior of the viewport - can interact with HTML and CSS to change the way the browser window looks

So to try to clarify your question - the browser makes a request, the server makes a response (usually instantaneously), sending the response document which consists of HTML, CSS, and JavaScript.  The server disconnects, and then the browser begins to build the document object model for the window of the viewport.  At this point, the web page comes into view, but by then the server is already disconnected, so PHP cannot "do anything" until another request is received from the client machine.

If you want animations on the browser, these need to be built into the JavaScript.  PHP can write the JavaScript, or more likely, send the URL of a JavaScript library, but it cannot directly affect the way the browser looks, moves images, etc.  All of that part is pre-planned and packaged into the response.

A Google search for "scrolling images" will undoubtedly turn up many examples of the JavaScript (often jQuery) that can do this sort of thing.  "Image carousel" is another term associated with this visual effect.
0
Slick812Commented:
greetings HuaMinChen, , I do NOT understand what you want or need to have on your Web Page? ?, Your Question as - "show one flowing picture file, from top to bottom", puzzles me? I do not understand what you mean by - "flowing picture file" - - Do you mean that the web page
"Scrolls" up and down with scroll bars, for an Image on the browser that is taller (height) than the top to bottom view of the viewable browser window or app? ?  Or some other view change that is your - "from top to bottom" - ? ?
Is this about a Mobil App browser view and larger images?

If you are referring to to the differential (different move rate) of web page "Background" image, and the scroll movement speed of the foreground contents, that some call "parallax scrolling",
then you maybe will need to have help doing it, to get the BG Image size and move rate to be synchronized wid the contents, may take some effort, even with the javascript, css helper plugins. .
Do you mean something like this site -
     http://www.iutopi.com/
0
HuaMin ChenProblem resolverAuthor Commented:
I mean the relevant picture file is moving from top to bottom on the screen, and do repeat the same action again and again.
0
Slick812Commented:
I really did not think of "image moving from top to bottom on the screen, and repeat"
But here is my javascript version for an image to do something like that -
<!DOCTYPE HTML>
<html lang="en"><head><title>Drop Move Image</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />

<style>
body{background:#f8e8ff;margin:4px 1px; height:100%;}


#mov1{position: absolute; left: 44px; top: 1px;
  width: 123px; height: 123px;
  }

#butMov {position: absolute; right: 4px; top: 4px;}

.tx3D {
text-align: center;
font: 250% Helvetica, Sans-Serif;
font-weight:bold;
letter-spacing: 1px;
color: #DCC0ba;
    text-shadow: 0 1px 0 #999999, 0 2px 0 #888888,
    0 3px 0 #777777, 0 4px 0 #666666,
    0 5px 0 #555555, 0 6px 0 #444444,
    0 7px 0 #333333, 0 8px 7px rgba(0, 0, 0, 0.4),
    0 9px 10px rgba(0, 0, 0, 0.2);
}
</style>

<script>/* <![CDATA[ */
var posTop = 1, imgMov = false, si = 0;

function id2ob(elmt1){return document.getElementById(elmt1);}


function movImg(){
posTop += 3;
if(posTop > (ds[1]-128)) posTop=1;
imgMov.style.top = posTop+"px";
}

function startImg(but) {
if(si) {clearInterval(si); si=0; but.innerHTML = "Start Move";}
  else {si = setInterval ("movImg()", 17); but.innerHTML = "Stop Move";}
}

function docSize() {
var wid = 0, hgt = 0;
if(typeof(window.innerWidth) == 'number'){
  wid = window.innerWidth;
  hgt = window.innerHeight;
  }else if(document.documentElement && 
    (document.documentElement.clientWidth||
	document.documentElement.clientHeight)) {
  wid = document.documentElement.clientWidth;
  hgt = document.documentElement.clientHeight;
  }else if(document.body&&
    (document.body.clientWidth||
    document.body.clientHeight)){
  wid = document.body.clientWidth;
  hgt = document.body.clientHeight;
  }
return [wid, hgt];
}
/* ]]> */</script>
</head><body>
<img id="mov1" src="piet.png" />
<button id="butMov" onclick="startImg(this)">Start Move</button>
<h3 class="tx3D" >Drop Move Image</h3>
<hr>
Other Content<br />Here
<script>/* <![CDATA[ */
var ds = docSize();
document.write("<br /><b>Width is= "+ds[0]+", Height is= "+ds[1]+"</b>");
imgMov = id2ob("mov1");
/* ]]> */</script>
</body></html>

Open in new window


There are several factors that I did not even try to deal with in this, but it does repeat the movement of an image -
<img id="mov1" src="piet.png" />
from the top to the bottom of the initial view box of the browser app
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.