I am a newbie HTML developer and haven't worked on jQuery/CSS animations yet.
I have a question regarding the effect on the following link:
http://highline.huffingtonpost.com/miracleindustry/americas-most-admired-lawbreaker/
When page scrolls, the main image in header resizes (zoom out effect)
What is this animation, is it something Parallax or simply a CSS animation and how can I make this, any help would be highly appreciated.
You can do using CSS3 and JQuery Parallax..
check this sample
Related
I want to dive into the wonderful world of .svg animation for the website I'm working for.
I'm looking to do an icon that animates on hover. I have found multiple tutorials that can all help me out, however, I noticed that there are a lot of different ways to achieve an svg animation.
I can find very little info on what is the most supported way to animate an svg. Is it with a js library? The animate tag? css animation?
A js library seems best to me, but I like the idea of using css as well. Can someone tell me more about the browser support of these methods?
There are lots plugins are available to animate svg.few are listed here
snapsvg
GSAP
segmentjs
you can checkout crossbrowser compatibility here.
I saw an example of CSS animation for background scrolling at http://www.pandarisk.com/ and now I am wondering how to achieve it? Is there any tutorial with demo to understand it?
This type of animation is called parallax scrolling. Here is a tutorial with an explanation how to achieve this: https://ihatetomatoes.net/simple-parallax-scrolling-tutorial/. Hope this helps!
I am trying to build a website which has its background images scroll with left and right controls. Where can I find tutorials to do that?
You can try CoinSlider... see this link for tutorials and demo:
http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/
Also see supersized jQuery plugin [full screen slideshow]
http://www.buildinternet.com/project/supersized/
OR look here for 100 Qjuery sliders, choose the one that will suit your requirement:
http://www.jquery4u.com/plugins/100-jquery-sliders-part1/#.T-YKgRdo2_4
I've used this one in the past and it's worked great. It's uses a fade transition, but I'm sure there are ways to hack it to do slide transitions.
http://www.marcofolio.net/webdesign/advanced_jquery_background_image_slideshow.html
I need to change the color of a scrollbar button when the mouse moves over it which is at top and bottom (left and right) of scrollbar. How can I change it in WebKit? When I use hover, it is not working. Please help me.
You may or may not be able to change the hover styles on scrollbar buttons as this is browser-dependent. Namely, no known browser has hover styles for scrollbar buttons.
EDIT: thirtydot points out that scrollbar button hover styles are on their way to WebKit's implementation; see his comment for a demo.
You specifically said "how can i change it in webkit", so:
An older answer of mine: Apple-like scrollbars using CSS
Apple's version: http://help.apple.com/mobileme/index.html#mm5b08c671
Live Demo (tested in Chrome
dev, Safari 5)
Some useful blog posts:
http://webkit.org/blog/363/styling-scrollbars/
http://numerosign.com/notebook/styling-webkit-scrollbars-with-css3/
http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task
Note that it's rather time consuming to:
Get it right.
Make it look good.
It does looks very slick on Apple's help site, so it may be worth the effort.
So, is possible to change color on a scrollbar, but u have to consider that most browser don't like these css..
body {scrollbar-3dlight-color:#ffd700;
scrollbar-arrow-color:#ff0;
scrollbar-base-color:#ff6347;
scrollbar-darkshadow-color:#ffa500;
scrollbar-face-color:#008080;
scrollbar-highlight-color:#ff69b4;
scrollbar-shadow-color:#f0f}
Otherwise you can use Jquery for personalize you scrollbar.
Look at this link: http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
Looking at http://www.css3maker.com/ I see the menu items like "Border Radius" getting animated on mouseover. How was this achieved using CSS?
I did not look how it was done in that website. But jQuery can do wonders with animation. It's a javascript API that is becoming widely used.
CSS animations can be done using the transition property.
Check http://www.css3creations.com/ for demos.