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.
Related
I've been working with some basic animations lately and trying to follow good web practices at the same time. The problem I'm encountering is image flicker when not using a preset css method to hide the element before the page loads.
It's very easy to prevent the flicker by just hiding the element with my normal css and then revealing it with javascript, but that seems to me a horrible practice if someone has javascript disabled.
Should I use the HTML5 feature of putting <noscript> tags in the header and then use a separate style sheet to set the opacity and position to the final settings for users without javascript? Is that the most elegant solution?
I've started using the greensock (gsap) library to TweenLite.from, since I can just set everything to the final state in the css, but I get a slight image/text flicker the first time the page is loaded. I like this solution because I can set all of the css as it will be for someone with no javascript, and it allows me to easily animate from a point, to an existing point, instead of working backwards like I have to do with Javascript or jQuery. But, there's still that image flicker which isn't really acceptable. Would a page preloader solve this?
What is the generally agreed upon practice for this these days? I'm also worried about SEO and the consequences of setting stuff to visibility: hidden or display:none and then animating it in. Does the Google spider read javascript?
Here's an example of the screen flicker and animations I'm talking about.
Have a look at HTML5 Boilerplate and Modernizr.
http://html5boilerplate.com/
http://modernizr.com/
It ships with a smart solution to see if a client has JavaScript enabled in CSS.
By default a class no-js is applied to HTML tag and it is then replaced by js by Modernizr. That way you can qualify your CSS selectors accordingly.
Example CSS:
.no-js .foo { }
.js .foo { }
This should execute fast enough that clients with enabled JavaScript don't see the no-js styles.
References:
What is the purpose of the HTML "no-js" class?
https://github.com/Modernizr/Modernizr/blob/master/src/setClasses.js#L9
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.
I see a number of sites have auto-loading animation as soon as you scroll down to the particular part of the site with the animation - apple.com has it, most recently I found it on http://www.bugherd.com/features
I see a number of PNGs loaded in the web inspector but I can't determine how its being done.
it’s Matt (co-founder & designer # BugHerd) here :)
Really glad to hear you like the animations we put together on the features page. In order to achieve the effect we used the transit.js library: http://ricostacruz.com/jquery.transit/
It uses the same syntax as jQuery animations and uses the animation queue as well. I put together the animation by loading up all the images needed and then transitioning, hiding and showing as required.
Happy to answer any other questions you might have about how to implement this on your own site.
Cheers!
Also as an aside the animations on the Apple site are fairly complex, but there’s a pretty detailed run down of the techniques used to achieve their effects. It’s well beyond what we’re doing on BugHerd though :)
https://docs.google.com/document/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI
I'm not sure what you're talking about, but if you are referring to the animations Apple had when presenting the iPad, it's easy to do.
What you do is bind an event listener to the page/container scroll event. Then, check if your element is in view range, by comparing its top offset to the scroll height. If it's in view, call a function to animate the element. This can be done either by a single image sprite animating the background-offset, or an actual image sequence or even a canvas - your call.
I would like to imitate the animation happening when switching from one page to another using the menu on the left of this example webpage. This is one of several projects that I am working on to prove JavaScript and associated libraries are capable of producing animations equivalent to Flash.
I can get a simple hide animation going with this but it doesn't quite look the same as the Flash version. It's almost like they've used some easing effect for the slide out and in. I can't seem to figure out the CSS with which to animate it in JavaScript. Any ideas on the CSS I should be looking at or know of any plugins that have already accomplished this style?
http://www.wix.com/flash-templates/artistic-choice
http://www.alphadesigns.com.au/stackoverflow/index.html (updated with opacity option)
Try animating opacity. Note that this doesn't work in IE<9, you'll have to use a filter and a custom animation if IE6-8 must be supported (see http://www.quirksmode.org/css/opacity.html).
Is there a problem to using javascript for styling content?
My website requires javascript. There is this text on my website that I want vertically centered. The text could be either 2 lines or 3 lines long. With javascript I could vertically center it pretty easily. The CSS ways to vertically center it seem complicated and include IE hacks.
So, is there a downside to me using javascript for this styling, considering I have already decided that my website will require javascript?
The downside is that if you have any long-running page, say an ad fails to load, etc hanging the document.ready event...your styling wouldn't be applied until the document completed rendering and the javascript then ran. (Note: This assumes your script fires in the ready event, usually the case since you'd want the elements to be there)
Basically you'd get a flash of non-styled content in the case of anything delaying the ready event. Whether that matters, up to you, but personally I'd stick to CSS where possible.
Sometimes using JavaScript for seemingly simple styling is unavoidable; if I have to use JavaScript in this kind of scenario I just try to make it degrade as well as possible, ensuring that whilst a user without JavaScript doesn't get the full experience from the website, they don't get a bad one either.
I'd personally use display: table-cell, and vertical-align:middle. Then in IE8+ and all other browsers it's centered, in older ones it won't be, but generally things like vertically aligned text aren't that vital to the design anyway.
I don't think there is a downside. If you say it's going to be easier and considering that JavaScipt is the de facto client side language, go for it. Just make sure it'll work on modern browsers...
Just a point: CSS is meant to be used to do this kind of work, but it's not a rule. There are exceptions as is your case.