I am trying to make an animation of the effect of an opening door. Is there any known algortihms for doing this? If not, I need to alter a rectangular div making the right side longer than the left side, and the top and bottom lines connecting the right to left side of the div would be diagonal, and the contents of the div, are stretched proportionally. Is there a way to change the height properties like so, for a div?
You can do it using CSS Transform however it won't support older browsers.
Here is a good tutorial for that: http://24ways.org/2010/intro-to-css-3d-transforms/
Your best bet is making an animation using several images and changing them.
You can use the css "transform" property, if you don't need to support older browsers.
Have a look at the w3c specification | mozilla dev, and also at this tutorials: css 3d tutorial series.
An alternative solution for older browsers would be a canvas, which is more supported (still not in all browsers).
If you need to support almost all browsers, you could use flash, but I really not recommend that.
Related
There are currently jQuery plugins that make a system's native scroll bar look like the iOS scroll bar (http://rocha.la/jQuery-slimScroll and others). Example code for these platforms makes it look like they need a fixed height to work.
$('#example').slimScroll({
height: '250px'
});
I want to adopt the new flexbox standard (2012-2013) edition. The height and width of the container can change. Is it possible to overwrite the native scroll bar in a similar manner to jQuery slim scroll? I know webkit has this http://css-tricks.com/custom-scrollbars-in-webkit/, but I want to have support across the modern browsers (as of the time of this post, IE11, FF26, Chrome 31, Safari 7).
Is this possible? Or will I have to overwrite the DOM hacking that jQuery slim scroll seems to do?
Probably not an easy task, my friend. The cross browser solutions are probably replacing the element with a bunch of little divs that look like a scrollbar, and then calculating how much to scroll the content by using the overall height VS the viewable height.
I have a rotating image spinner that looks fantastic...in browsers that support it.
it can be seen at kingpetroleum.co.uk/background.php - it's in the top corner.
I need to somehow create the same effect for users that are using browsers that can't display it.
I'm not great with javascript so would be hoping on finding a good tutorial / guide etc but after a bit of googling I've not come up with anything.
Any help is appreciated.
If your issue is very old browsers support, and for such a simple animation, you can use an animated gif. Here are some links that show how to create one. It is a very old technology supported by almost any browser out there.
I am using jQuery animate to slide in items on a web page. For some reason, only in webkit browsers, there is a trail of artifacts across the space the element was animated over. Is there a way to stop this from happening or hide it?
They are seen on the carousel once you load the page here: http://www.mywebclass.org/~jeff/
In your animate callback, scroll down 1px then back up 1px:
$(this).addClass('active');
scrollTo(document.body.scrollLeft, document.body.scrollTop + 1);
scrollTo(document.body.scrollLeft, document.body.scrollTop - 1);
On this machine here, I can't see any trails, but i know the effect you're talking about.
It's not directly a solution, but I seem to remember that animating the left-property is very resource-heavy on slower systems. It would probably lead to an overall more smooth experience if you would work with a <div> where overflow:hidden; is set and one larger slide, that you move by animating scrollLeft() instead of these animations.
There was a post on jQuery for Designers about that, i'll update once i've found it.
Update: "jQuery for Designers - Fun with Overflows"
I only see the leftovers of the animation in the H1 which I think is caused by using a non standard font.
It's not a solution but if you can't prevent it, you can remove those little bastards by just scrolling the webpage 1 pixel up or down.
You're also using an outdated version of jQuery (1.3 instead of 1.6.2), is there a reason for this? If not, you should use the latest version
Trails on the left side of #font-face text animated using the left property in Chrome & Safari. I found that using some padding left on the text and adjusting the animation to accomodate fixed the problem.
I see a flash website with some eyecathing buttons with flash effect which I want to have with jQuery if possible here is the link of website -> http://www.goodthinking.com.ph/ .. any tips or sample if can this possible done using jquery code.. . thanks in advance.. .
Yes you could build something close, but with less browser support. The puzzle pieces could be stored as background images on <div/> elements, then the divs could be positioned to "fit" as puzzle pieces, yet still be move-able by animating their position properties with a custom jQuery $.animate({}). The noise could be played on :hover with an <audio/> element in browsers that support it, and the flip effect could be achieved using a 3D transform, typically done by adding and removing CSS classes that define webkit animation keyframes.
You should seriously consider, however whether a whizz-bang effect actually helps people find the content on the website, or gets in the way. If you do want the effect and can design it in such a way that it degrades in browsers that don't support the effect, or all of the effects, then you have a cross-browser solution that is not the same everywhere, but doesn't penalize all users either by requiring they have a browser plugin.
Is it possible? Probably yes.
Would I recommend doing it with jQuery or javascript? No.
Simple - I have a layout that is 800 by 600. When I press Ctrl and +, it zooms in and looks wonderful.
I want to know if there's a CSS/Javascript way to do the same? Without the user having to do it (because users will not do it and see the small layout).
Same question was posted by someone Setting IE "Optical Zoom" feature using Javascript/CSS that got no good replies.
There is a zoom CSS property, but it is part of CSS3 and is most likely not widely supported. By setting this on the body element using JavaScript you can zoom the entire page.
I would agree with the sentiments of the answers to the question you linked to though in that it should be up to the user to choose their own zoom settings. If your site is too big/small to see, it indicates a problem with your site design.
You can set all sizes as dynamic (use em for fonts, % for divs/images sizes). Then change the main wrapper and the main font size using javascript.
You can also use CSS switching. Put all the colors and such in one css file. Then create 3 or 4 levels of zoom and inside hardcode different sizes for all the existing classes.
Example:
main.css
a{color:red;}
small.css
a{font-size:10px;}
medium.css
a{font-size:12px;}
Not all designs (in fact I'd wager, none, without targeted style sheets) can cope with the vastly different sizes of screen out there today, from portrait orientated screens at public libraries, to ultra fine artworking Macs with giant landscape screens and tiny little laptops - the latter two often used by executives that have NO understanding of how the zoom features in a browser work and also often have terrible eye sight and little patience.
My suggestion is to use relative sizing like Marcgg suggests. If you're really looking to be super flexible the you could use javascript or browserhawk (or equivalent) to measure the screen sizes and switch out style sheets for those that are really not going to work with your layout.