I would like to make a div move down on scroll but at a faster rate (i.e. if the user scrolls 200px down the div will smoothly scroll 400px down.)
Basically a fixed div that moves up and down at 2x (maybe less) rate of the scroll speed
I have searched a lot for an answer but no luck so I hope one of you bright minds can help me.
If you need me to be more specific I can make a video or an illustration that clarifies what I'm trying to do.
You are looking to do a parallax scrolling effect. There are lots of js libraries that can do this, one of them is: Stellar.js
Nike also made a temporary site (Better World) that had this effect.
Related
This is my homepage: http://redvectordesign.com/demo/
As you can see, it's quite unique in its approach. The issue I have is that the vertical scroll bar appears on the right side of the browser for some monitors but not for others (This must be due to resolution) The layout changes alignment for tablets and mobile (in those cases, the vertical scroll bar is understandable) but is there some way to limit the vertical scroll bar for larger resolutions (ie desktop and laptop) because otherwise, the elements (coffee cup, paper etc) move up and down which doesn't look great. Any advice would be welcome! I'm a noob so sorry if my question sounds dumb :(
I'm very new to bootstrap, and programming in general so please be patient! I have literally spent hours trying to find a solution to my problem via here/google, and the time has come to ask for some help!
Basically, I am trying to make a website for displaying photos in a carousel. I want my site to be responsive so it works on smaller devices. All my original images are the same size/dimensions (2304 x 1728 so 4:3, probably too big) and use the img-responsive class.
It looks fine on a large screen, but when I try it on smaller laptop screens and tablets, the image height causes scrollbars to appear so you can't see the bottom of the image/caption. However, the image width is responsive and shrinks to fit without scrolling.
I am of the understanding that the carousel size is dictated by the image size, so the logical solution would be to make my image size smaller in height - but I need to maintain the aspect ratio, and smaller images didn't look so good. I also tried setting a fixed height as a style but it didn't work.
What is the ideal image size (in px) for a carousel which takes up most of a browser window (allowing for navbar/header/footer), and how do you make it so the height doesn't require scrollbars?
Many thanks in advance!
My answer may not be accepted by everyone , but I think the only flaw of bootstrap is precisely the Bootstrap Carousel
Can not be changed easily (since as you say you do not have much programming experience), and does not offer a lot of customization
So I think the best solution for your problem is Owlcarousel , offers hundreds of customization options
OWL Carousel
Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.
I have no idea what causes this, so I'll refine tags as some answers/comments start to guide me in the right direction.
Sometimes, images with monochrome stripey parts (whether the whole image is colour or not), exhibit a strange flashy effect as I scroll past them.
This is where I most recently saw it, in an article on Dezeen:
As I scroll past that image (with Chrome on OS X 10.9) the wall on the right goes darker and brighter, according to my rate of scroll.
If I get just the right scroll speed, it doesn't flicker - but it is in the 'dark mode', like someone in the scene has turned the lights off. If I speed up or slow down, it begins to flicker again - so I'm pretty sure it's not an optical elusion!
I saw it before with a couple of .gifs, I thought maybe it was a strange property of them. But the image above a is a .jpg.
What causes this effect?
I just tried to scroll this image down with my screen refresh rate at 60 Hz then 75 Hz: it seems to flicker more at 60 Hz... Maybe it's also due to display lag.
PS: You may have more precise answers here: http://physics.stackexchange.com
I think this is a Moiré optical illusion due to the wall's thin, closely put together horizontal lines, not anything to do with scrolling or display at all.
#SkipR's reply should have been the accepted answer.
I just finished designing this splash page for my startup: http://beta.mergenote.com/
Load time and initial render is a snap across all the browsers I've tested. (I haven't looked at any IE versions, but sourced it to friends who all felt it was similar enough to Chrome they didn't notice anything.. they aren't web devs though so if you spot something let me know).
The web page used jQuery for a simple slideshow, and for parallax scrolling it uses skrollr https://github.com/Prinzhorn/skrollr
It uses an SVG sprite, whose width and height have been set to 3x the largest rendered size of any of it's icons (because of an Opera and Firefox rendering issue where SVGs don't get redrawn at their final size).
On Chrome / Safari, the site is smooth, fast, no issues. On Firefox and Opera (and especially Firefox) the page takes a very long time to repaint on either resize or scroll events, and the animations are all extremely choppy.
I suspect it may be the SVG sprite, but I'm really not sure. The problems I'm having may intensified slightly when I sized it larger, but were there before hand.
Any ideas?
For me it's pretty obvious that the SVGs are the issue. I've disabled them one by one and the page is now fast (it was lagging a lot before).
Even if a single SVG comes into the viewport, the page starts lagging immediately.
It uses an SVG sprite, whose width and height have been set to 3x the largest rendered size of any of it's icons
Could you elaborate? This SVG is 2250 by 10350 pixels. It will take a huge amount of RAM to rasterize. It could as well be 225x1035.
By browser rendering performance I mean things like: scrolling, moving elements in animated fashion, z-order changes.
In particular I get tremendous slowdown in Firefox 3.6 and IE8 when I move an image with top, left styles over my page. I have no problems with Chrome 8.
With firebug I tried hiding page elements one by one and the largest improvent by far came from the page wide background Jpeg that I use. I wonder how is it affecting performance as the image is moving above another element that obscures the background. This another element is partly transparent PNG (but not in the part the movement happens), maybe this has something to do with it? I use a lot of transparency and CSS3 effects and somehow they slow down everything, even things that look completely unrelated.
Overall I get the impression that the browser is rerendering the whole page when something is moving, instead of only the affected pixels.
Any educated guess as to why all this happens?
EDIT Any picture or text that sits below my moving image causes it to slow down a lot when passing over it. The moving image itself is with transparent background, but changing it to opaque had almost no effect.
Moving a transparent element (particularly an element with a shadow) over a fixed background forces it to be recomposited every frame. Opaque shadowless elements on the other hand can be moved with a simple blit.
If you want to see a huge slowdown in most browsers, make a page with a bunch of elements with border-radius and box-shadow, then set the background of the page to background-attachment:fixed.