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.
Related
Is it possible to specify which transition to use in fancyBox 3? There are 3 transitions I'm interested in:
Open slide/gallery
Navigate between slides
Close slide/gallery
By default, fancyBox 3 uses different transitions for different types of content.
<!--This will zoom in-->
<a data-fancybox href="#html-content">Open</a> <!--This will fade in-->
<div id="html-content" style="display: none;">
<p>This content does just fades in.</p>
</div>
Look at this codePen to see it in action, including the navigation transitions. For images we have:
Zoom in
Slide horizontally
Zoom out
For html content we have:
Fade in
Slide horizontally
Fade out
Is it possible to change this default behavior in fancyBox 3? For example to let also images fade in and out? I was not able to find any information on this in the documentation.
As of fancyBox version 3.1.20, this is possible through the options animationEffect and transitionEffect. You can find the documentation here.
Not sure if I'm getting this right... but if you want to fade in & out the images (between each transition) you can trick them by using a bit of CSS, add this to your jquery.fancybox.css:
.fancybox-slide.fancybox-slide--image {
opacity: 0;
-moz-transition: all 0.01s ease;
-o-transition: all 0.01s ease;
-webkit-transition: all 0.01s ease;
transition: all 0.01s ease;}
.fancybox-slide.fancybox-slide--image.fancybox-slide--complete {
opacity: 1!important;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;}
And also modify the speed of the jquery.fancybox.js lib to:
// Animation duration in ms
speed : 100
Disclaimer: I'm just a mortal and this is not the neatest solution, but worked for me (:
div.style.marginLeft="-200px";
On click of a button above statement executes but it just changes the margin instantly, but I want that it moves while changing the margin.
So I need a JavaScript solution for that.
Actually you can probably solve this with CSS. If you have the margins changing already, try applying a CSS transition to the element.
-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;
In this case the "all" is a reference to the property you want to apply the transition to. You could probably use margin-left, but all will cover pretty much all available transition properties.
Here's more info: https://developer.mozilla.org/en-US/docs/Web/CSS/transition
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.
I am using impress.js for the first time and wanted to make a tweak. The original demo SEEN HERE has the slides become dim/transparent when they are not active. I have seen another impress.js presentation SEEN HERE where the image/slides remain opaque throughout the presentation except on the first slide (after that everything become opaque). How can I make a particular slide or image stay opaque through out the presentation?
in your css adding
.future : { opacity: 1.0 !important;}
.past : { opacity: 1.0 !important;}
or editing impress-demo.css
.impress-enabled .step {
margin: 0;
opacity: 0.3; <--- CHANGE THIS
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
will change the opacity for different steps
Anyway, you can find the elements ,and choose the one u want and make a .css with jquery, for example:
$("body").find(".future")[0].css("opacity","1.0"); <-- This will change just the first future step found
Anyway, please read about css rules and specificity:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Hope it helps
EDIT
I though u may also want to use :firs-child or :after (CSS selectors) will can also help you: http://quirksmode.org/css/selectors/firstchild.html
http://www.w3schools.com/cssref/sel_after.asp
I'm stuck here.
How to I transform this:
-webkit-transition:all 0.66s ease-out;
-moz-transition:all 0.66s ease-out;
-ms-transition:all 0.66s ease-out;
-o-transition:all 0.66s ease-out;
transition:all 0.66s ease-out;
into jQuery animations?
I'm using this script, to make an "onload" animation using Packery/Masonry that all items ease from the upper left corner to their positions.
Unforunately this css3 transition is causing a shaking with the packery script when you resize the browser. A solution would be to use jquery animations.
Any ideas?
Unforunately this css3 transition is causing a shaking with the packery script when you resize the browser. A solution would be to use jquery animations.
Or remove the class that adds the transitions after the initial transitions took place.
try:
$('#element').animate({top : 200, left: 200}, 660);
make sure #element has position relative OR absolute.
hope that helps.