I am having some issues transitioning an image when I'm scrolling.
For some reason when the image gets replaced with the second one it fades out first with a weird transparency and then transitions, not sure how to explain it so I created a demo.
Can someone explain how to do it so the colors transition smoothly without the weird flashing?
html {
background-image:url(http://i.imgur.com/ZhVps3b.jpg?1);
transition: all 1s ease;
}
html.scrolled {
background-image:url(http://i.imgur.com/h6rmrc0.png?1);
}
http://jsfiddle.net/pZrCM/652/
Update:
The issue seems to be only affecting Safari
You might need to add in a few extra transition attributes for it to work on different browsers (As you mentioned it's not working on Safari).
-webkit-transition: all 1s ease;/* Safari & Chrome */
-moz-transition: all 1s ease;/* Firefox */
-o-transition: all 1s ease;/* Opera */
transition: all 1s ease;
Related
I use html, css, angularjs in the front.
I've got an img which in the initial state is surrounded with a full circle of a thick border. I start a countdown of a minute. I would like the border to get partially disappeared as the time goes down.
For example, after the first second only 59/60 of the perimeter of the border is shown, after the second one only 58/60 is shown, ..., after 30 seconds there's only a half of a circle and so on, until it gets totally disappeared.
In addition, if it's possible, I would like the transitions to be smooth.
Thanks for any help
You have to use a combination of ng-class for conditionnal CSS on your case AND css transition.
See for example this example of a smooth transition that is for a 5s for an element to be half visible
#myTransition {
opacity: .5;
transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-webkit-transition: opacity .5s ease-out;
-o-transition: opacity .5s ease-out;
}
I'm with angular 1.4, and i hope this one is a common, and solvable problem:
I have an div with background image of a ball, the div has the following extra styling:
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
Because the ball moves left and right with a smoothing transition (the one from the style).
When i ng-if this div to false, when it needs to disappear, the div is stuck there for a sec (or half a sec?), is there any way around this behaviour?
It's not a matter of $digest or $apply, and without the transitions it goes away quickly and normaly.
I created this site with a header that transitions using jQuery Ui and twitter bootstrap. The idea is that there are two classes .navbar-transparent and .navbar-white and I use the .switchClass() function that jQuery Ui Effects provides that transitions the change in the two classes when the scroll position of the page isn't at the top.
The problem however, the nav as it is now is, I believe the technical term is "janky". The transition isn't smooth, and when going from transparent to white the none of the font color doesn't transition at all, it just plops into black.
This shopify theme Retina / Austin does a great job of making that transition smooth with a css transition.
.header{
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
-ms-transition: all 500ms ease;
transition: all 500ms ease;
}
Here's my javascript code:
mindful_matter.header = function() {
if ($(".navbar-transparent").length == 0) return false;
var callback = function() {
var scrolled_val = $(document).scrollTop().valueOf();
if (scrolled_val > 0) {
$(".navbar").switchClass("navbar-transparent", "navbar-white");
} else {
$(".navbar").switchClass("navbar-white", "navbar-transparent");
}
}
callback();
$(window).scroll(callback);
}
Is there any way I can make the transition smoother? Using the setup I already have? Can I use a css transition when I have two classes that need to be swapped for one another?
.navbar{
transition: background-color 500ms ease;
}
I have a
<a onclick="document.getElementById('massage').style.display = 'block';">Button</a>
And I want to add a fadeIn to the function, but dont know how.
You have two options:
A css3 opacity animation - only suitable for HTML5 enabled browsers i.e. IE9+. Apply this by adding the css class fade to your element.
.fade {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
2.) Use jquerys fadein function. Which supports older browsers.
http://api.jquery.com/fadeIn/
You will need to learn jQuery of course if you don't know it but this is worth doing I think.
Hope that helps
I have founded this -> http://www.building58.com/examples/tabSlideOut.html
But there are some reasons that i dont want to use it:
i need prototype framework instead of jquery
i need an image to open slider (click to open) and when it opened image will change to "click to close"
Maybe someone has already the same solution of my question?
thank for you help!
CSS transitions were made for this sort of thing! For a demonstration of what you're looking for see http://jsfiddle.net/Fw7MQ/ (The 'handle' changes background colour but you could easily make that a background image instead)
The crucial parts of CSS are;
#drawer {
position: relative;
left: -200px;
/* transition is repeated for all supporting browsers */
-webkit-transition: left 0.5s ease-in-out;
-moz-transition: left 0.5s ease-in-out;
-o-transition: left 0.5s ease-in-out;
-ms-transition: left 0.5s ease-in-out;
transition: left 0.5s ease-in-out;
}
#drawer.open {
left: 0;
}
The 'drawer' has a class name added or removed as necessary using this tiny javascript snippet;
Event.observe('handle', 'click', Element.toggleClassName.curry('drawer', 'open'))
...but you could dispense with even that if the animation was done on mouseover instead - change the CSS selector from #drawer.open to #drawer:hover.
For older browsers it degrades gracefully, the animation doesn't play but the drawer still appears in the right place.