12 ms·
Scroll Slow. Have Fun
- canda 12y agoThis is funny. Great work!
- nanofortnight 12y agoI found it works better on my machine if I adjust .bars height to be 15.5px with a margin-bottom of 1px.
- pbnjay 12y agoI had to do this also. Looked pretty bad before I did so. 13" macbook pro FWIW.
- jweir 12y agoScanimation has a series of books which use this technique: http://scanimationbooks.com/ http://scanimationbooks.com/
- deleted 12y ago[deleted]
- mxfh 12y agoHere's one implementation that is a bit more transparent on what's happening; plus it's sideways. http://codepen.io/bfred-it/details/BFDkI http://codepen.io/bfred-it/details/BFDkI another one https://bitbucket.org/lucio.torre/scanimation/wiki/Home https://bitbucket.org/lucio.torre/scanimation/wiki/Home
- Aardwolf 12y agoThis somehow manages my monitor to make a high pitched sound. It's an LCD monitor. It's the actual monitor making the sound. Switching to a different window or tab makes the sound top. Taking a screenshot of the tab, and closing the tab but viewing the screenshot, produces the sound.
- aw3c2 12y agoSame here, I first thought it was the gfx card's capacitors. They usually like doing that when I use things with pixel shaders (obviously a different thing but it reminded me).
- deleted 12y ago[deleted]
- _sigma 12y agoFurmark always does it to my cards. Perhaps of interest. http://www.hardwarecanucks.com/forum/hardware-canucks-reviews/67822-graphics-card-coil-whine-investigation.html http://www.hardwarecanucks.com/forum/hardware-canucks-review...
- fauria 12y agoSame here on a MBP.
- danielweber 12y agoI've got a MacBook Pro, but slightly older, and I'm not hearing it. Mine still has the ghosting issue, which makes me wonder if that issue is stopping this issue.
- lukashed 12y agoMine doesn't (Retina without ghosting). Though, when scrolling on the site, _something_ (it's not the screen) is making weird noises, almost like the sound when accessing a HDD. I have an SSD though. I had the same issues with other sites / applications when scrolling in general as well. Even more noticeable with the MacBook Air I had before. Is there any rational explanation for this?
- chc 12y agoI used to have a computer that did that a long while back. It made a whistle whenever I'd scroll. IIRC I decided it was the video card, though I'm not sure I ever confirmed it.
- mattdotc 12y agoThis is great. Reminds me of a certain kind of chain email that I would commonly receive from friends in the late 90s, although I imagine that they likely existed before that time as well. You would get these emails that were thousands of lines long with ASCII characters all over the place. When you'd scroll, though, an animation would take form and you'd watch stuff bounce left and right across the screen and other effects similar to, but more primitive than, the effects demonstrated by this submission.
- tholman 12y agoFor wanting to look more into the math/art behind this, they're based on Moiré patterns - http://en.wikipedia.org/wiki/Moir%C3%A9_pattern http://en.wikipedia.org/wiki/Moir%C3%A9_pattern
- mxfh 12y agowould also relate this to the technique of interlacing[1], which I find in this case even more relevant than the very special application of a moire pattern. Just that this one has more than the usual two fields. Basically you're moving an interlaced still image composite made from multiple frames of an animation under an stripe mask revealing only the current frame, where the ratio of stripe to black equals the number of frames. Lenticular prints[2] work in the same way, but instead of a mask the lenses blow up each line to full width (much like an optical equivalent to line doubling video deinterlacing), trading resolution in one dimension for encoding multiple frames. [1] http://en.wikipedia.org/wiki/Interlaced_video http://en.wikipedia.org/wiki/Interlaced_video [2] http://en.wikipedia.org/wiki/Lenticular_printing http://en.wikipedia.org/wiki/Lenticular_printing
- ot 12y agoMoiré patterns are about superimposition of periodic patterns. This has nothing to do with it, it's just dividing an animation into scanlines and interleaving them so that the horizontal lines act as a shutter when scrolling.
- bjoveski 12y agopoemotion by Takahiro Kurashima has many amazing examples of this type of art. A very good gift for anyone that appreciates mathy art :) You can order it here http://www.amazon.com/Poemotion-2-Takahiro-Kurashima/dp/3037783516 http://www.amazon.com/Poemotion-2-Takahiro-Kurashima/dp/3037...
- raimondious 12y agoYes! I just got this for Christmas. Granted, I showed it to the person who gifted it :) I still loved receiving it and have spent a lot of time with it.
- addisonj 12y agoI am lazy and (apparently) suck at scrolling smoothly, dropping this in the console worked well :) setInterval(function() { window.scrollTo(0, document.body.scrollTop + 5) }, 60)
- gtCameron 12y agoThat didn't work in Firefox for me but this one does: setInterval(function () { window.scrollTo(0, document.documentElement.scrollTop + 5); }, 60)
- qwreasdfkjhiouy 12y ago> and math do this instead for 60 intervals per second: setInterval(function() { window.scrollTo(0, document.body.scrollTop + 5) }, 16.666666666666668) or better yet skip the setInterval and have the page continue to move: var scrollIncrement = 5; var height = Math.max( document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight ) - window.innerHeight; var AnimationFrame = (function() { var FPS = 16.6666666667; // 1000 / 60 = Frames Per Second var RAF = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function(a) { window.setTimeout(a, FPS); } var CAF = window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.msCancelAnimationFrame || window.oCancelAnimationFrame || function(a) { window.clearTimeout(a); } return { request: function(a) { RAF(a); }, cancel: function(a) { CAF(a); } } })(); var scroll = function(){ var scrollPosition = Math.max( document.documentElement.scrollTop, document.body.scrollTop ); if ( scrollPosition == height ) scrollIncrement = (-1 * scrollIncrement); else if ( scrollPosition == 0 ) scrollIncrement = (-1 * scrollIncrement); window.scrollBy(0, scrollIncrement); AnimationFrame.request(scroll); } AnimationFrame.request(scroll); you can easily just tweak the scroll distance as well by entering scrollIncrement = x;
- 12y ago
- skynetv2 12y agomy child has a book in this format http://scanimationbooks.com/ http://scanimationbooks.com/ really cool, animals move etc.
- kylec 12y agoLoads Slow. No Fun.
- tracker1 12y agoI wish this was behind cloudfront or maxcdn... curious if the images can be compressed better maybe too...
- greenvaio 12y agoNot loading for me. Server down?
- seanalltogether 12y agoWhat's the top image? I thought it was a spinning skull at first but that can't be right.
- vlunkr 12y agoThat's what I thought. That was the only one that didn't look very good.
- khalilravanna 12y agoThat's what it looks like to me, 4 skulls fused together, spinning as one entity. Very cool.
- deleted 12y ago[deleted]
- m52go 12y agoAwesome work!! It ended too soon ;)
- tuhaihe 12y agoyeah, just too short.
- cryowaffle 12y agoAm I doing something wrong? I don't see anything interesting. I see black lines and some art scrolling behind the lines. Is there some sort of illusion this is supposed to create?
- cryowaffle 12y agoI see, you have to use the scroll bar which goes one pixel at a time. This doesn't work for me if I use my scroll wheel on my mouse. It works if I grab the scroll bar and move downward.
- city41 12y agoFor me the skull one just never worked right no matter how I tried scrolling. But the other ones work great.
- Pxtl 12y agoTo scroll super-slowly and smoothly on Windows, use the middle-click thing that spawns a little arrow-circle doodad. I'm pretty sure Linuces are inconsistent about implementing that feature, though.
- ferrari8608 12y agoThat is correct. I just realized I do not have this feature on my Arch with Firefox in i3.
- JonathonW 12y agoIt's an option in Firefox, which (IIRC) is disabled by default everywhere except Windows. Look in Firefox's preferences; on the Advanced tab, it's the "Use autoscrolling" option.
- wldcordeiro 12y agoIt's one of the first settings I turn on in a Firefox install and I wonder why it isn't default behavior in browsers it's so convenient.
- Pxtl 12y agoMiddle-click-to-instacopypaste-highlighted-text is a well-established standard on Unix/Linux and people are highly resistant to losing it. I like the Windows convention that the middle-mouse is entirely for navigating the viewpane, so I'd prefer if it was just ctrl+command+click or something for the "selection-paste" operation, but that kind of UI change is a hard sell.
- fallinghawks 12y agoAh, thank you! My scrolling is just too spastic :) Does anyone besides me have a problem with the pictures being too large and too close together? The mask lines were only in the top half of the screen and I could never see the entire picture onscreen as they were too large. Zoom out did nothing.
- gima 12y agoPacman eating dots began playing in my head..
- AlphaGeekZulu 12y agoWe just produced a children book with this technology in Germany: http://www.amazon.de/Ulff-Backenh%C3%B6rnchen-eine-irre-Verfolgungsjagd/dp/3944572076/ http://www.amazon.de/Ulff-Backenh%C3%B6rnchen-eine-irre-Verf... Will be released in the next 4 weeks. It was fun to make, but also quite nightmarish in the technical details. It is a hell of work (we have roughly 30 animations in the book, very small and very big ones). It requires extremely accurate measurements for the grid-foil and a sophisticated workflow and color management. In the first run, the printer forgot to fixate the ink on the grid-foils with a protective layer, so using the foil would smear the black color.
- acomjean 12y agoWhen I was a kid, we had a similar book (Magic Moving Picture Book). It was a lot of fun. Out of Print, but still on amazon http://www.amazon.com/The-Magic-Moving-Picture-Book/dp/0486232247 http://www.amazon.com/The-Magic-Moving-Picture-Book/dp/04862... Hope you get yours working well.
- wmeredith 12y agoI had this as well and was fascinated by it as a youngster. Seeing this site today brought those memories to the surface in a rush of nostalgia. This link in the comments was icing on the cake, thanks!
- ryanong 12y agoany pictures or previews?
- AlphaGeekZulu 12y agoThe book has been printed and is currently delivered to stores and Amazon. The Amazon-link above will come up with previews in the next couple of days. The effects are quite stunning. The cover is also on the publishers website: http://www.mixtvision-verlag.de/main_detail.php?id=1261&bereich=programm_neue_buecher http://www.mixtvision-verlag.de/main_detail.php?id=1261&bere... The book will be available as ebook as well, although I cannot actually see the sense of this at all, as the animations will not work ;-)
- drccrd 12y agoI created a webapp for fun some time ago, is somewhat minimal but explores how to do this effect easily from a bunch of images or shots from the webcam (applying cool filters!), the js sources are not compressed so you can read what is going on http://animotion.licheni.net/ http://animotion.licheni.net/
- jondiggsit 12y agoThat seriously hurts my eyes
- chtoric 12y agomy eyes, they are burning
- armandososa 12y agoAlso, squint.
- ErikRogneby 12y agoThese images seem different than traditional lenticular images from books. Here is pacman without the bars: http://www.scrollslowhavefun.com/images/002.jpg http://www.scrollslowhavefun.com/images/002.jpg
- adam12 12y agoI felt like I was going to have an ocular migraine after looking at that for a few seconds.
- Mithaldu 12y agoTrying this with different browsers on Windows highlights how bad the pan acceleration curves are in Firefox and Chrome. In Chrome there are exactly 2 speeds where this works usefully, and they're a pixel apart. In Firefox there's a small handful of them, and you have to be fairly careful with your mouse. In Opera 12 on the other hand there's a range of about one inch of mouse movement on the screen, where you get, pixel-for-pixel, different speeds for this thing, all of them useful.
- theandrewbailey 12y agoI've seen this technique used with transparencies on an overhead projector before. Things get interesting when the fields aren't aligned exactly. https://www.youtube.com/watch?v=LCIsIfEOEI8 https://www.youtube.com/watch?v=LCIsIfEOEI8
- pearjuice 12y agoI have no idea what is going on but sure had fun scrolling slow. Well worth my time. Props to the founders for launching. It is a hard field to compete in but I am sure they will find their revenue model.
- MajorSkrub 12y agoI used to have a book that did that..
- stevenkovar 12y agoMy vision felt "wavy" for a bit after viewing this. Pretty cool.
- everyone 12y agoI got quite intense distorted vision after perusing this for a while. Trippy!
- aruggirello 12y agoWow. This is definitely something that you should never look at if you suffer from epilepsy.
- etjossem 12y agoAgreed. I wish people gave a little more warning prior to showing pages with rapid changes in luminescence. You're talking about a really rare type of epilepsy - but frankly, it's so easy to add a non-triggering splash screen that everyone building something like this should do it. There's no excuse for giving even one of your users brain damage.
- r109 12y agoWhen I got to the bottom my monitor started melting down and up and I looked around the room to see if space time had truly been bent...
- aaronrenoir 12y agoIt's cool. I did something similar on my home page. http://catzo.com http://catzo.com
- dblotsky 12y agoHooray, Moiré! :)
- Avitas 12y agoThis trick has an interesting artifact. When I came back to HN, I noticed that my mind made my vision appear actively "wavy." In other words, I could see some slight movement of waves on the horizontally drawn elements currently displayed -- the top orange bar that says [Y]Hacker News [...] had the appearance of fluctuating with low frequency waves.
- knutae 12y agoInteresting, indeed. I didn't get that, but it is probably similar to the effect caused by videos like this: https://www.youtube.com/watch?v=tVgOLWVYytM https://www.youtube.com/watch?v=tVgOLWVYytM
- asymmetric 12y agoI got this too!
- dragonshed 12y agoNifty. This effect reminds me of the old-school color cycling animations that 8bit games from the 90s used to have. Someone actually made a canvas viewer to show off how it works: http://www.effectgames.com/effect/article.psp.html/joe/Old_School_Color_Cycling_with_HTML5 http://www.effectgames.com/effect/article.psp.html/joe/Old_S...
- pimlottc 12y agoAh, palette shifting, that takes me back... but man, Mark J. Ferrari, truly a master in the 8-bit field. Really took palette shifting to another level. And the site does a great job exposing what's going on under the covers. Great link!
- b409ba0801cd21 12y agoThis reminded me of a toy I had as a kid: the Tomy Tutor Play Computer. The screen was a lenticular lens over a paper scroll, and pressing the space bar caused the lens to move vertically. Here is a video made by someone selling one: https://www.youtube.com/watch?v=TAghB2-Ks5I https://www.youtube.com/watch?v=TAghB2-Ks5I I bet many of the people here can guess the fate of it and many of my other toys.
- vinayp10 12y agowow that hurts my eyes
- slinkyavenger 12y agoOh cool, an internet zoetrope.
- CDokolas 12y agoWhy do I have to look at it sideways? Couldn't this be done horizontally?
- dahart 12y agoI couldn't scroll slow enough! So I... t=300;s=1;y=t;d=s;i=setInterval(function(){window.scrollTo(0,y);y+=d;if(y>6200) d=-s;if(y<t) d=s},33); NOW its fun. ;)
- zenbakiak 12y ago…then secondary click, .bars { display:none; } kill all the fun!
- zenbakiak 12y ago…then secondary click, .bars { display:none; } kill all the fun!
- cgcardona 12y agoThe background images are pretty interesting: * http://www.scrollslowhavefun.com/images/001.jpg http://www.scrollslowhavefun.com/images/001.jpg * http://www.scrollslowhavefun.com/images/002.jpg http://www.scrollslowhavefun.com/images/002.jpg * http://www.scrollslowhavefun.com/images/003.jpg http://www.scrollslowhavefun.com/images/003.jpg * http://www.scrollslowhavefun.com/images/004.jpg http://www.scrollslowhavefun.com/images/004.jpg * http://www.scrollslowhavefun.com/images/005.jpg http://www.scrollslowhavefun.com/images/005.jpg * http://www.scrollslowhavefun.com/images/006.jpg http://www.scrollslowhavefun.com/images/006.jpg
- arbabu 12y agoIs the content generated auto with some algorithn or is it manual work?
- seiya 12y agoScroll Slow. Have Fun. Get a new pair of eyes.
- sinwave 12y agoReminds me of a lyric from an old rap song. "Drive slow, homie". Ready and eager for downvotes on this unproductive comment :p
- rajeemcariazo 12y agoIs there an application, in any way, of this in graphics animation or any field?
- vander_elst 12y agoawesomly sick!
- hownottowrite 12y agoParratoro is an artist focused on this type of work. His designs are pretty amazing. http://www.parratoro.com http://www.parratoro.com
- mcms 12y agoPeople with a pointing stick, good luck!