Im trying to make my social icons bounce using the jQuery UI Bounce Effect. Im working off a template & some docs from jQuery. The rest im just trying to write the HTML,CSS & JS myself so i probably have some errors in there. Im having a problem getting the icons to bounce. I think it could be because im using a sprite image for the social icons.
Can someone take a look at it and help me out?
The jQuery & jQuery UI in the header
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"</script>
The CSS being used:
#footer {background:#1c1c1c; padding:40px 0 20px; border-top:4px solid #fff;}
#footer a {color:#fff;}
#footer a:hover {color:#d5d5d5;}
#footer .social-icons {float:right;}
#footer .copyright img {float:left; margin-right:20px;}
#footer .copyright p {
font-size:80%;
line-height:140%;
}
#footer .social-icons { }
#footer .social-icons li.title {line-height:30px;}
#footer .social-icons li {margin:0 0 0 10px; }
#footer .social-icons li:first-child {margin-left:0;}
/* social icons */
.social-icons {margin:0 0 20px;}
.social-icons li {display:inline-block; margin:5px;vertical-align: middle;}
.social-icons li a {display:inline-block; width:30px; height:30px; text-indent:-9999px; background-image:url(../images/social-icons-sprite.png); background-repeat: no-repeat; position:relative; background-color: #111; -webkit-border-radius:3px; -moz-border- radius:3px; border-radius:3px;
-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o- transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.social-icons li a:hover {background-color:#cd2122; box-shadow:0 0 6px rgba(0,0,0,0.4)}
.social-icons li.social-twitter a {background-position:0 0;}
.social-icons li.social-dribbble a {background-position:-30px 0;}
.social-icons li.social-facebook a {background-position:-60px 0;}
.social-icons li.social-envato a {background-position:-90px 0;}
The HTML of where the icons are positioned.
<div id="footer">
<div class="row">
<div class="span12">
<div class="bottom fixclear">
<ul class="social-icons fixclear">
<li class="title">SOCIAL LOVE</li>
<li class="social-twitter">
Twitter
</li>
</ul>
Finally, the JS i think need to insert and run correctly.
<style type="text/css">
footer li.social-twitter {
width: 32px;
height: 32px;
}
</style>
<script>
$(document).ready(function() {
$("div").mouseenter(function () {
$(this).effect("bounce", { times:3 }, 270);
});
});
</script>
You could use #keyframes animation for this effect.
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
Check out Animate.css Dan Eden has created a plug and play animation library that is very cool for things like this.
You can achieve the same bouncing effect using only CSS3. The #keyframes and animation properties will do the job. Here is the working example in JSFiddle. Each image bounces on hover.
Related
.ellenon {
box-sizing: border-box;
width: 350px;
height:350px;
background-image: url("https://wallpapercave.com/wp/wp5609581.jpg");
filter: grayscale(100%);
color:white;
transition: 0.5s;
}
.ellenon :where(h1, p) {
line-height:1.5em;
letter-spacing: 1.1px;
padding-right: 10px;
padding-left: 10px;
transition: 0.5s;
}
.ellenon:hover {
filter: grayscale(0%);
}
.ellenon h1:hover {
transform: translate(0px, -20px);
color:transparent;
transition: 0.5s;
}
.ellenon p:hover {
transform: translate(0px, 20px);
color:transparent;
transition: 0.5s;
}
.ellenon2:hover {
transform: translate(0px, -20px);
color:transparent;
}
<div class="ellenon"><a href="https://codepen.io/" class="ellenon2"><h1>What is Lorem Ipsum?</h1> <p>
Lorem Ipsum is simply dummy text</p></a></div>
Hello there, I am trying to create a simple CSS animation as you can see in my code. However, I can't understand how to execute both hovers once the user hovers over the external div. Is this possible with raw CSS or JS is needed?
Thanks
You can select the .outer:hover and .outer:hover .inner so both will change when the outer is hovered
.outer{
width:100px;
height:100px;
background-color:orange;
}
.inner{
width:50px;
height:50px;
background-color:blue;
}
.outer:hover{
background-color:green;
}
.outer:hover .inner{
background-color:red;
}
<div class="outer">
<div class="inner"></div>
</div>
use .one:hover .two . if you have hover on .one you change .two
Hi Stack i have one little problem with weird flickering on header cart widget in my WooCommerce site when product is added to cart. The problem is when i close to it, it show and dissapear fast, so customer cant see what is showing into dropdown widget. I thtink that this is JS issue on that how is called functions OpenNav() and CloseNav(). This is entire CSS for that block:
<div class="cart-widget tooltip">
<span class="tooltiptext"></span><div onmouseover="openNav()"
onmouseout="closeNav()">
<a class="cart-contents" href="https://siteurl.com/cart/"><i class="fa
fa-shopping-cart"></i><div class="cart-crl">1</div></a>
</div><div onmouseover="openNav()" onmouseout="closeNav()" id="mySidenav"
class="sidenav" style="display: none;"><div id="accordion"
class="woocommerce"> <div class="sidebar-quickcart">
AND CSS:
#accordion ul ul {
margin:0 20px;
}
#accordion li {
padding: 0;
margin:0;
overflow:hidden;
}
#accordion{
padding:20px;
max-height: 550px;
overflow-y: auto;
overflow-x: hidden;
}
#accordion::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
.sidenav{
-webkit-animation: fadeIn .8s;
-webkit-animation-fill-mode: both;
animation: fadeIn .8s;
animation-fill-mode: both;
}
#-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
#keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
#mySidenav a.checkout{
float:right;
}
.woocommerce #mySidenav ul.cart_list li img, .woocommerce .widget
ul.cart_list li img{
float: left;
margin-left: 0px;
margin-right: 10px;
width: 50px;
height: auto;
box-shadow: none;
}
This is OpenNav() and Closenav() functions:
function openNav(){
document.getElementById("mySidenav").style.display = "block";
}
function closeNav(){
document.getElementById("mySidenav").style.display = "none";
}
var $crtscroll = jQuery('#mySidenav');
jQuery(document).scroll(function() {
$crtscroll.css({display:"none"});
});
Can someone to help me to stop this flickering, and to be like theme demo site?
The website is https://ceremonycoffee.com/. How do I replicate their nav hover animation with the underline? I can't really find it in their inspect element. Also, is it made from CSS or Javascript? Thank you!
You can do it in full css, see this snippet :
h2 > a {
position: relative;
color: #000;
text-decoration: none;
}
h2 > a:hover {
color: #000;
}
h2 > a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
h2 > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
<h2>My Link</h2>
It relies on the ::before pseudo element. You set its horizontal scale to zero, add a transition property so that when hovered it transforms smoothly to the full link scale.
Source and explanation : Animating Links Underline
I am creating my website for job and in my navigation bar i have 3 links.
1. about
2.projects
3.contact.
these text are all in an (a) tag.
and the a tag is wraped in a div container.
On hover(of the links), I want an animated white line to pass threw(middle) of the text. ONLY ON HOVER.
css/javascript/jquery solutions only please.
You can use the :before pseudo element to create the element and simply animate its width on hover.
E.G: This or something like it.
div {
display:inline-block; padding:10px; margin:0 10px 10px 0;
background:#333333;
}
div > a {
position: relative;
color: #000;
text-decoration: none;
}
div > a:hover {
color: #fff;
}
div > a:before {
content: "";
position: absolute;
width: 0%;
height: 2px;
bottom: 50%;
left: 0;
background-color: #fff;
visibility: hidden;
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
div > a:hover:before {
visibility: visible;
width:100%;
}
<div>
About
</div><div>
Projects
</div><div>
Contact
</div>
here's a pen
<ul>
<li>
link1
<span class="line-pass-through">
</li>
<li>
link2
<span class="line-pass-through">
</li>
<li>
link3
<span class="line-pass-through">
</li>
</ul>
css
li {
display: inline-block;
margin-right: 25px;
position: relative;
overflow: hidden;
}
a {
text-decoration: none;
color: cornflowerblue;
font-size: 24px;
}
.line-pass-through {
position: absolute;
width:100%;
height:1px;
background: #444;
transform: translate(-100%, 50%);
top: 50%;
transition: all .3s ease-out;
}
li:hover .line-pass-through {
transform: translate(0%, 50%);
}
Add this to your CSS.
Unfortunately the text-decoration property is not animatable.
a:hover{
text-decoration:line-through;
}
EDIT: I see there is a better solution above, I suggest you use that as opposed to the built-in strikethrough value.
Quick question guys - what would be the best method to achieve effect like below? I want the exact shape of a button, but in different colour, to slide in from the bottom. I currently have the button on pure CSS, can I keep it that way (preferred) or do I need to make the button a sprite gfx and just animate background position?
You can do it with pure CSS:
.button {
width: 200px; height: 100px;
background-size: 100% 200%;
background-image: linear-gradient(to bottom, blue 50%, orange 50%);
-webkit-transition: background-position 1s;
-moz-transition: background-position 1s;
transition: background-position 1s;
}
.button {
background-position: 0 +100%;
}
http://jsfiddle.net/P6Jx7/
You can do it with :before pseudo-selector like this:
HTML
<div class="button">Send</div>
CSS
.button {
width:150px;
border-radius:10px;
position:relative;
overflow:hidden;
}
.button a{
display:block;
height:50px;
line-height:50px;
position:relative;
z-index:10;
}
.button:before {
content:" ";
display:block;
width:150px;
height:50px;
border-radius:10px;
background:orange;
position:absolute;
left:0;
top:100%;
transition:all 1s;
}
.button:hover:before {
top:0;
}
Check this Demo Fiddle