Image effects in Web Studio
Web Studio 5 Tutorials and Add On's - supporting you take your website that next step

Coded Sliding Image Effects

 Remember to donate if you use a tutorial - Thank-you for help with maintaining the website and for understanding my time

Coded sliding image effects with any content below the image after they slide.
You use an HTML object for these that you attach the image to,
then you can code the look of the content with CSS and HTML.

AUTO vs CODED SLIDING
The auto sliding is generated for you so there is no need for coding
The text below the image uses the built in title tag so no CSS style other than the color options
The coded sliding uses an HTML object and if you know a little HTML you can do a lot more with those

Examples of the effects provided with some caption ideas that you could code

left

Lockheed P-38 Lightning

The Lightning truly shined in the Pacific theater.
Seven of the top eight scoring USAAF aces in the Pacific flew the P-38. By the end of the war the P-38 had downed over 1,800 Japanese aircraft, with over 100 pilots becoming aces.


Click for more

right

Supermarine Spitfire Video

up

Vought F4U Corsair

Marines quickly took to the F4U, no other single engine fighter could take more damage than the Corsair. Unbelievably the huge radial would run even with one or more cylinders shot off.


Made famous by pilots such as "Pappy" Boyington of the Black Sheep Squadron, remember the TV show? One raid at Kahili they circled a base that had 60 zeros with only 24 F4Us and shot down 20 of them without a single loss.

down

TBM AVENGER

Options and how it's used

• You use images you have made and attach them to the HTML object
• You can add any one of the 4 different effects to as many images as you like
• The basic code will look like the example below for you to build on
• With a little css and HTML you can make these captions look like you want them to
• The auto version is easier to use but this one has more options if you know basic coding

The example provided for coding

THIS IS THE HEADING

This is the caption text
More caption text for the example

Copy / paste the code as shown in the tutorial

Attach your image to an HTML object
and use it as a "place holder"

So the HTML object looks like the picture

Then you can build on the CSS provided
to make the captions look like you want

There is no download for this add on

The buy now link will show you how to copy/paste the add on into Web Studio
If you need any additional help feel free to ask on the WSnext forum

$6.95

After the secure "Paypal" link you
will be taken to the code page

These effects are not officially part of Web Studio

Thank-you!

Web Studio 5 - Coded sliding image effects with captions under the image - by Web Studio Next

aaaaaaaaaaaaiii