Solved

How is this effect done?

Posted on 2014-01-15
4
483 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article discusses four methods for overlaying images in a container on a web page
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
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.

762 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now