Google Style Navigation
If you have ever seen some Google pages like Google Wallet or Google Drive. You'll see this type of navigation bar. You can implement it on your small projects. Cheers.
If you have ever seen some Google pages like Google Wallet or Google Drive. You'll see this type of navigation bar. You can implement it on your small projects. Cheers.
<div id="topbar">
<div id="topbar">
<div class="inner-topbar">
<ul style="margin-top:-15px;">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div> <!-- inner-topbar -->
</div> <!-- topbar -->
/* Author: Hassan Yousuf / UPDATED 6/13/2014 */
/* Author: Hassan Yousuf / UPDATED 6/13/2014 */#topbar {padding: 34px 1px;
width: 100%;
background-color: #FAFAFA;
background-image: gradient(linear, left top, left bottom, from(#FAFAFA), to(#F5F5F5));
background-image: linear-gradient(top, #FAFAFA, #F5F5F5);
background-image: linear-gradient(top, #FAFAFA, #F5F5F5);
background-image: linear-gradient(top, #FAFAFA, #F5F5F5);
background-image: linear-gradient(to bottom, #FAFAFA, #F5F5F5);
border-bottom: 1px solid #EBEBEB;
}
.inner-topbar {margin: -5px auto;
clear: both;
display: block;
position: relative;
}
#topbar ul {
background: #fff
}
#topbar ul li {
float: left;
list-style: none;
margin-right: 10px;
}
#topbar ul .floatRight {
float: right;
margin-right: 0px;
margin-left: 10px;
background: transparent;
}
#topbar ul .highlight, #topbar ul .highlight a {
background: transparent;
}
#topbar ul li a {
padding: 10px 19px;
padding-top: 0px;
border-bottom: 0px;
display: block;
color: #000;
text-decoration: none;
transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#topbar ul li a:hover {
border-bottom: 5px solid #39C;
margin-bottom: 0px;
}
#topbar ul li.current {
padding: 0px 19px;
display: block;
color: #39C;
text-decoration: none;
margin-bottom: 0px;
}
// @see http://paulirish.com/2011/requestanimationframe-for- smart- animating/
// @see http://paulirish.com/2011/requestanimationframe-for-smart-animating/window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element){
window.setTimeout(callback, 1000 / 60);
};
})();
// set the scene size
var WIDTH = 900,
HEIGHT = 600;
// set some camera attributes
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
// get the DOM element to attach to
// - assume we've got jQuery to hand
var $container = $('#container');
// create a WebGL renderer, camera
// and a scene
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.Camera( VIEW_ANGLE,
ASPECT,
NEAR,
FAR );
var scene = new THREE.Scene();
// the camera starts at 0,0,0 so pull it back
camera.position.z = 300;
// start the renderer - set the clear colour
// to a full black
renderer.setClearColor(new THREE.Color(0, 1));
renderer.setSize(WIDTH, HEIGHT);
// attach the render-supplied DOM element
$container.append(renderer.domElement);
// create the particle variables
var particleCount = 1800,
particles = new THREE.Geometry(),
pMaterial = new THREE.ParticleBasicMaterial({
color: 0xFFFFFF,
size: 20,
map: THREE.ImageUtils.loadTexture(
"images/particle.png"
),
blending: THREE.AdditiveBlending,
transparent: true
});
// now create the individual particles
for(var p = 0; p < particleCount; p++) {
// create a particle with random
// position values, -250 -> 250
var pX = Math.random() * 500 - 250,
pY = Math.random() * 500 - 250,
pZ = Math.random() * 500 - 250,
particle = new THREE.Vertex(
new THREE.Vector3(pX, pY, pZ)
);
// create a velocity vector
particle.velocity = new THREE.Vector3(
0, // x
-Math.random(), // y
0); // z
// add it to the geometry
particles.vertices.push(particle);
} // create the particle system
var particleSystem = new THREE.ParticleSystem(
particles,
pMaterial);
particleSystem.sortParticles = true;
// add it to the scene
scene.addChild(particleSystem);
// animation loop
function update() {
// add some rotation to the system
particleSystem.rotation.y += 0.01;
var pCount = particleCount;
while(pCount--) {
// get the particle
var particle = particles.vertices[pCount];
// check if we need to reset
if(particle.position.y < -200) {
particle.position.y = 200;
particle.velocity.y = 0;
}
// update the velocity
particle.velocity.y -= Math.random() * .1;
// and the position
particle.position.addSelf(
particle.velocity);
}
// flag to the particle system that we've
// changed its vertices. This is the
// dirty little secret.
particleSystem.geometry.__dirtyVertices = true;
renderer.render(scene, camera);
// set up the next call
requestAnimFrame(update);
}requestAnimFrame(update);