There’s a wide variety of tactics that you can use to create a unique scrolling experience on your site. Join us as we take a look at twenty fresh sites and how they use scrolling effects in different ways.
Laura Meroni
I love these sites that are able to pull off something great without a lot of fancy animations. By manipulating the positioning of various items on scroll, they create an awesome parallax effect that makes the site look and feel like a deeply layered experience.

‎Gozu
This site is really interesting and unique. The canvas is split into thirds vertically with the middle section being highlighted above the others. When you scroll, the page jumps a predefined distance to highlight the next section. It’s a pretty cool effect that makes for an infinitely scrolling (looping) experience that’s not like any other site I’ve seen.

MyProvence Festival
This site is a series of eight different fullscreen slides. Every time you scroll, the page automatically jumps to the next or previous slide, which automatically sizes itself to the current screen size. If you’re designing a site with clear sections and don’t necessarily want the users focusing on the in between, this is a great way to go.

Monokroom
Monokroom slices the page vertically a number of times and scrolls each slice at a different rate. The cool part is that the messy, discombobulated layers come together at a few predefined points to make everything look nice and organized. As you scroll further, there’s a pretty cool spinning gear animation to check out as well.

AFORM: Fitness Coach
This site is all about data. As you scroll between background images, words and numbers fly in and out of the screen. The numbers have an awesome effect applied to them that makes them count up until they hit their target value. It’s makes for a fascinating way to present what would otherwise be static information.

Mighty Matcha
This site is a perfect example of how you can use scroll points to specifically direct the user’s attention to very precise locations. As you scroll, different elements on the page are highlighted to grab your focus. Some fade into being, others twist, turn or grow, there’s even a mini video that triggers once you reach that point on the page. As you use the site, you can’t help but look exactly where the designers wanted you to.

MailChimp Annual Report
The MailChimp Annual Report is another example of using scrolling technology to make data really interesting. The right side of the page scrolls through various animated infographics as the background changes colors and graphics and the left side cycles through the different sections of the report.

SCANNER
This one isn’t so much a fancy effect as an interesting scrolling system. As opposed to scrolling the whole page, this site allows you to hover over and scroll each of the primary columns individually. The result is a great way to browse a ton of content while keeping all of the navigation and primary site info accessible.

The Friends and Family Plan
Like our first example, this sites uses a simple vertically scrolling parallax effect to create a layered feel that makes the experience feel quite dynamic without any fancy animations or annoying loading times.

Astoria Villa
This one is so simple and subtle that you might miss it. As you scroll down the page, there are gaps in the background that reveal the image underneath. However, each time you come to a gap, the revealed background image is different.

WOODDECKER
This site uses scrolling effects to highlight the all-weather nature of their product. Hovering in the middle of the page, you’ll see a wooden slab. As you scroll, different animated weather elements are thrown at the product along with informational pop ups that inform you of the specifics of the weather resistance.

Web Effectual
This site uses the same effect as Astoria Villa above, occasionally presenting gaps in the background that reveal different images and text as you scroll.

Fat Media
Fat Media has a ton of stuff happening while you scroll. A dotted path animates and leads you downward as elements fly in and out of view. Various numerical data points are presented in a way that’s nearly identical to what we saw in AFORM above.

Fannabee
This one is almost too crazy to explain so be sure to check it out yourself. Here, scrolling animates the background and the foreground elements. Items spin and drop, images change, iPhones slide in and out; it’s crazy… in a good way.

Antonio Errigo
Antonio uses a few different simple but effective parallax scrolling effects. A plane flies by in the clouds, Antonio leaps in and out of view, etc.

Andrea Sichinolfi
Different effects are in play at different points here. As you scroll, you reach an area with a section that suddenly expands to reveal hidden content, circles change their stroke width, items pop out from off screen; lots of great animations to keep you interested.

Bam Strategy
This one is really impressive. Here the scrolling effects are used to tell a story. As you scroll, you see a series of panels, each of which holds a little animated scene, revealing the next part of the story. If you’re looking for a way to inject narrative into your design, this is some great inspiration.

Italio Kitchen
Another really simple use of scroll effects. As you move down the page, different ingredients fly into view. At one point, a bowl of salad jumps out of the way to reveal a circle container of text underneath.

Rit Team
This one is really fun to play with. As you scroll down the page, the car on the track follows you. Scroll back up and he’ll quickly turn around and try to catch up, veering wildly off the track to get back.

namemesh
Namemesh presents a new idea for interaction that is one part effective and two parts bizarre. Type in some words and you’ll see four lists of ideas for available domain names appear. If you want to see more, you simply scroll down. As you do so, the list suddenly expands and fills up with new ideas. It’s difficult to describe properly so stop by and try it out.

Ada banyak website dengan ide-ide unik dan kreatif, namun tidak pernah kita ketahui keberadaannya sampai sekarang ini. Kita lebih sering membuka website yang sudah populer dan banyak dipakai orang terlebih website sosial atau komunitas (seperti facebook, twitter, kaskus, dll). Tidak ada yang salah, namun adalah lebih baik jika kita memanfaatkan media internet ini layaknya jendela dunia yang sangat membantu kita dalam menjalani kehidupan real kita sehari-hari, bukannya terbalik, kita yang terpaku pada dunia maya.

Pada artikel kali ini, saya akan share beberapa website yang menurut ane kreatif dan unik dari segi ide serta kegunaannya yang tujuannya untuk mengisi waktu luang saja. Terkadang tampilan tidak melulu mencerminkan kualitas. Ada juga website dengan tampilan biasa. Ini dia beberapa website tersebut:

Calm.com

Pertama kali masuk ke website ini, sudah terbesit di pikiran kalau website ini berkaitan dengan kesehatan. Dari namanya saja sudah bisa ketahui, Calm=tenang. Ya, website ini dibuat dengan tujuan sebagai media relaksasi dan refreshing pikiran dan jiwa kita. Hanya dengan melihat gambar sambil mendengarkan lagu yang menenangkan, kita dibawa ke alam bawah sadar yang bisa membuat pikiran kita rileks. Ada pilihan waktu untuk refreshing, yaitu 2 menit dan 10 menit. Sederhana bukan? Ane sendiri sampai jadikan website ini sebagai musik latar. Silakan sobat rasakan manfaatnya.

Incredibox.fr

Sebuah website unik yang menghadirkan konsep musik dengan animasi beberapa karakter manusia yang akan menjadi alat yang akan mengeluarkan berbagai macam suara setelah kita memilih suara yang diinginkan. Saking pengen terus mencampur aduk suara-suara yang di sediakan akhirnya ane malahan ngabisin banyak waktu diwebsite ini

Screaming Bean

Screaming Beans judulnya, bener-bener lucu dan ga guna banget ini website, tapi sangat menghibur untuk sekali atau dua kali saja deh selanjutnya ya bosen, karena disini konsepnya adalah kacang olahan yang di kemas dalam kaleng makanan, tugas kita hanya mengklik setiap kacang yang muncul sehingga muncul lah jari telunjuk manusia yang akan menggencet kacang tersebut dan kemudian akan muncul kacang berikutnya yang akan melihat teman kacangnya telah tergencet dan menunjukan reaksi-reaksi lucu berbeda, inilah yang bikin ane penasaran

Permainan Garis

Kita hanya menggerakan kursor, maka kalian akan mencoret2 lembaran tersebut.

Paper Toilet

Begitu masuk website ini kita cuma disuguhi 1 roll tissue toilet, tidak ada petunjuk dan navigasi apapun. Intinya adalah, kita cuma roll tissue sampai habis. Tidak ada reward dan hasil apapun.hehe. Benar-benar wasting time. Tapi ada sisi positifnya. Kita bisa habisin tissue tanpa harus mengurangi jumlah pohon di dunia ini.

This is my story

Nah..yang ini keren.. website ini mengisahkan kisah hidup kita. Pertama kita harus mengupload foto kita, isi nama kita, umur dan tempat tinggal kita. Silakan langsung dicoba saja..pasti seru

Eternal Moonwalk

Website ini dibuat tribute to Michael Jackson. Isinya hanya video2 orang yang berjalan ala ‘moonwalk’, ada yg ngebosenin, tp ga tau kenapa kita malah jadi ga bisa pindah dan penasaran sama video selanjutnya yang bakal kita lihat.

Falling Sand

Seperti judul, falling sand. Klik website ini dan kita akan langsung melihat pasir yang berwarna warni jatuh dari atas. klik dan tarik garis disana sini, mainkan pasirnya, that’s it, cuma itu intinya.

Everydayim.com

Masih ingat lagunya LMFAO? Yang everyday im shufflin?? Nah ini dia ada plesetannya ,, Everyday im Hustl’n ya kira-kira artinya tiap hari kita banting tulang cari kerja biar dapet duit… Intinya biar semangat kali ya?! Yuk pada semangat teman-teman!