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

Fade Images for full screen slideshow

 WSnext buy now ADD on effect - Thank-you for help with maintaining the website and for understanding my time

Fades images in then stretches them to fit the full screen on desktops
Option to add css for mobile to change from fixed position center and scale the images for tablets and below
Changes the images with a timer you can set. All with only a few lines of code that is extremly efficient

The images I'm using for the example are 800px X 400px wide you can use different sizes with similar dimensions
When you use large images optimize them for download you can read more about image use in the CSS section
I optimize my image download size to be as close to 40KB as possible these images for example are close to 45KB


The larger or better quality image you use the better this looks, try to use a rectangle like a computer screen
You can place text or other images on top of these with web studio the same as you always do
You could place a DRAW TAB SHAPE on your page and change it's opacity in the CREATE TAB to make it transparent
Other options are to use a screen wide banner like I did here with a transparent png background
You wouldn't use a large image on your mobile site anyway but iOS up to v5 has a problem with fixed images
this will work for a mobile site with the added option it changes it to a full width image that scrolls for those screens
You can always ask me on the WSnext forum if you have any questions

To set it up in web studio quickly you attach your images called 1.jpg 2.jpg etc.
copy / paste some code and it's all ready to run for you on preview
No images with this one so no download

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


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


These effects are not officially part of Web Studio

Web Studio 5 - How to make a fade in background show that fills the entire screen - by Web Studio Next