Playing with impress.js
I'm trying to acheive a Reveal.js like slide transition, but using impress.js.
The basic effect did come, but i feel, the slides are taking a 'wider' turn making it look a lil slower.
Note : In the fiddle, maximize the output section to see the said problem more clearly
I dont know how else to put it, but if you see http://lab.hakim.se/reveal-js/#/fragments and
http://jsfiddle.net/8ukwex3x/1/, you will be able to make out the difference.
<div id = "impress">
<div class = "step">
Slide 1
</div>
<div class = "step" data-x = "500" data-z="-400"
data-rotate-y="90">
Slide 2
</div>
</div>
What should I do to make it work just like Reveal.js' transition.
Unfortunately your fiddle is completely missing the JavaScript (where I assume you had intended to put just the standard impress.js code) and in any case, just reading from the source code I don't see how your example is in any way similar to what the reveal-js example does. So, with the risk that I might be completely off here, I have one thing that may hopefully be helpful...
The reveal.js transitions are indeed pretty slick and fast. Did you know that you can set the duration of a transition in impress.js? The attribute is data-transition-duration:
<div id="impress" data-transition-duration="1000">
A demo slide show that uses it here.
The default is 1000 ms. A value at about 400-600 ms should give you the reveal.js experience in terms of speed.
PS: Note that in my impress.js repo, where the above link is to, you can also set a duration for each individual step/slide. For the upstream impress.js, all slides have the same duration, set in the root div element.
Related
I'm currently working on a website, which has a page with 2 big images (combined around 9000px) in them. The idea is that people can click and drag, to see the sides of the image, just like google maps.
At first I built it with just the 2 images next to each other. When animating the parent div on drag, I managed to only get a composite paint once in a while, but no actual paint (draws). I did this by editing the translate3d on the mouse events.
This all worked like a charm and very smooth, until I added an extra div to the parent. Now when I change the translate3d, it has to do a complete recalculate style -> layout -> paint -> composite layers.
So at first the structure was:
<div class="container" style="transform: translate3d(-50%)">
<img src="path/to/img.jpg"><img src="path/to/img.jpg">
</div>
When changing the translate3d, all was good, just had a Composite Layers once in a while.
However, when I change it to the following, all goes bananas:
<div class="container" style="transform: translate3d(-50%)">
<img src="path/to/img.jpg"><img src="path/to/img.jpg">
<div>+</div>
</div>
So like said before, now when editing translate3d, it has to do a complete Recalculate style.
I made sure the div and images both had layers by adding translateZ(0) on them, that didn't help though :(
I'm pretty sure I don't understand the whole paint sequence of chrome to the detail, but after countless hours of reading I can't find the exact thing. I hope someone can shed some light on this matter.
Thanks a bunch!
Edit after Paul's reply:
The Recalculate Style is triggered by the following line:
this.background.style.transform = 'translate3d(' + (this.panoramaX - this.previewOffset) + '%, 0, 0)';
This seems dissimilar to the accordion functionality provided by bootstrap.
To give an example, let's take the "how to format" info starting me in the face right now. I'd want it so that it only displays up to X pixels deep, and then stops until expanded. So it might look like:
and then, once expanded,
I happen to be using bootstrap. Is there a bootstrap native or other HTML solution to create this kind of experience?
Assume that the thing that I only want to show of is a single element, such as an image, rather than a series of text. This means a solution like min-height:50px and overflow:hidden won't work, as it will simply hide the entire image rather than part of it.
We can use jQuery .height() to accomplish knowing the rendered height of an element then making conditional modifications.
Documentation and examples for jQuery .height().
A combination of height and overflow in combination with the toggling of a class should work here.
http://jsfiddle.net/fm56je84/1/
The click of the arrow is bound to the following function:
function expandCollapse() {
$("#container").toggleClass("expanded");
$(".glyphicon").toggleClass("glyphicon-arrow-down"); // Flip Arrow
}
Will I have to face any problem if i have large number of hidden divs in my page ??
i mean that in my page there is a loop which contains some hidden divs and some buttons which when clicked shows one of the hidden div...
i just want to ask that will i have to face any problem with these hidden div..
the code here is just an example ....
any help will be appreciated..
thanks in advance
<?php
for ( $a = 1; $a < 10; $a++ ) {
<div style='display:none'>
content goes here....
</div>
}
?>
I have many pages with over half a million divs that work fine. Probably the most important thing with many hidden divs is that you enclose the hidden divs within another element which is of fixed layout. If you have a massive amount of html and a fluid layout and you change the visibility of an element, the browser must calculate all the layout again which can be slow and give the user poor responsiveness.
No problem! but It will be indexed but can be frowned upon by Google if you are hiding/showing content for SEO reasons. In other words, what Google sees should be what the user sees when clicking the link.
No problem! But if you are having more and more your websites load will be heavy. That might cause slower performance and perhaps hangs up. It would take loading time too..
That depends on what you try to do.
If you fill your hidden divs with images and other heavy stuff, it all will be loaded immediately with page and may slow things down. Also, browsers would still take time for parsing everything you hid (but that is actually not much time).
So, if you are talking about like 1000x1000 grid of buttons or something like that (for making kind of a game maybe), it will result in sad performance.
If you are talking about dynamic loading of a lot of heavy content, like a whole facebook timeline, it won't work well neither.
But if you just want to show users some blocks, which would work okay if you didn't hide it at all, you will have no problems.
Im trying to get something like this --> http://jsfiddle.net/NhvAZ/10/ but with image inside circle.
I did exactly the same way like on example above, but it doesn't work with image. Here is my code: http://jsfiddle.net/uyEaq/
Someone could tell me what I'm doing wrong?
Well that was really confusing, but looking at some of the previous iterations of the fiddles you've given I think I know what you want.
You want an ever increasing pie slice of an image to appear, right? Clipping can do that for you. Here's an example using some of your code:
http://jsfiddle.net/QMZg2/
I've read docs about positioning controls on the map(TOP, TOP_LEFT, etc), but Is there any way to make custom position? For example: left: 20px; top: 200px;
I just want to have in top_left corner my logo and zoom control right under logo.
And how to remove pan control in navigation controls? I want to have only zoom control in default style(not minimized).
Thank you.
Although the question is rather old, with almost 3k views it still seems to draw interest - So, here is my solution:
Wrap the controls!
First we have to find the container-element, where Google puts the control. This depends on which controls we want to use on the map. Google doesn't use unique ids for those containers. But all the controls have the class "gmnoprint" in common. So just counting the elements with "gmnoprint" does the job. Say we only want to use the "ZoomControlStyle.SMALL"-control. It's always the last element with "gmnoprint".
Now, we can simply style the element - Right? No. As soon as you zoom or resize the map, Google resets the styling of the controls. Bad luck, but: We can wrap a container around the controls and style this container!
Using jQuery, this is a really simple task:
$('div.gmnoprint').last().parent().wrap('<div id="newPos" />');
We only have to make sure, the control is fully loaded by the time we try to wrap it. It's not totally bulletproof I guess, but using the MapsEventListener "tilesloaded" does a pretty good job:
google.maps.event.addDomListener(map, 'tilesloaded', function(){
// We only want to wrap once!
if($('#newPos').length==0){
$('div.gmnoprint').last().parent().wrap('<div id="newPos" />');
}
});
Check out http://jsfiddle.net/jfPZH/ (not working, see Update Feb 2016)
Of course if you don't like the initial flicker and want a more reliable version you can do all kinds of improvements like fadeIn etc: http://jsfiddle.net/vVLWg/ (not working, see Update Feb 2016)
So, I hope some of you will find this useful - Have fun!
Update: With this method you can position any other control (e.g. the controls of the Drawing Library) as well. You just have to make sure to select the right container! This is a modified example: http://jsfiddle.net/jP65p/1/ (somehow still working)
Update: As of Feb 2016 Google seems to have changed the positioning of the map controls. This does not break my solution. It just needs some adjustment. So here are the updated fiddles:
Simple: http://jsfiddle.net/hbnrqqoz/
Fancy: http://jsfiddle.net/2Luk68w5/
It is extremely simple, just add this to your css file!
div.gmnoprint { padding-top: 50px; }
It will move the control 50px down with no hacks or anything!
You can create a custom control for your logo, and add it to the map to position it. You can't set the location of the control directly beyond the constants, but you can offset the location using padding on your control div.
http://code.google.com/apis/maps/documentation/javascript/controls.html
set
panControl : false,
in the ZoomControlsOptions which you set