[Pro] How do I do this?

I’m creating a site based on the look of http://agroamerica.com. How do I create the top portion on home page (the text box scrolls up and covers background photo)? Using Freeway7 Any help would be GREATLY appreciated! THANK YOU!!


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

Have a look at this thread and Richard’s example

http://www.freewaytalk.net/thread/view/125569#m_125575

David


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

I definitely will, thanks, DeltaDave!!


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

In fact … recently I updated my pure-css project here: http://www.freewaytalk.net/thread/view/152276

:slight_smile:

Richard


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

Thank you, Richard! I’ll check this out! :slight_smile:


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

Looking at the original post, Bren is looking for a static header, not parallax.
Something like this: ontwerpzaam.nl

Apart from the sliding stuff it’s the menu that stays on to pof the browser window.


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

Exactly! Static header! First step is knowing what you call this. :slight_smile: Thank you!


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

Looking at the original post, Bren is looking for a static header, not parallax.

That wasn’t clear from the OP which links to the Agroamerica parallax page - maybe I was just overthinking the problem.

And the clue that he is looking for is Fixed in Window positioning. With the item selected look under the 1st Tab in the Inspector where the options are absolute and Fixed in Window for standalone items.

There are also actions like Walter’s Sticker action which you can download from ActionsForge Sticker - ActionsForge

D


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

Excellent!! Thank you DeltaDave and Richard–you’ve helped me tremendously!


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

Richard, that is impressive!

Out of interest, how did you get the animation effects into FW? The way the header turns pink half way down is also really nice. How was that done?

Regards

Mark

On 12 Apr 2015, 3:23 pm, Richard van Heukelum wrote:

Looking at the original post, Bren is looking for a static header, not parallax.
Something like this: ontwerpzaam.nl

Apart from the sliding stuff it’s the menu that stays on to pof the browser window.


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

That was done by a javascript trigger.

This script adds a style (.fixed) to the nav-div as soon as a monitored (and in this case empty with the id ‘nav-trigger’) div reaches the top of the screen:

function sticky_relocate()
{
    var window_top = $(window).scrollTop();
    var div_top = $('#nav-trigger').offset().top;
    if (window_top > div_top)
    {
        $('#nav-container').addClass('fixed');
    } else
    {
        $('#nav-container').removeClass('fixed');
    }
}

$(function ()
{
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

The style .fixed has a different background-color and text-color defined, and the changes are ‘animated’ in css:

#nav-container-mobile.fixed {
color: #fff;
top: 0px;
z-index: 1000;
background-color: rgba(204,0,106,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
height: auto;
width: 100%;
transition: background-color 1s;
-webkit-transition: background-color 1s;
position: fixed
}

#nav-container-mobile.fixed a, #nav-container-mobile.fixed a:link, #nav-container-mobile.fixed a:visited {
color: #fff
}

#nav-container-mobile.fixed a:hover {
color: #cc006a
}

#nav-container.fixed {
color: #fff;
position: fixed;
z-index: 1000;
background-color: rgba(204,0,106,0.95);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
height: auto;
width: 100%;
transition: background-color 1s;
-webkit-transition: background-color 1s;
top: 0px
}

#nav-container.fixed > div {
background-image: url(“…/Resources/logo-ontwerpzaam-navbar.png”);
background-repeat: no-repeat;
background-position: 0 50%;
background-size: contain;
transition: background 1s;
-webkit-transition: background 1s
}

#nav-container.fixed > div .fwNavItem .sub .fwNavItem a {
background-color: rgba(204,0,106,0.9) !important;
transition: background-color .5s;
-webkit-transition: background-color .5s
}

#nav-container.fixed > div .fwNavItem .sub .fwNavItem a:hover, #nav-container.fixed > div .fwNavItem .sub .fwNavItem a:focus {
background-color: rgba(0,0,0,0.75) !important;
transition: background-color .5s;
-webkit-transition: background-color .5s
}

#nav-container.fixed a, #nav-container.fixed a:link, #nav-container.fixed a:visited {
color: #fff !important
}

#nav-container.fixed a:hover {
background-color: rgba(204,0,106,0.95);
transition: background-color .5s;
-webkit-transition: background-color .5s
}


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

Thanks Richard, did you add these via the ‘extended’ facility in FW or did you just refer to the external files?

Thanks

Mark


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

The easy/lazy way : You could insert both before the , don’t forget to surround the js with , and the CSS with and .

The clean/pro way :

  • Create 2 subfolders in your site pane, called css and js
  • Create a new file in each folder: snippets.css and snippets.js
  • Check the page-extensions in the Inspector, they should be .css and .js
  • Apply Tim’s Source Code Snooper page-action to both pages. You’ll have to publish first before you can clean up the default source code
  • Insert the styles and the javascript in the appropriate pages via the SCS action
  • Back to the html page; you will need a link to both css and js files. Personally I would choose the section … you will override everything you’d like from that position:

Paste:

<!-- I often use this to describe whatever happens from here on -->

<link rel=stylesheet href="css/snippets.css">
<script src="js/snippets.js"></script>

<!-- All additionals are loaded -->

That should cover it :slight_smile:


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

Thanks a million Richard, I’m trying to stretch my FW knowledege and this will really help :slight_smile:


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

You’re welcome Mark,

in the meanwhile I’m working hard to finalize my website and get it ready for launch sometime next week or so. It’s all in the details :wink:


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