[Pro] How do I do this?

Bren · April 11, 2015, 10:55pm

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

David_McCallum · April 12, 2015, 12:37am

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

Bren · April 12, 2015, 1:37am

I definitely will, thanks, DeltaDave!!

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

Richard · April 12, 2015, 2:20pm

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

Richard

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

Bren · April 12, 2015, 2:26pm

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

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

Richard · April 12, 2015, 3:23pm

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

Bren · April 12, 2015, 5:23pm

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

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

David_McCallum · April 12, 2015, 7:57pm

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

Bren · April 14, 2015, 12:56pm

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

MarkSmith · April 14, 2015, 1:20pm

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

Richard · April 15, 2015, 8:49am

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

MarkSmith · April 15, 2015, 9:32am

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

Richard · April 15, 2015, 10:11am

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

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

MarkSmith · April 15, 2015, 2:34pm

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

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

Richard · April 15, 2015, 10:54pm

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

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