Step-by-step tutorial for customizing Parallax animation

Hello,
I am using Creative for the website of an oil company from Libya.
I managed to change the green pastures for the desert landscape they have over there.
As you can see here http://murzuqoil.com/site/
I wanted to change the grass on the island to green as well, but they liked the idea of having some king of "oasis" in the middle of the desert.
But...
But I'm having trouble understanding how to change the other images and get them to do what I have in mind.
For instance, I have to change one of the balloon for a small aircraft that I have designed and have it fly across the screen.

How come there is no step-by-step instructions, or a some tutorial on how to do that ?
You seem to assumes that we know how parrallax works. I don't. But with you help, I might get this theme to do the job.

1. How do I get an aircraft png to fly across ?
2. How do I add links on my aircraft png pointing to pages or post articles inside ?


Thank you in advance for your kind help.
site >> http://murzuqoil.com/site/

Templates are created for users who at most would want to change images in parallax, not animation itself. To do that, You need at least modern knowledge of how it works, as beginning and end coordinates are set in HTML elements (and Yu don't need JavaScript knowledge to operate on them).

If You will look closely to HTML source of homepage, You will see, thet elements has data-start and data-end parameters which describes path of movement. They can be provided with % of screen left and top position.
And that's all. Play with numbers to see how they respond in animation.

Also You might want to check this file:
templates/gk_creative/css/gk.stuff.css
it has declarations of sprite files:

Code: Select all

.gkp-island {
   background: transparent url('../images/parallax/island.png') no-repeat 0 0;
   height: 422px;
   width: 855px;
}


they declare image, its width and height (this is for an element with class gkp-island)

Also You might want to check this file:
templates/gk_creative/css/gk.stuff.css
it has declarations of sprite files:

Code: Select all

.gkp-island {
   background: transparent url('../images/parallax/island.png') no-repeat 0 0;
   height: 422px;
   width: 855px;
}


they declare image, its width and height (this is for an element with class gkp-island)

I think you got confused. I cannot find templates/gk_creative/css/gk.stuff.css in the wordpress folder. Are you sure you are not mistaking the thread for a Joomla thread ?

The ccs for island is here:
/wp-content/themes/Creative/css/shortcodes.template.css



Basically, I would like to know how do I go about replacing a balloon with another png.

I see that the balloons are in the folder /themes/Creative/images/parallax/balloon.png




But on the screen, the balloons look like individual image files.
With respect to what css file is this being done ? I want to be able to get a small aircraft in the scenery. In my wildest dreams, could you tell me in plain words which files to look at, so I can mimmick the animation of the balloons ? That's all I ask. I don't want a course in parallax animation. I just want to get this job done, make the client happy, and move on. I'll learn parallax at a later time.

I managed to get the plane in there.




Step by step instructions:
-----------------------------

1. Find the png file you want to include in the parallax animation
2. Measure it carefully, width and height in pixels (make sure it's not too big)
3. Go to Appearance > widgets
4. Decide wether you want to include your png transparent file in the header part or the bottom part of the parallax animation
5. For the header part: open widget HEADER TOP
6. For the bottom part: open widgt HEADER BOTTOM (that is my cas, because the plane is seen in bottom part)
7. Decide which image from the demo you want to replace. In my case, it was the Balloon4. I found that out using Firebug. But you can find that by trial and error too.
8. Upload your png transparent file (in my case, the aircraft) to /themes/Creative/images/parallax/
9. Now you have go to wp-content/themes/Creative/css/shortcodes.template.css
and add the CSS for that new png transparent file you want to animate. In my case, the aircraft, I called it jet.png, and I copied the exact CSS of the png I want to replace. In my case, balloon4…
But don't forget to replace the height and width with the ones from your new png transparent file, in my case, jet.png

Code: Select all

.gkp-jet {
   background: transparent url('../images/parallax/jet.png') no-repeat 0 bottom;
   height: 120px;
   width: 217px;
}


10. Save and refresh, and voila. Your png file is now part of the animation. You can now adjust its path by playing with the number in the the widget…


NOW, I DON'T KNOW HOW TO LINK MY PLANE TO AN ARTICLE POST.

Can support please tell me ?

Now that I figured out how to add images and stuff, how do I make the image clickable from the shortcodes in the widgets ?

How can I make the aircraft link to a page or post ?

This is the content of the widget:

Code: Select all

[parallax name="gkp-background-bottom" area="700" height="819"]
gkp-jet;Jet;10%,10%;80%,20%
gkp-ballon5;Ballon II;80%,60%;50%,40%
gkp-island;Island;50%,-125%;50%,58%
gkp-cloud_front1;Cloud front I;90%,-30%;90%,35%
gkp-cloud_front5;Cloud front II;0%,-30%;0%,35%
[/parallax]

With WP widget, sadly You can't make it clickable as the code is automatically transformed to html div element by javascript. But with javascript knowledge You could inject <a> element into correct div, make it 100% width and 100% height, and add address to it.

With WP widget, sadly You can't make it clickable as the code is automatically transformed to html div element by javascript. But with javascript knowledge You could inject <a> element into correct div, make it 100% width and 100% height, and add address to it.

I need your help. Can you at least tell me how to translate the shortcodes into HTML in order to place the HTML directly into a text widget where I could apply the link ? Could you translate this into HTML divs for me ?

Code: Select all

[parallax name="gkp-background-bottom" area="700" height="819"]
gkp-jet;Jet;10%,10%;80%,20%
gkp-ballon5;Ballon II;80%,60%;50%,40%
gkp-island;Island;50%,-125%;50%,58%
gkp-cloud_front1;Cloud front I;90%,-30%;90%,35%
gkp-cloud_front5;Cloud front II;0%,-30%;0%,35%
[/parallax]

You can open source-view in your web browser and copy ready html.