Example here: http://jezebel.com/5896408/racist-hunger-games-fans-dont-care-how-much-money-the-movie-made
Click on the 3x3 Tweets screencap they have up. I love the way the lightbox makes a scrollbar. I viewed the source and inspected the element via Chrome and don't see any script that stands out, so I'm guessing it's probably something custom-made.
If so, does anyone know of similar scripts that look like that lightbox and can have a scrollbar effect like that? It's gorgeous!
Edit: I found the code, and I do not think they use a modified version of lytebox: http://ganja.gawkerassets.com/assets/base.v10/static/base.v10.jqueryplugin.20120424_8.js (ctrl/cmd + f for 'glimage'. They use their own thing. Still, I am having trouble finding the perfect jQuery lightbox with presentable vertical scrolling if the image is larger than the windowWidth.
It seems that they're using a modified version (glytebox) of this script:
http://lytebox.com/
IMHO, their lightbox isn't anything special. The scrollbar is probably something that most lightboxes display when the content is too big to fit on the screen.
Related
Find out a website http://www.boy-coy.com/#home. When you scoll down all content scrolls very smooth. Even if you scroll it fast, scroll is done at specific speed. This makes the website faster and responsive. How this can be achieved with the help of css and jquery?
At first glance.
Try reading their html source code output.
They use a few jquery plugins and legacy browser js plugin calls.
They have a custom and partially obfuscated .js script that is in depth, but you can see the specific properties it is setting on items in the page.
Barring any terms of use issues, you could likely decipher this pages cool scroll technique by working with this sample code as an example. But it is definitely a fair amount of work to write from scratch or post the entire solution here.
Im going to go and look for a smaller example that isnt as involved as this parallax.
And check out this link http:// codepen.io/JTParrett/pen/BkDie its got some starting principals here of some of the images positioning at different locations in the viewport when you scroll.
This link in SO can also help Can I change the scroll speed using css or jQuery?
Kirupa has a nice tutorial that can likely help in getting the smoothe scrolling effect stared too. http://www.kirupa.com/html5/smooth_parallax_scrolling.htm
And this one is pretty awesome. I think I would look into this demo. Be sure to test all of click event demos here. Im sure you could tie in your jquery tween event for the scroll bar with this http://plugins.compzets.com/animatescroll/
Another decent example http://bassta.bg/demos/smooth-page-scroll/
It is called Parallax,
Check this: http://www.w3schools.com/howto/howto_css_parallax.asp
http://matthew.wagerfield.com/parallax/
Do you know any script which can help to achieve effect like on whis website: http://www.julianabicycles.com/
When you clik on any bike, you can see lightbox sizing effect, but most important is that it is fullscreen.
I tryed to achieve look alike effect with colorbox and similar scripts, but i cant find option for width and height 100%.
I also tryed to examine code of that website, but i consider myself newbie in js, so that's why i'm looking for your help.
Thanks in advance!
That site is using swipe.js. https://github.com/bradbirdsall/Swipe
But, colorbox has a width parameter. The 100% will be of the containing div, so make sure that is also 100%. You might want to show what you've tried.
I was trying to find a jQuery plugin that will achieve similar preloading effect like on this website Example, After intense research I wasn't able to find anything useful. Can anyone suggest a plugin that can achieve this?
Go to your Example page and inspect it with firebug ... If you remove the class="ready" from the body tag then you will see the actuall div that is overlayed over the entire page.
So all it is, is a div with transparency and an image at the center with a very high z-index.
When everything is loaded underneath you trigger a hide of the div ... and the page is there.
You could fire the hiding after the dom is ready or after a timeout etc...
I stepped a little too far over my head in a job I took this week.
I need to develop a scrolling, changing background like the one on Chevy's home page: http://www.chevrolet.com/
Something like this might suffice though: wearethescenery.bigcartel.com/
Any help would be appreciated.
There are plently of plugins available for jQuery to do just that:
25 jQuery Image Gallery/Slider Tutorials and Plugins
57+ Free Image Gallery, Slideshow And Lightbox Solutions/
You could animate the background-position.
You need a large background image for that, which might slow down the page load.
If you are not against using a javascript library, this jquery tutorial might help you solve your problem.
We're using this autoscroller script: http://scripterlative.com/files/autodivscroll.htm (the bottom version).
However, we got really stuck since we don't know how to replace the moving "scrollbar" on the scroller side with a pure and simple line with up arrow on top and bottom arrow on bottom.
Functions wise we want this sidebar to behave exactly like the original sidebar and of course be cross browser compatible. We just want to get rid of the original scrollbar and replace it with a much cleaner and more stylish style.
Is this doable?! How?
Best regards Stefan
Just found jScrollPane on AjaxRain.
Implementing an autoscroll would take some coding, but should definitely be possible by just sending the click messages to the div manually so that it would do the scrolling. If it looks like this will suit your needs, I'd chip in with some additional implementation code. That topic may actually be better suited for another question, if you decide on jScrollPane.
Edit: updated link above. also, there are demos there for scrolling on hover and clicking on a link to jump to an anchor. Custom code for an autoscroll should be relatively simple to write from there.