Hi, i’ve been using Freeway for years and whenever i’ve wanted to create some great effects i’ve downloaded actions to do it, but since moving to 7 they don’t seem obvious or at least i can’t find them.
The effects i’m after are on the rollovers on the themes page
I’d like to be able to use text and have movement options like quint etc to make the effects more appealing.
I’ve tried using the hype action but it seems to be a bit problematic with responsive pages even though both the freeway site and the hype work independently.
At the moment i’m fighting hard to avoid wordpress and just buying a theme as i’m a big fan of Freeway so if anyone can help with any of this it would be great.
Thanks
Ian
freewaytalk mailing list
email@hidden
Update your subscriptions at:
You’d probably be referring to the ‘stacked-images-technique’ we used to use years ago. Nowadays you just create your desired effects via CSS (#menucontainer a:link, #menucontainer a:hover, etc.).
That can simply be achieved via the CSS Menus action which you apply to the div which contains the menu. It’s pretty straightforward, lacks a pretty few options like reba support, but nevertheless it will do whatever you’re trying to achieve.
But … the old stuff should work as well. Stack the 2 images you’d like to use for rollover, group them and insert them wherever you want them.
Richard
freewaytalk mailing list
email@hidden
Update your subscriptions at:
I suppose you’re referring to the ease-in and ease-out animations which replace the blunt over/off states? Can you take a look at the menu items of my current site-in-development and report back if this is what you’re looking for:
Richard
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Yes exactly that!
i’ve been looking at all sorts of ways to get those effects and have been going around in circles - it’s a great looking site, please tell me how you did it
thanks
Ian
freewaytalk mailing list
email@hidden
Update your subscriptions at:
This should be too hard at all, the only thing you’d have to add to your stylesheet is some additional css to the corresponding a:link and a:hover states. In case you’re using the CSS Menus action, Freeway will publish the CSS right onto the page specific stylesheet. You can add additional attributes to or (override) existing styles.
How’s that possible? Well, when you take a look at the published source code of your html-document you will notice that there are several stylesheets called for:
master.css (contains all styles for elements that are set up on your master page)
page.css (contains all styles for elements that are added to the elements already present, or master elements that are altered and … the css menus styles, strangely enough even when they’re set up on a master page)
custom.css (all styles present on your custom style sheet)
When duplicate style-names are present on the stylesheets, the most recent read file has superiority. Knowing this, you will realize that your custom stylesheet always is the last one read, so as soo as you create a duplicate a style name here, all settings that differ from settings in the master.css and/or page.css will be overwritten.
So … when creating your menu using the CSS Menus action, Freeway will add the styles for this menu onto the page.css stylesheet. In this case, you want/need to add some attributes to the existing (CSS Menus) styles published onto the page.css stylesheet in order to animate them; we want to let the background color ease in and ease out.
First we need to publish the file with the CSS Menus set up in order to be able to find out the CSS Menus style names we need to target. For as long as you have just 1 menu at a page, the css style names always will be the same, for each and every single project.
You will end up with these two styles that contain the link and hover states and where you will need to add some additional attributes to to create the ‘animation’:
#fwNav1 .fwNavItem .sub .fwNavItem a
#fwNav1 .fwNavItem .sub .fwNavItem a:hover
NOTE - DON’T FEEL INTIMIDATED. UP UNTILL HERE IT’S JUST SOME INFORMATION ABOUT HOW & WHAT. THE FOLLOWING IS ALL YOU WILL NEED TO (GET USED TO) DO AND/OR KNOW
Open your style-editor and add those two (tag) styles to your (custom) stylesheet. We’ll do this step-by-step:
Add a new style and (in the tag-field) name it ‘#fwNav1 .fwNavItem .sub .fwNavItem a’ (without the quotes), clear out the class style field.
Select the ‘Extended’ button, which will pop-up a small window where you can add the additional attributes.
Add these these 2 attributes: (Name) transition / (Value) background-color .5s and (Name) -webkit-transition / (Value) background-color .5s
Repeat these steps for the style ‘#fwNav1 .fwNavItem .sub .fwNavItem a:hover’
Now on mouse-over and mouse-out the background-color will ease in and out. That’s about it.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Hi Richard, nice site by the way…
I notice that you use a “back to top” button, which I was just looking for. ( Seen it at another website and found it pretty useful also for smaller screensizes)
Would you be so kind an give me some hints how to achieve this:
It is first displayed after you scroll down the page and disappears when you are at top of the page again. ( in all media width)
It is displayed always in the right corner at the bottom of the page ( in all media width)
I suppose it is some extended code…
Thanks a lot, Hanna
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Hi Richard, nice site by the way…
I notice that you use a “back to top” button, which I was just looking for. ( Seen it at another website and found it pretty useful also for smaller screensizes)
Would you be so kind an give me some hints how to achieve this:
It is first displayed after you scroll down the page and disappears when you are at top of the page again. ( in all media width)
It is displayed always in the right corner at the bottom of the page (in all media width)
I suppose it is some extended code…
Thanks a lot, Hanna
To be honest Hanna, this ‘back to top’ feature is one of Tim Plumb’s actions (the Simple Buttons Action, AnimationFX Action and Scroll to top Action) that exclusively come with the Monarch template which you can purchase at Freewaystyle and only will cost you about €23.
There’s not a lot done ‘on my site’ outside Freeway’s GUI, but it did require some extended (knowledge of) CSS and a few lines of javascript in order to change the appearance of the menu bar after scrolling (where an empty div is watched and triggers the applied class as soon as this div passes the top of the browser window. It even changes the appearance of the submenu while it’s opened
Note: I will use a separate menu for mobile navigation in stead of Freeway’s ‘CSS Menus’ responsive one, like I did on this project. I very much like the features offered by CSS Menu Maker and for €15 a year you can create the best mobile menu’s you’d like to.
Hi Hanna,
It should look similar to the Action as I used it as the basis for the Scroll to top Action for my Monarch template; http://www.freewaystyle.com/monarch/
You’ll see (or have seen) attribution and credits listed in the head of the included JavaScript files. One of the reasons I ended up using that code was that it does the page slide using CSS transitions rather than relying on jQuery or another JS library which, IMHO, is overkill for such a simple effect.
Regards,
Tim.
On 5 Jan 2016, at 15:19, star-lights email@hidden wrote:
It looks pretty similar and there are some options.
There are 2 states, slide to right and left each with a „new picture“.
When I check the examples on http://simplegang.com/css-image-effects/
Which is a very good explanation on how to use the css codes, I can only find the pan effect but this is a slide only to one direction.
Can someone help me out?
Perhaps with a FW example, if someone has one already of course.
I wonder too would it be possible to let display more than 1 picture to the right and 1 picture to the left?
Thanks a lot
Hanna
PS: * Tim, your scroll to top action works like a charm.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Seems to me to just be a background-position on :hover that will change the positioning of the used background-images.
That’s just css. You apply a background-image twice the width of the object itself which contains both states, horizontally aligned. The css takes care of the transition/positioning … it should look something like this:
.someclass {
background-position: top left;
}
.someclass a:hover {
background-position: top right;
}
.someclass {
transition: background-position 0.5s ease;
}
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Richard, thank you for your input. This is kind of you.
I thought first too that the background-image is twice the width of the object, but when you drag it you see the graphic size.
Perhaps someone else know what code is used? (And if it is even possible to use more than one mouse-over graphic item for each direction?)
Maybe softpress-towers will share their little secret?
Cheers, Hanna
freewaytalk mailing list
email@hidden
Update your subscriptions at:
is ONE big image and the script applies classes depending where on the image you hover.
####The effect
As nice as redundant. A user basically needs time to understand what’s going on. It is not obvious enough and therefor not progressive enrichment - at least not in my terms.
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
maybe you are right. It is just so that I am tinkering and testing a bit mainly with css and like to improve my knowledge, especially how to build in the effects into FW or where to put code. I collect bits and pieces…but of course one must take care for the usability.
Cheers,
Hanna
freewaytalk mailing list
email@hidden
Update your subscriptions at:
highly appreciate improving skills and levels which is damn fair.
I tell you a secret now (which should be kept between the both of us):
By making the materialize (google’s material design) ready for Freeway, I recognized, that my skills are pretty low. But the one I think I’m pretty good in, is MarkUp. I don’t mean “MarkUp-item” , I mean markup-language - in our terms better known as “Green Rectangle Placing and Combination”.
All the rest is mostly just one class away - so adding the correct class to the required DIV. This is what I did so far and is nowadays my personal start for all upcoming projects:
The interesting part on this library is, that it has most of the lost effects inbuilt such as Accordion, Carousel (Slider) but as well as some new effects such as "Parallax, Cards, Card Reveal … ". I even extended it by some of my preferred or most wanted stuff.
Or in other words:
You never “build” effects in Freeway, you just prepare the skeleton making them happen!
So nothing changed towards the past - except of everything, somehow!
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
