I want to display some footer logos in white. Then, on hover, they reveal the logos' true colors. I have implemented this on other websites and the background of the original link is simply replaced with the hover background.
I tried implementing this on some newer themes purchased from themeforest, which leads me to believe some newer version of query is doing something weird. On the newer sites, the new background will slide up, or from the bottom right corner. Here is an example of the undesired behavior:
http://idtools.org/id/grasshoppers/new/about.php
I have tried removing .js files and .css files one by one and none had an effect, not even using different jquery versions. How can I figure out what is responsible for this hover animation?
link to desired logos:
http://itp.lucidcentral.org/id/palms/palm-id/index.html
HTML
<div id="logos">
<ul>
<li id="usda"></li>
<li id="uf"></li>
<li id="lucid"></li>
</ul>
</div>
Your problem is that you've got css transitions on these affects. Check out line 67 of your style.css file:
a, button, .owl-buttons div {
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
You should be able to use CSS instead. With the :hover pseudoclass, you can alter an element's appearance when users hover over it.
li#usda:hover {
background-image: url("/path/to/coloured/image");
}
li#uf:hover {
background-image: url("/path/to/coloured/image");
}
li#lucid:hover {
background-image: url("/path/to/coloured/image");
}
You can do it with css and here is a link to a working example:
Original Posts:
Image Greyscale with CSS & re-color on mouse-over?
http://www.cheesetoast.co.uk/add-grayscale-images-hover-css-black-white/
"Add the following CSS class to your image elements:"
img.grayscale{
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .6s ease; /* Transition for Webkit browsers */
}
"The hover effect:"
img.grayscale:hover{
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: none;
}
Working CodePen Example: http://codepen.io/Cheesetoast/pen/sfCKa
Related
I have three divs on the same line. You can check the example here: http://yoyo.ro/abw just scroll to the bottom of the page to the three boxes: Made to Measure, Instagram and Video Tracking.
When I click the left one, I want the other two to slide to the right and some text to appear. I tried to do it, but it seems that I complicated it so much and it isn't even smooth.
function hideTest(){
$(".instagram").addClass("slideout");
$(".videotracking").addClass("slideout");
$(".instagram").animate({left:"150%"},500);
$(".videotracking").animate({left:"150%"},500);
}
function showTest(){
$(".instagram").animate({left:"33.3%"},500);
$(".videotracking").animate({left:"66.6%"},500);
$(".instagram").removeClass("slideout");
$(".videotracking").removeClass("slideout");
}
$(".madetomeasure").on('click',function(){
var testwidth = $(this).find(".vc_btn3-container").width();
$(this).find(".vc_btn3-container").css("width", testwidth);
if(!$(this).hasClass("openslide")){
hideTest();
$(".madetomeasure").addClass("openslide");
$(this).find(".txtbox").animate({left:0},500);}
else {
$(this).find(".txtbox").animate({left:"-100%"},500);
$(".madetomeasure").removeClass("openslide");
showTest();
}
});
here is the css relevant to the JS
.txtbox{
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width: 66.5%;
display:none;
left:-100%;
padding:0px 15px;
float:left;
position:relative;}
.instagram, .videotracking{position:static;}
.instagram {left:33.3%;}
.videotracking{left:66.5%;}
.instagram.slideout{position:absolute;}
.videotracking.slideout{position:absolute;}
.madetomeasure .button{
z-index:1;
height:300px;
background: url(http://yoyo.ro/abw/wp-content/uploads/2016/02/instagram.jpg) 100% 30% !important;
border: none !important;}
.madetomeasure.openslide {width:100%;}
.madetomeasure.openslide .wpb_wrapper {display:flex;}
.madetomeasure.openslide .txtbox {display:block;}
Thank you so much for the patience... :) I really appreciate it
As far as I know, your problem of smoothness is because:
jQuery change the inline styling of the animated element per frame. That is a lot of work and you can actually see the action if you inspect your element when it's animating.
CSS does poorly on animating left and right. There are many articles about this but here's one if you don't want to search: https://css-tricks.com/tale-of-animation-performance/
The Solution
Fiddle: https://jsfiddle.net/kv5twc64/1/
The solution is very common, and is used by many CSS libraries, a trick using .active, CSS animation and some JS.
Here I used the transition property for .card:
.card {
display:inline-block;
float:left;
max-width:33.333%;
position:relative;
cursor: pointer;
transition: 0.5s all ease-out;
}
If you don't know, transition will create a tweening effect when the elements' property has changed.
And here is the trick: By using ~ selecting the siblings in CSS and the transform property:
.card.active .desc {
transform: translateX(0);
}
.card.active ~.card {
transform: translateX(66.666vw);
}
There are several upsides on using CSS in this case:
You can simplify your JS. The JS became:
$(function(){
$(".card").eq(0).click(function(){
$(this).toggleClass("active");
})
})
You can improve webpage performance
You can have more choices on (simple) easing functions in CSS (jQuery only offers "swing" by default). Check this out: http://easings.net You can do something like this:
transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
Hope this can help. But the lesson here is: Use CSS rather than JS when you can!
P.S. 66.666vw means 2/3 the width of the viewport width.
I've found an odd bug whilst trying to create a toggleable sidebar. I have a set of social media icons with the following code to make them change opacity on hover:
.snIcons {
filter: opacity(.4);
-webkit-filter: opacity(.4);
-o-filter: opacity(.4);
-moz-filter: opacity(.4);
-ms-filter: opacity(.4);
transition: 0.3s filter linear;
-webkit-transition: 0.3s -webkit-filter linear;
-moz-transition: 0.3s -moz-filter linear;
-ms-transition: 0.3s -ms-filter linear;
-o-transition: 0.3s -o-filter linear;
}
.snIcons:hover {
filter: opacity(1);
-webkit-filter: opacity(1);
-o-filter: opacity(1);
-moz-filter: opacity(1);
-ms-filter: opacity(1);
transition: 0.3s filter linear;
-webkit-transition: 0.3s -webkit-filter linear;
-moz-transition: 0.3s -moz-filter linear;
-ms-transition: 0.3s -ms-filter linear;
-o-transition: 0.3s -o-filter linear;
}
In the HTML they are laid out like this:
<div class="sidebar-footer">
<img class="snIcons" src="Images/twitter.png"/>
<img class="snIcons" src="Images/facebook.png"/>
<img class="snIcons" src="Images/linkedin.png"/>
<img class="snIcons" src="Images/reddit.png"/>
<br>
<img class="snIcons" src="Images/instagram.png"/>
<img class="snIcons" src="Images/behance.png"/>
<img class="snIcons" src="Images/github.png"/>
<img class="snIcons" src="Images/deviantart.png"/>
<h3>Copyright Joeb Rogers
</div>
I'm using the following jQuery to hide certain elements of my sidebar on click:
$("#collapse").click(function() {
$(".sidebar-nav").toggleClass("hidden");
$(".sidebar-footer").toggleClass("hidden");
$("#sidebar-wrapper").toggleClass("collapsed");
$(".sidebar-head").toggleClass("collapsed");
});
They appear fine in the first place and everything works well and good. However, once I toggle the sidebar to disappear and then toggle it back to full size, only two of the icons appear. When I hover over where they were supposed to be, they reappear. It seems like somehow by toggling display: none and then back to normal it messes up with their initial opacity state and sets it to 0, but it says it's set to 0.4 still in the inspector.
The weird part is, when I removed the break in the html and tried it again, a different two icons were visible (two next to each other) whereas normally it's the two that are opposite each other vertically.
Anybody have any idea how to fix this other than to remove the opacity? Thanks!
EDIT: I've made the discovery that it has to do with toggling the size of the sidebar rather than the display type. When I toggle the sidebar, it goes from fullscreen to 80px and back again (mobile). I just changed it to 60px and upon toggling back none of the icons were visible. I believe that if the size of the container gets smaller than their position then their opacity messes up. No idea why, I tried changing the .hidden class to visibility: hidden rather than display: none but there was no change.
EDIT 2: Okay, so I've debugged the issue down to the transition effect I'm using for changing the sidebar's size. Because I'm changing the display on click, the elements are being created again before the container is large enough (transition takes 0.3 seconds). This for some reason means they are not being rendered. Anyone know any fixes that could help this?
I managed to fix it by using fadeToggle("slow") instead of toggleClass, could not tell you why this made such a difference.
If there's a similar question out there about this, please point me in that direction. This issue is hard for me to describe but I will try my best:
http://jsfiddle.net/e70r1mtw/
Users here are greeted by a slideshow of images that fade from greyscale to color. This works just fine on OSX and on Firefox in Windows. (The client is aware that this effect doesn't work in IE and is okay with that.)
However, in Chrome on Windows, the first slide does not fade from greyscale, but stays color.
My suspicion is that this has to do with how the DOM is being loaded and how the Cycle2 plugin is being initialized.
The CSS that control this greyscale effect is as follows:
#home-featured .cycle-slide {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition-property: -webkit-filter;
-webkit-transition-duration: 4s;
-webkit-transition-timing-function: ease;
-webkit-transition-delay: 2s;
transition-property: -webkit-filter, filter;
transition-duration: 4s;
transition-timing-function: ease;
transition-delay: 2s;
}
#home-featured .cycle-slide-active {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
My question is: Is there a way to initialize Cycle2 without adding the cycle-slide-active class immediately, giving the browser time to realize it needs to enact the CSS transition?
I already had a similar problem with cycle2
Change the .cycle-slide-active to:
body.loaded .cycle-slide-active {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
So the effect will be on document load, after cycle2 that is on ready with the auto init.
On document load
$('body').addClass('loaded');
Example: http://jsfiddle.net/e70r1mtw/3/
You can also use the cycle-initialized event to add a class anywhere you want to activate the transitions.
If you go to a Wikipedia page in Chrome and ctrl+scrollup or ctrl+scrolldown the resize is done in an animation.
How is this achieved?
(In FF only the
Read
View source
View history
links in the top right corner animate)
If you examine the CSS with Chrome's Inspector, you will find this rule:
body.vector-animateLayout div#content, body.vector-animateLayout div#footer {
transition: margin-left 250ms,padding 250ms;
-moz-transition: margin-left 250ms,padding 250ms;
-webkit-transition: margin-left 250ms,padding 250ms;
-o-transition: margin-left 250ms,padding 250ms;
}
This smoothly animates the margin-left and padding properties, which Webkit seem to modify when zooming in and out. Firefox should also animate, but it doesn't.
Wikipedia does not animate in most browsers, but there is animation attempting to go on. The first clue was the vector-animate class on the body of each page. Their load.js file (called at the bottom of each page) attempts to create an animated switch when users zoom in and out, but this is not supported in most browsers (only a lucky few). It does not work in most FF and IE versions.
The load JS file is found here://bits.wikimedia.org/de.wikipedia.org/load.php?debug=false&lang=de&modules=site&only=scripts&skin=vector&*
In addition, they also use some CSS to try to animate this:
body.vector-animateLayout div#content, body.vector-animateLayout div#footer {
transition: margin-left 250ms,padding 250ms;
-moz-transition: margin-left 250ms,padding 250ms;
-webkit-transition: margin-left 250ms,padding 250ms;
-o-transition: margin-left 250ms,padding 250ms;
}
This would get the same effect for Webkit browsers. A Reference about this is found here. As you will note, this transitions CSS3 property is not very well supported yet.
For more information on the support of this property, check here.
I am trying to make a dropdown effect for one of my background images. I was able to do it using css3 but it's not complete.
The effect is supposed to be a curtain that drops down then sort of bounces back up a little. The problem with css3 is that I don't know how to do to transitions on the same property because the last one overrides the previous ones.
Here's my code:
ul#nav li a {
/* ADDS THE DROPDOWN CURTAIN TO THE LINKS BUT HIDDEN OFF SCREEN */
background: url(images/drape2.png) 0px -149px no-repeat;
/* CSS3 transitions */
-moz-transition: all 200ms ease-in-out;
-webkit-transition: all 200ms ease-in-out;
}
ul#nav li a:hover {
/* Action to do when user hovers over links */
background-position: 0px 0px; /* make drape appear, POOF! */
background-position: 0px -10px; /* make drape appear, POOF! */
}
Any help would be much appreciated.
You'll want to chain them with commas instead of a new line
For instance:
background-color 500ms linear, color 500ms linear;
Using cubic-bezier like this:
cubic-bezier(0, 0.35, .5, 1.3)
You can make an animation go backwards—or bounce a little.
Demo (Only works in Firefox)
Source
Edit: I also made you a Webkit only option, I don't know how compatible these two techniques are. It may also work in Firefox with the -moz browser prefixes, but I haven't tested it. This one uses keyframe animation as opposed to transitions.