Hi, I’m trying to make rollovers with a more gradual transition than the basic rollover action available in the program. They would transition from one image to another…like the example link photos (barrels). Any ideas?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
This uses this background image
http://evolveartistic.s3.amazonaws.com/portfolio/2/palatine-cover.jpg
and some clever but simple css to change the background position of the
image when hovered. Also, some css3 to animate the transition between the
background positions.
–
Ernie Simpson
On Wed, Jan 30, 2013 at 1:36 PM, Diane email@hidden wrote:
Hi, I’m trying to make rollovers with a more gradual transition than the
basic rollover action available in the program. They would transition from
one image to another…like the example link photos (barrels). Any ideas?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Tim Plumb has a CSS3 Rollover Action at his http://freewayactions.com site. It’s for CSS3-aware browsers only, so anything built on WebKit or the latest Gecko (Safari, Chrome, and Firefox); or IE 10 and up 8-).
Walter
On Jan 30, 2013, at 2:29 PM, Ernie Simpson wrote:
This uses this background image
http://evolveartistic.s3.amazonaws.com/portfolio/2/palatine-cover.jpgand some clever but simple css to change the background position of the
image when hovered. Also, some css3 to animate the transition between the
background positions.–
Ernie SimpsonOn Wed, Jan 30, 2013 at 1:36 PM, Diane email@hidden wrote:
Hi, I’m trying to make rollovers with a more gradual transition than the
basic rollover action available in the program. They would transition from
one image to another…like the example link photos (barrels). Any ideas?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Diane,
You can do this in Freeway with the CSS Transparency Rollover Action;
http://www.freewayactions.com/test/css-transparency-rollover/
The process is a little more complex than it should be as the front image (the monochrome image) needs to be placed inline within a regular html box. This box has the colour image set as its background. When the user mouses over the box the opacity of the foreground image is set to zero allowing the colour image shines through from below.
Here’s an example;
http://d.pr/PSwq
…and here’s a Freeway 5.5 Pro file for you to explore;
http://d.pr/f/WZIx
Regards,
Tim.
On 30 Jan 2013, at 18:36, Diane wrote:
Hi, I’m trying to make rollovers with a more gradual transition than the basic rollover action available in the program. They would transition from one image to another…like the example link photos (barrels). Any ideas?
Experienced Freeway designer for hire - http://www.freewayactions.com
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
The CSS Transparency Rollover worked. I had to fuss with it a bit. What I was looking for had an image change. I ended up using the FW rollover action combined with the CSS transparency. I think that was okay to do, I’m not a programmer, just a designer. The end result looks very pretty. Oh, and I had to make the output PNG (it didn’t like jpegs).
Thanks very much. You were very helpful.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Diane,
Did you look at the example file I posted? A combination of a background image and the Action applied to an inflow foreground one should have done it for you. The images I used were JPGs although it should work perfectly well with any web-friendly image file format.
Regards,
Tim.
On 30 Jan 2013, at 21:47, Diane wrote:
The CSS Transparency Rollover worked. I had to fuss with it a bit.
FreewayActions.com - Freeware and commercial Actions for Freeway Express & Pro - http://www.freewayactions.com
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I had looked at your files but it didn’t work the same on mine. I might have had too much going on. I went back into my file and made a separate layer for the rollover graphic. I was then able to eliminate the rollover action. Yay. It looks so stinkin nice. Thank you!
http://www.pirih.com/test/philo.html
http://www.pirih.com/test/strat.html
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
It appears to work only on Safari. I know that it stated that but I was hoping it would be okay on a few other browsers. The rollover works in Firefox and IE but is the abrupt image swap not the soft transition. Anyone know if it’s a matter of technology catching up to the new CSS? Most of my clients are Windows users and most likely wouldn’t have Safari as their browser.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Most of my clients are Windows users and most likely wouldn’t have Safari as their browser.
CSS3 features like transition are not properly supported until IE10, later Chrome and later FF - so to answer your question - a lot of Windoze users wont appreciate it, but then again they dont even see rounded corners.
My answer is implement now and let them catch up. By all means let them know that your site is 'Best viewed in a Modern Browser" with a link to their download pages.
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
