I want something like picture links in bottom of this site.Any body know whats the effect of the site or please suggest to me some javascript code example or library to make picture up/down on mouse hover and make some beautiful tooltip too.
You only need CSS, and on hover change the margin:
img {
margin-bottom: -75px;
margin-top: 20px;
padding-right: 40px;
-webkit-transition: margin 0.5s ease;
-moz-transition: margin 0.5s ease;
-o-transition: margin 0.5s ease;
-ms-transition: margin 0.5s ease;
transition: margin 0.5s ease;
}
img:hover {
margin-top: -20px;
}
This code is basically copied from the site you've provided. I would be careful by using it as is. Take it only as an example.
Related
How to implement animated list to grid transition in HTML, using Twitter Bootstrap? So when you toggle between list and grid it looks like this:
You could use CSS transition like this. You'd need to tweak the animation.
.row div {
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
http://www.codeply.com/go/7GHR01JOez
For example I have an element e.g. image with next css:
img{
width:400;
height:285;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
-webkit-backface-visibility: hidden;
}
img:hover{
transform: scale(1.04,1.04);
-ms-transform: scale(1.04,1.04);
-webkit-transform: scale(1.04,1.04);
}
On this image I have absolute banner that appears on image hover and moves according to image offset position, thus on image scaling the offset of the image is changed and my banner get "zoomed" image offset instead of normal one. I'd like to calculate divergence in pixels in order to reduce this value from the absolute banner left and top css values.
I've tried this solution, but it seems to be not working properly.
Thanks for the help
On the mobile phone, there is a dropdown menu on the navbar. But it is far too slow.
Is it JQuery based? Or is it CSS transition based? How do I speed it up?
It is CSS transition based, try changing the height value from the transition property of this class.
.collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height .35s ease;
-o-transition: height .35s ease;
transition: height .35s ease;
}
I wrote some CSS to cause a sidebar to do a slide transition from off the page to visible when you mouse over the side of the page. The CSS is simple and involves adding/removing a class that controls the left: position of the sidebar.
#sidebarInner{
height:100%;
width:50px;
background-color:blue;
position: fixed;
-moz-transition: left .2s linear;
-webkit-transition: left .2s linear;
-o-transition: left .2s linear;
transition: left .2s linear;
z-index:2;
}
.slideLeft {
left: -100px;
}
Try the following demo on a webkit browser and on Firefox:
http://jsfiddle.net/MmFnY/7/
You'll notice on webkit, the blue colored div has the 0.2s slide left transition but on Firefox it does not. Does anyone know whats wrong with the CSS above?
In order for the transition to work you need to provide it with a default left value. Easiest way to do this is probably to give it another class for when it's inside such as:
.slideRight{
left: 0px;
}
http://jsfiddle.net/MmFnY/19/
Basically I have a single page site that scrolls when the user clicks on the navigation menu.
<div id="mainnav">
<ul id="nav">
<li class="fadertwo"><a id="tst" onclick="CngClass(this);" href="index.html#abouttwo">About</a></li>
<li class="faderthree"><a id="sec" onclick="CngClass(this);" href="index.html#second">Curriculum vitae</a></li>
<li class="faderfour"><a id="third" onclick="CngClass(this);" href="index.html#thirdtwo">contact</a></li>
</ul>
</div> <!-- end mainnav -->
Using jquery (which im totally new to) it adds a class when the user clicks on each link.
Basically it transitions the background position.
.active {
background-position:bottom;
text-decoration:none;
-webkit-transition: .3s linear;
-moz-transition: .3s linear;
-o-transition: .3s linear;
transition: .3s linear;
}
Background is a 10px img repeating along the top.
#tst {background-image:url(../_images/whiteb.png);
background-repeat:repeat-x;
-webkit-transition: .3s linear;
-moz-transition: .3s linear;
-o-transition: .3s linear;
transition: .3s linear;
}
#sec {background-image:url(../_images/blackb.png);
background-repeat:repeat-x;
-webkit-transition: .3s linear;
-moz-transition: .3s linear;
-o-transition: .3s linear;
transition: .3s linear;
}
#third {background-image:url(../_images/greenb.png);
background-repeat:repeat-x;
-webkit-transition: .3s linear;
-moz-transition: .3s linear;
-o-transition: .3s linear;
transition: .3s linear;}
Now the jquery magic -
<script type="text/javascript">
var Lst;
function CngClass(obj){
if (typeof(obj)=='string') obj=document.getElementById(obj);
if (Lst) Lst.className='';
obj.className='active';
Lst=obj;
}
</script>
It works great changing the background position in a really smooth way when the user clicks it, but of course doesn't change based on the user scrolling the page naturally.
Now, I could set the body overflow to :hidden; and 'fix' that, but it's a bit hacky and will limit the content area and overall site layout.
What I'd like to do is use jquery to add the class .active to the a tag based on scroll position so it changes anyway.
I've looked around for hours and tried different things but my (lackof) knowledge of jquery limits me somewhat it implementing anything I find effectively.
Can anyone offer any solution?
Have a look at scrollspy
http://twitter.github.com/bootstrap/javascript.html#scrollspy
or
https://github.com/sxalexander/jquery-scrollspy
Or have a look at
http://imakewebthings.com/jquery-waypoints/