Does anyone here know any tutorial/guide lines/link that will help me create an scrollbar like the one at http://www.wdyl.com/#apple [on the left top]
Yes, jQuery.fracs, which I read about just the other day on daily.js.
It does not have the magnifying effect like the link in the question, however it does generate a dimensionally correct tiny version of the page it is on, which I think is really smart.
Related
I'm currently working on a website. I want to have a fixed text (I know how to do that) that changes if you scroll.
So if you're on top of the page it shows '0' and then, while scrolling, the number goes up and up and when you scrolled one viewport-height it should be '10000'.
I think this should be done with javascript, but I'm just a beginner with it. Could you please help me? Thank you very much.
edit
Thanks Ajay for the tip with the onscroll function. But this always just adds a number on scrolling. I want something like this (look at the top left hand corner). Where the size is relative to the position on the site and not the scrolling wheel.
Try using the onScroll event of javascript.
Here is a useful link to learn.
Hey I want to make text scroll from right to left in a div i have. I want this to happen automatically and at a constant flow.
Now when i first started with HTML the tag was used to do this, I've looked around a few websites and it seems that this tag still seems to be going. My question is really if this is the best way of achieving this affect or is there a better way of doing it? for example, javascript,Jquery and/or css Maybe even something in HTML5?
This shows what i am looking - http://www.gftuk.com/
Notice the scrolling stops when the user hovers over the text.
Thanks for the time.
<marquee>hello world</marquee>
Personally, I think the best way to achieve this would be to use jquery. There are a few plugins out there which do the job nicely.
If you want to automatic with "scroll" text ( structure of DOM is not complex) .
<marquee>This text will scroll from right to left</marquee>
But you will see with "marquee" the scroll is not smooth.
So you can use simplyScroll plugin
http://logicbox.net/jquery/simplyscroll/
( I see it in this code of your link : http://www.gftuk.com/. in next time, please open dev tools or firebugs and see source code of any pages when you want to have the same effects )
Hope it helps you
This is a very vague question, but I am not sure where to start, so if anyone could give me some idea, that you be great.
I want to have a Parallax effect on the homepage of my website, but I am unsure how to create this effect. The effect I want is crated here http://davegamache.com/chase-happiness/ and here http://themetrust.com/demos/hero/. They both use a similar principle to where as you scroll down the image and text move at different speed and fade out.
So basically my question is, does anyone know where I should start to create this or any download you can get which creates the effect.
Thank you for any help
Looks not that difficult, just look in their sourcecode at: http://themetrust.com/demos/hero/wp-content/themes/hero/js/theme_trust.js
At the bottom there is a section named: Parallax
I recently came across one of Google's projects "What do you love" and saw a nice feature there.
If you visit http://www.wdyl.com/#monkeys
On your left you will see a small box that allows you to scroll the page "Quiet Cool" I thought when I saw it ))) I looked over the internet to find jQuery plugins or Tutorials on how to do similar thing (jQuery/javascript is not my strong side), but I couldn't find any.
So could anyone please explain how to make similar "Api/Feature" and provide code snippets if possible, that would really help. Ohh an jQuery solution is preferable.
As is so frequently the case, your best bet is to open your browser's Developer Tools and look at what's actually going on there! In this case, it looks like a static background (the grey boxes) with a blue frame on top of it, somehow made draggable, that calls one of the window scrolling functions after doing a bit of proportions arithmetic to determine how far to scroll.
Here is a simple demo I put together to show you how to animate the scroll of a page: http://jsfiddle.net/jasper/3cnKn/1/
In my example, the basic idea is to bind to a click event for some links and animate the scrollTop of the html element:
$('#nav').find('a').on('click', function (event) {
event.preventDefault();
$('html').animate({scrollTop : $(this).attr('data-scrollTop')}, 500);
});
As I was looking through Killers Music html5 site, I wanted to do what they did with main navigation where when mouse is over to left or right, it will scroll infinite.
I have when through their javascript file, also inspected elements and one thing was for sure, they update left css property to scroll the background images.
I am not quite sure how to do that smoothly. I know I can use setTimeout to update the left but not sure what value I have to calculate to apply.
I am going to need someone's help or if there is any tutorial for it, it would be wonderful.
Please help.
It uses the jQuery easing plugin.
Some demo are available here: http://jqueryui.com/demos/effect/easing.html