[Pro] How is this text reveal done?

Hello everyone,

I really love the way the text reveals itself on the main image on this site. Is there a very easy way to do this in Freeway Pro 7?

Thank you so much!

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yes, it’s a lovely looking site. What interests me is how the background images scroll at a different speed from the foreground stuff. Very nice effect.

Trev

On 9 Apr 2015, at 12:59, Mark Lawrence email@hidden wrote:

Hello everyone,

I really love the way the text reveals itself on the main image on this site. Is there a very easy way to do this in Freeway Pro 7?

Thank you so much!

Mark

https://www.easthalldesign.com


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

Basically it’s done (or can be done) by animate css Redirecting to Animate.css and wow js mynameismatthieu.com - contact with domain owner | Epik.com.

I usually use waypoints - another js library to achieve the delays and more.

But allow me another note here:

I’m glad never having touched RapidWeaver ever.

My basic grid persists of 5 DIVs, and I’m always fear of DIVitis. Compared with this page-example, I think I’m super fine with it. Simply unbelievable to examine this code structure.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

HI Thomas,

Very many thanks for your reply.

I was hoping I could lean on your knowledge one more time. I really love the fadeInUp from Redirecting to Animate.css

You say that you usually use waypoints though. Could you describe how I could implement a similar effect to fadeInUp in freeway pro 7. I’ve looked into it and I think it’s a bit above my pay grade :wink:

Thank you immensely in advance.

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Mark,
If you want to do this the easy way then the Animation FX Action that ships with the Monarch template is based on the animate and wow.js frameworks and allows you to animate elements on the page as they come into view;
http://www.freewaystyle.com/monarch/
This is just one of three Actions that currently only ship with this template.
Regards,
Tim.

FreewayStyle.com - Freeway templates and parts to download, use and explore - http://www.freewaystyle.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Tim,

I like your Monarch template a lot! How tricky would it be to convert it to a responsive design? I see that it is inline, so I’m thinking it’s pretty feasible. But I’d like to hear your thoughts.

Doty


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Doty,
I’ve a responsive version of the template for Freeway 7 about 60% done. Some of the content (the Simple Buttons Action items for example) need a little more thought to work with responsive layouts and require a few modifications to the Action to adjust at each breakpoint.

Until that happens it shouldn’t be a major undertaking to adapt the existing template to a flexible and responsive layout. You should be able to make it responsive yourself by changing the currently fixed width items to ‘Fixed (%)’, the width to 100% and the max-width to 960px (see screen grab below). This will make sure the elements will flex to the width of the browser (or container) but not grow beyond their maximum size. From here you can then change items on an item by item basis at each breakpoint using the new Media types setting in Freeway 7 to control how they display in the browser.
https://dl.dropboxusercontent.com/u/795566/freewaystyle/monarch.png

Regards,
Tim.

On 9 Apr 2015, at 21:59, Doty wrote:

I like your Monarch template a lot! How tricky would it be to convert it to a responsive design? I see that it is inline, so I’m thinking it’s pretty feasible. But I’d like to hear your thoughts.


FreewayStyle.com - Freeway templates and parts to download, use and explore - http://www.freewaystyle.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Mark,

I think you’d better go Tim’s route - cause it is the Freeway one.

I’m not really known as a person who emphasizes the strict:

“I have an application - so where is the action?”

So all I can do is telling you, that I do this entirely external

Embedding the css file given you by animate such as:

<link rel=stylesheet type="text/css" href="path/to/the/filelocation.css">

adding some additional styles for the delay:

.delay-500ms {
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}

.delay-1000ms {
animation-delay: 1s;
-webkit-animation-delay: 1s;
}

.delay-2000ms {
animation-delay: 2s;
-webkit-animation-delay: 2s;
}

.delay-3000ms {
animation-delay: 3s;
-webkit-animation-delay: 3s;
}

.delay-4000ms {
animation-delay: 4s;
-webkit-animation-delay: 4s;
}

ending up in adding a class to the item I’d like to animate via item extended dialogue such as:

class="animated fadeInRight delay-500ms"

This all works above the fold. For things behind it, JS is required.

I haven’t wrapped this in a screencast so far. I’ll do - but if it will be only available in the lounge. There I can much better have an eye on my subscribers - teaching them the “how to” but also giving them the fair words of warning without influencing the public at large.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Awesome guys! I’m lovin it!

Thomas, when I’m working on my own files and using a technique I learned in your awesome screencasts, I hear your accent in my head as I work and smile! :slight_smile:

Doty


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sounds a bit like this :slight_smile:

IMAGE ALT TEXT HERE


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Just wanted to thank Thomas and Tim for all the feedback and advice. I’ll be putting them into motion over the next couple of days, with that in mind, Tim - I’ll be in touch soon! :slight_smile:

Thomas, if the screen cast is ready sometime soon please let me know as I’d be interested to sign up and learn the ropes.

All the best and enjoy your day’s,

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Mark,

can confirm hereby that I produced two episodes on animate css this weekend. But have to inform you as well, that I haven’t covered the JS stuff so far (behind the fold).

But with this, you’d be able to create the text-effects on load (or above the fold) such as seen on walk-through-the-park.

Cheers

Thomas

@Doty

Hm. Never thought about mind-manipulation just by strange accent. But it’s indeed worth further thinking about :-)))


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options