Solved

How is this effect done?

Posted on 2014-01-15
4
506 Views
Last Modified: 2014-01-15
I see pages like:

http://www.bloomberg.com/quicktake/the-fall-of-gold/

http://www.wix.com/website-template/view/html/1296

http://www.shape5.com/demo/index.php?cleanout

where there Is a background image and the semi-transparent page scrolls over it except for a fixed header.  I like this effect but I have not learned a lot of javascript/jquery etc. so
"view source" isn't making it obvious to me whether this is a tricky or unreliable way to build a page.

My first instinct was to pay for a template so that I could avoid the learning curve but if it is not as complicated as all that I'll just make an effort to learn the technique. So...

How is it done? The examples have a lot of referenced scripts and such making it hard for me to read and I'd like a super-simple example that is not so busy doing other stuff.
 
Thanks
0
Comment
Question by:Kenny Hopton
  • 3
4 Comments
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39784488
First, I like to start with a responsive grid.  I typically use bootsrap or foundation.  http://getbootstrap.com/  

Bootstrap has what they call a sticky header http://getbootstrap.com/examples/navbar-fixed-top/

As long as you have bootstrap css and js in your files this will work by adding classes that are ready to go navbar navbar-default navbar-fixed-top
 <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="../navbar/">Default</a></li>
            <li><a href="../navbar-static-top/">Static top</a></li>
            <li class="active"><a href="./">Fixed top</a></li>
          </ul>
        </div><!--/.nav-collapse -->

Open in new window

0
 

Author Comment

by:Kenny Hopton
ID: 39784497
Great, that seems to establish the fixed header.  The transparency is also something I have not learned.  Is the fixed background a la the wix example difficult?
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 500 total points
ID: 39784506
The background has a transparency.  If you look the code via a console you can see what selector is being used.
.wysiwyg_viewer_skins_area_RectangleAreac1-bg {
overflow: hidden;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: rgba(255, 255, 255, 0.890196);
}

Open in new window

0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39784508
All the browsers have a console. I use chrome https://developers.google.com/chrome-developer-tools/docs/console and in firefox you use firebug https://getfirebug.com/

If you are really starting out and kind of hacking away, it would be very helpful and time saving in the end if you take a time out and spent several hours a day going through the basic code for html, css.  Then do javascript basic to jquery basic to javascript intermediate etc.

http://www.codecademy.com/learn

Even if some of it you know, start at the start and work your way through.  Don't try and do it all in one sitting.  If you spend a total of 5 or 10 hours on there over the course of a few days, you will save yourself 10 times that down the road.
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
This video teaches users how to migrate an existing Wordpress website to a new domain.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

785 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question