Link to home
Start Free TrialLog in
Avatar of Peter Chan
Peter ChanFlag for Hong Kong

asked on

Flowing picture file

Hi,
is there one example to show one flowing picture file, from top to bottom, on the web-page, using PHP?
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

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.
Avatar of Peter Chan

ASKER

Is there any way to achieve the same within one web page developed by PHP codes? Thanks a lot
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.
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.
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.
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.
https://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.
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/
I mean the relevant picture file is moving from top to bottom on the screen, and do repeat the same action again and again.
ASKER CERTIFIED SOLUTION
Avatar of Member_2_248744
Member_2_248744
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial