Solved

How is this effect done?

Posted on 2014-01-15
4
525 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 53

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 53

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 53

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

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

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

Suggested Solutions

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn how to dynamically set the form action using jQuery.

734 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