How to make this hovering navigation bar - html

So I've saw this website: http://unfold.no/
And I want to learn how to build navigation bar that is both transparent and can change color as function of background (if you scroll up or down you'll see it) .
I have limited experience with navigation bars that dates to old Dreamweaver versions, so forgive me for the generality of the question... Any advise of where to start will be appreciated.

I guess your issue can be solved by reading the answer on this question:
Changing classes with animation depending on scroll position
Basically, in the example you are showing, the menu has a position: absolute on the page, which positions it on the top right corner of the page. Then, an easy way of changing the color of the menu is by swapping classes on the menu itself through Javascript. You can use the code shown on the link above to see how this is done.
By swapping classes regarding the element colors with animation, you then give each element a CSS transition just like this:
.object{
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
This CSS will make your elements change color by fading with an animation duration of 0.5 seconds.
It is pretty simple if you know have a basic understanding of CSS and Javascript

Related

css move elements smoothly

Trying to make userface more userfriendly i want to implement following:
I have a table with some alert above it. Take a look at this example
When I close alert table 'jumps' to the top. I want it to slide smoothly. I want to use pure css. I've read about transition and animation but i think that's not what i need, or maybe i am wrong.
Any ideas? Thanks in advance!
K, so you can do it with pure css. Bootstrap removes the in class from the alert at the beginning of the fade out. We can use that to apply css to the alert before it's removed from the page.
.fade {
max-height: 400px;
-webkit-transition: .3s;
-ms-transition: .3s;
transition: .3s;
}
.fade:not(.in) {
max-height: 0;
}
See it in action: http://jsfiddle.net/McHUc/92/

CSS custom button slide transition?

Alright Google isn't helping me out much here.
The aim of the game is to have a button, which is a custom png, and upon mouse rollover it 'slides upwards', remaining in the same spot but transitioning to the rollover by means of sliding.
Preferably I'd like to get this sorted using CSS3, the page already has a bit of an OTT fest of JQuery.
Currently I've only managed to get it to slide from the left side. Downwards is fine too.
Code is about as simple as it comes, the HTML looks like this (Just a basic DIV):
<div id="Abutton"><a draggable="false" title="A button n' stuff"></a></div>
The CSS:
#Abutton a {
background: url(mediafolder/Abutton.png) no-repeat 0% 0px;
display: block;
height: 32px;
width: 86px;
cursor: pointer;
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
-webkit-transition: background .25s ease-in-out;
}
#Abutton a:hover {
background-position: -86px 0%;
}
(Plus a further # for the positioning and size etc..)
If it makes for any complications the button is also tied to a JQuery file that upon clicking, smooth scrolls to a different point in the page (Props to the awesome chap that helped me out with that last night!).
Thanks in advance!
I think what you're asking is a slot machine display type feel?
Just use an image sprite, which you pretty much already are trying to do, and put a css animation on it, and it will look what you want (which i think is what you want?) Best of luck
.animate {
-webkit-transition: all 0.250s -in-out;
-moz-transition: all 0.250s ease-in-out;
-o-transition: all 0.250s ease-in-out;
transition: all 0.250s ease-in-out;
}

Browser CSS transform vertical from cube flip

I need some help with a 3d tranform. The transform is on the a:hover event and uses a:hover and a:before pseudo element to be transformed into a vertical flip, it's like a crad filp but it starts the flip at the base line of the menu, it should look like a cube flipping upwards. Here is the code on code codepen Please try and get this to work in Webkit and Mozilla and of course IE, please see what you can do.
the example i have is limited but it does work in FireFox and no other browsers so this would be better tested in IE and chrome first.example
PS. The pink a:before elements need to be transformed on a flat perpective surface at the bottom of the A tag and the a:before tag should animate upwards in place of the hovered anchor tag (-90deg I think), when it animate the pink tag shown in place of the first tag
You should post code rather than links. However, from your codepen I can tell you're not using vendor prefixes to support multiple browsers.
When you use transition, transform, etc you should write
-webkit-transition: all .3s;
-mos-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
See this SO question: Does Internet Explorer support CSS transitions?

nivo slider left arrow picture bugged

I have implemented the nivo slider (with default theme) successfully except for one issue.
The left arrow on the slider is showing a small part of the right arrow. The right arrow on the other hand is being displayed correctly.
How come the left side of the sprite is not rendered properly but the right one is?
Arrow picture
The only place where the arrow.png picture is declared is in the next css section:
.theme-default .nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(../Images/slider/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
opacity: 0;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
Thanks.
If you look right below that class in the nivo-slider css you will notice some classes called a.nivo-nextNav and a.nivo-prevNav which are applying a background position.
The left property on a.nivo-prevNav must be wrong for the distribution of the plugin you have. If you adjust that to say 11px (you will have to play with it, to get it just right) it will fix your problem.

How to make images move automatically + on mouseover in CSS/HTML?

How to make images move automatically + on mouseover in CSS/HTML?
For example Ek Main Aur Ekk Tu Movie Site
It's actually really easy to do with CSS3:
.moveMe
{
width: 150px;
height: 40px;
background: #f01;
position: absolute;
top: 0;
-webkit-transition: top 2s;
-moz-transition: top 2s;
-o-transition: top 2s;
}
.moveMe:hover
{
top: 10px;
-webkit-transition: top 0.3s;
-moz-transition: top 0.3s;
-o-transition: top 0.3s;
}
This tells the element onHover to transition between the two states of top over a period of 2 seconds and 0.3 seconds when the mouse leaves.
Check it out here: http://jsfiddle.net/HGjQC/'
As this is a CSS3 technique, the code here will only work in webkit browsers (Chrome, Safari, any other browser using the Chromium engine [Rockmelt]), Opera and Mozilla browsers.
For IE, yoy'll probably need to use Javascript for now until MS decides to implement more CSS3.
It uses something called parallax effect. I found a jquery plugin that seems to help do this kind of effects. The plugin is called Plax, here is the demo
you could make an invisible div, and then use the query .attr() tag to change the image on hover. I'm not sure I get your question though, because I couldn't find the site that wanted to base yours off of.
Maybe you can use JavaScript, like this:
http://jsfiddle.net/HGjQC/2/