cross browser transitions

[jeff]

It's time to write yet another javascript slideshow. I've made a few,
and what is possible changes as time goes on changes.

What is reasonable to do in modern browsers? Is there anything other
than setting transparency? I suppose this must still be done with
filters in IE and style.MozOpacity in Moz. Anything with standards support?

No scriptaculous or it's ilks please. Need a few ideas, it's been a
while since I've looked through the DOM.

Jeff

 

[David Mark]

  It's time to write yet another javascript slideshow.  I've made a few,
and what is possible changes as time goes on changes.

Not much. I've been using the same stuff for over ten years. What
has changed is the way they are delivered. Webkit-based browsers -
for example - can do transitions with little or no script. Others are
sure to follow suit.

What is reasonable to do in modern browsers?

Depends on what you mean by "modern browsers" (and the context of your
application).

Is there anything other
than setting transparency?

Yes, CSS is not limited to opacity.

I suppose this must still be done with
filters in IE and style.MozOpacity in Moz.

No, most browsers (leaving out IE, which still uses filters) support
the "opacity" style these days.

Anything with standards support?

Yes, CSS has standards. All that is involved is to change styles
(lots of standards to choose from) over time. See also
window.setInterval:-

https://developer.mozilla.org/en/DOM/window.setInterval

   No scriptaculous or it's ilks please. Need a few ideas, it's been a
while since I've looked through the DOM.

Very good idea to avoid those.

http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/bf5fdb575cd7b354#

If you want some ideas of what is possible with CSS and/or filters,
see the test page for My Library:-

http://www.cinsoft.net/mylib.html

(one of the tests is a configurable slide show).

 

[jeff]

Not much. I've been using the same stuff for over ten years. What
has changed is the way they are delivered. Webkit-based browsers -
for example - can do transitions with little or no script. Others are
sure to follow suit.

So, Safari? And then whatever IE has in the filters bag.

Depends on what you mean by "modern browsers" (and the context of your
application).

FF3+, Safari3+, IE7+

Fall back would be no effect.

Yes, CSS is not limited to opacity.

But what would be useful for a slideshow? I can think of setting
margins inside a wrapper div with height, width and overflow: hidden to
"push" items into and out out of the container.

I can't really think of anything else.

No, most browsers (leaving out IE, which still uses filters) support
the "opacity" style these days.

I've got that...

Yes, CSS has standards. All that is involved is to change styles
(lots of standards to choose from) over time. See also
window.setInterval:-

https://developer.mozilla.org/en/DOM/window.setInterval


Very good idea to avoid those.

http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/bf5fdb575cd7b354#

I never liked the Dreamweaver javascript either. I've spent a lot of
time ripping that junk out.

If you want some ideas of what is possible with CSS and/or filters,
see the test page for My Library:-

http://www.cinsoft.net/mylib.html

(one of the tests is a configurable slide show).

I can't seem to find the test of the configurable slideshow (or any
test for that matter). Can you give me a direct link?

Nice work on the code library!

Jeff

 

[Gregor Kofler]

jeff meinte:

But what would be useful for a slideshow? I can think of setting
margins inside a wrapper div with height, width and overflow: hidden to
"push" items into and out out of the container.

I can't really think of anything else.

Why do you want anything else? Transitions by fading are not only
common, but also pleasing to the eye. "Pushing" images are getting on
ones nerves pretty soon.
It's the same as with movies: They have (hard) cuts. George Lucas has
his "wipe" when cutting from outer space to the planet surface. That's
it. All other effects (twirls, zooms, explosions) are strictly for
abysmal home videos and porn movies.

Gregor

 

[David Mark]

   So, Safari? And then whatever IE has in the filters bag.





FF3+, Safari3+, IE7+

Fall back would be no effect.





  But what would be useful for a slideshow? I can think of setting
margins inside a wrapper div with height, width and overflow: hidden to
"push" items into and out out of the container.

   I can't really think of anything else.





I've got that...







I never liked the Dreamweaver javascript either. I've spent a lot of
time ripping that junk out.


   I can't seem to find the test of the configurable slideshow (or any
test for that matter). Can you give me a direct link?

It would be a long one.

http://www.cinsoft.net/mylib-builder.asp

Click the "Select All" button (selects all modules) and then "Test
(HTML)" (test in an HTML DOM). There is a test for swapping images
with transitions, as well as (X)HTML.

The one thing missing is the built-in CSS transitions. Those are the
focal point of the effects module in My Library, Too (an upcoming
sequel). It does have the DirectX transitions for IE, some of which
are pretty cool. So you can specify a built-in transition and fall
back to the interval-based effects.

   Nice work on the code library!

Thanks!

 

[jeff]

It would be a long one.

http://www.cinsoft.net/mylib-builder.asp

Click the "Select All" button (selects all modules) and then "Test
(HTML)" (test in an HTML DOM). There is a test for swapping images
with transitions, as well as (X)HTML.

That, is waaaaay cool!

The one thing missing is the built-in CSS transitions. Those are the
focal point of the effects module in My Library, Too (an upcoming
sequel). It does have the DirectX transitions for IE, some of which
are pretty cool. So you can specify a built-in transition and fall
back to the interval-based effects.

That makes sense. Then add the WebKit and whatever Moz comes up with.
I've used the transitions before in IE without a Moz substitute.

Thanks!

Your welcome, and Happy Holidays!

I think for my immediate needs I'll do something like this (since the
images will have different aspects):

<div id="wrapper">
<div id="image1">
<div id="image2">
</div>
</div>
</div>

#image1,#image2{
background-position: center center;
background-repeat: no-repeat;
background-image: url(some_image);
width: some_width_px;
height: some_height_px;
}

#image2{
background-image: url(some_other_image);
}


Then just run a simple opacity change on setInterval and change
images as needed.

Although I usually use slideshows for non commercial purposes, I do
have a commercial need this time. If I need more, I'll give you a shout
and buy a license.

Jeff

 

[David Mark]

   That, is waaaaay cool!

Thanks! I have a feeling many people have visited there and not found
the good stuff. I'm going to put the builder on the front page for
the next generation.

   That makes sense. Then add the WebKit and whatever Moz comes up with.
I've used the transitions before in IE without a Moz substitute.





  Your welcome, and Happy Holidays!

   I think for my immediate needs I'll do something like this (since the
images will have different aspects):

<div id="wrapper">
        <div id="image1">
                <div id="image2">
                </div>
        </div>
</div>

#image1,#image2{
        background-position: center center;
        background-repeat: no-repeat;
        background-image: url(some_image);
        width: some_width_px;
        height: some_height_px;

}

#image2{
        background-image: url(some_other_image);

}

   Then just run a simple opacity change on setInterval and change
images as needed.

Change the DIV's? That can work as well.

   Although I usually use slideshows for non commercial purposes, I do
have a commercial need this time. If I need more, I'll give you a shout
and buy a license.

I hereby grant you one free, unlimited license to use My Library.
Merry Christmas!

 

[Thomas 'PointedEars' Lahn]

jeff meinte:

Why do you want anything else? Transitions by fading are not only
common, but also pleasing to the eye. "Pushing" images are getting on
ones nerves pretty soon.
It's the same as with movies: They have (hard) cuts. George Lucas has
his "wipe" when cutting from outer space to the planet surface. That's
it. All other effects (twirls, zooms, explosions) are strictly for
abysmal home videos and porn movies.

As for twirls and explosions you might be correct, but never ignore the
zoom effects. They have become more common these days, both with computers
and movies, especially the slower ones (their quality tends to be low in
browsers, though.)

I also do not think George Lucas' movies are particularly good examples for
few transitions. For example, do not forget about these signature
transition effects of his:

- the sparkling effect on the Lucasfilm logo fading from green over
grey to gold
- for Star Wars, the hard cut-in of the main title after the soft fade-in
and fade-out of "... in a galaxy far, far away ..."
- for Star Wars, the reverse circle transition at the end of each chapter

However, this points out that transition effects should be used sparingly,
with a distinct purpose in mind.

The OP may want to look into
<http://www2.hawaii.edu/~ghoeffke/video_basics/shot_transitions1.htm> after
having checked the MSDN Library and a few transitions available in
presentation software such as OpenOffice.org Impress and Microsoft
PowerPoint.


PointedEars

 

[Gregor Kofler]

Thomas 'PointedEars' Lahn meinte:

As for twirls and explosions you might be correct, but never ignore the
zoom effects. They have become more common these days, both with computers
and movies, especially the slower ones (their quality tends to be low in
browsers, though.)

This is a fad now in "Multivision-AV" shows. After the umpteenth
sloooowly zooming slide, this becomes pretty boring and distracting.

I also do not think George Lucas' movies are particularly good examples for
few transitions. For example, do not forget about these signature
transition effects of his:

- the sparkling effect on the Lucasfilm logo fading from green over
grey to gold

Well, I wouldn't rate this as "transition" - I'd call it an animation
sequence.

- for Star Wars, the hard cut-in of the main title after the soft fade-in
and fade-out of "... in a galaxy far, far away ..."

Hmmm... I can't recall a transition there. IIRC the background remains
the same.

- for Star Wars, the reverse circle transition at the end of each chapter

Right, I forgot about this one.

However, this points out that transition effects should be used sparingly,
with a distinct purpose in mind.

ACK. Since the OP was asking for a slideshow, I'd suggest the
"conservative" approach with plain fades or something in that vein.
Well, "wipes" which I once did as a simple Java applet[1] might also be
an option.

The OP may want to look into
<http://www2.hawaii.edu/~ghoeffke/video_basics/shot_transitions1.htm> after
having checked the MSDN Library and a few transitions available in
presentation software such as OpenOffice.org Impress and Microsoft
PowerPoint.

The transitions in PowerPoint were (and I assume still are) mostly
awful. Particularly since they tend to be jerky and slow.


Gregor

[1]
http://photo.gregorkofler.com/

 

[Thomas 'PointedEars' Lahn]

Thomas 'PointedEars' Lahn meinte:

This is a fad now in "Multivision-AV" shows. After the umpteenth
sloooowly zooming slide, this becomes pretty boring and distracting.

I would not want to miss the zoom-in in "24", for example

Well, I wouldn't rate this as "transition" - I'd call it an animation
sequence.

There is no moving object there, so I think it only qualifies as a
transition, and a particularly complex one, too (I tried to do mimic this
in ASCII art for the "Bernd das Brot" film, in case you are interested ;-))

Hmmm... I can't recall a transition there. IIRC the background remains
the same.

You are forgetting about the stars

The transitions in PowerPoint were (and I assume still are) mostly
awful. Particularly since they tend to be jerky and slow.

I do not know; I am primarily using GNU/Linux (and OpenOffice.org).


PointedEars

 

[David Mark]

Thomas 'PointedEars' Lahn meinte:





This is a fad now in "Multivision-AV" shows. After the umpteenth
sloooowly zooming slide, this becomes pretty boring and distracting.



Well, I wouldn't rate this as "transition" - I'd call it an animation
sequence.


Hmmm... I can't recall a transition there. IIRC the background remains
the same.


Right, I forgot about this one.

That is how they all end IIRC.

However, this points out that transition effects should be used sparingly,
with a distinct purpose in mind.

ACK. Since the OP was asking for a slideshow, I'd suggest the
"conservative" approach with plain fades or something in that vein.
Well, "wipes" which I once did as a simple Java applet[1] might also be
an option.

Java? You can do that with My Library, combine the fade and clip
effects.

 

[jeff]

I hereby grant you one free, unlimited license to use My Library.
Merry Christmas!

Many thanks!

This years ridiculous XMAS Card:

http://www.sandbox101.info/2009_xmas_card.jpg

Cheers,
Jeff

 

[Gregor Kofler]

David Mark meinte:

On Dec 25, 5:19 pm, Gregor Kofler <[email protected]> wrote:

Java?

Yes. Java. It was my first and only venture into writing an applet. And
the code is 8 or 9 years old...

You can do that with My Library, combine the fade and clip
effects.

Are you sure? You need an extra alpha mask for the "fuzzy" edge that
sweeps from left to right. (I switched from a "complete" fade to this
effect, because the load on CPUs in those days was pretty bad, when
fading the complete image at once.)

Gregor

 

[jeff]

David Mark meinte:


Yes. Java. It was my first and only venture into writing an applet. And
the code is 8 or 9 years old...


Are you sure? You need an extra alpha mask for the "fuzzy" edge that
sweeps from left to right. (I switched from a "complete" fade to this
effect, because the load on CPUs in those days was pretty bad, when
fading the complete image at once.)

Take a look. Add a fade for the secondary effect. Nice effect, in
fact, very nice.

Instruction in his post to me.

Jeff

 

[Gregor Kofler]

jeff meinte:

Take a look. Add a fade for the secondary effect. Nice effect, in
fact, very nice.

I know. Both what it looks like and how to achieve it. However, it's not
the transition I've done then with my Java applet.

The effect was more like the one with my slider widget:

http://vxjs.gregorkofler.com/index.php?page=scorebar (the third of the
slider examples),

but with a wide "transition area" between both images.


Gregor

 

[David Mark]

David Mark meinte:


Yes. Java. It was my first and only venture into writing an applet. And
the code is 8 or 9 years old...


Are you sure? You need an extra alpha mask for the "fuzzy" edge that
sweeps from left to right. (I switched from a "complete" fade to this
effect, because the load on CPUs in those days was pretty bad, when
fading the complete image at once.)

The fuzzy edge is something that you would have to do with a DirectX
transition (gradient wipe I think), falling back to the clip/fade
combo for non-IE browsers. The DirectX transitions do not bog down
the PC like a Java applet.