Interactive Video Background

[RKissane]

Jimi,

You are basically correct.

The way I understand this( I have only used this once on a site) is first off the picture is not the web page background it is just a picture. Both the picture and text box are scrolling but like you said, you set the speed on the picture to be a slower speed. As the user gets to where the picture is revealed on the page, as they scroll down the picture would move slower so you could have more than one picture on a site. Now I am not sure about this (maybe some can jump in) but because the text box is moving faster you may have problems with one picture scrolling over the other unless you take into consideration on where on the web page the pictures are located.

As I recall, Gary had done an example of the parallax effect when he reviewed the Designer Pro 365 and he may have had more than one picture on a page with this effect. Maybe Gary can jump in.

Ray

[Jimi King]

OK making some progress with this. Can anybody tell me, with a supersite that includes stretchy graphics, is there an optimum width for the page or is it irrelevant?

[gwpriester]

Unless you are creating a horizonal supersite, keep the width what you would be comfortable viewing. Around 900-1200px.

[Jimi King]

Actually I'm cool with 1920 wide but I guess that most people aren't.

[nobbyy]

Hi all

Apologies for hijacking the thread but I am keen to use one of the codepen backgrounds that Acorn found.

I hae tried evey way I can think of to import the codepen code, using htnl. Iframe etc with poor results.

The closest I got is show on the attaced image but as you can see some of the coding is also visible - can anyone explain how to import the codepen info correctly please?

[rhdpre]

I do not know if I understand you ... do you want a "moody" background image? ...


In this page www.neoclick.es/equipa/index.htm I have a background image that is changing .... (only looks at the ends of the page and is the same as the central animation) ... I do it with javascript ..

In the Page Tab (or website) in Body put



<img src = "fondo1.jpg" class = "slider" />
<img src = "fondo2.jpg" class = "slider" />
<img src = "fondo3.jpg" class = "slider" />
<img src = "fondo4.jpg" class = "slider" />
<script>
var imagenes = document.getElementsByClassName("slider"),
total = imagenes.length;
indice = 0;

imagenes[indice].style.opacity = 1;

var slider = {
show: function(){
imagenes[indice].style.opacity = 0;
indice = indice == total - 1 ? 0 : ++indice;
imagenes[indice].style.opacity = 1;
}
};

setInterval(slider.show, 5000);
</script>



IN HEAD:






<style id="jsbin-css">
body{
background: black;
}

.slider{
width: 100%;
height: 100%;
position: fixed; z-index: -1;
//margin: -7em 0 0 -10em;
top: 0;
left:0;
opacity: 0;
transition: opacity 1s;
background-repeat: repeat
}
</style>