Parallax Scrolling을 잘 활용한 웹사이트 레퍼런스
+2022.01.13추가)
포스팅 이후로 시간이 지나면서, 소개드린 도메인 중 일부가 만료되었습니다.
확인하여 만료된 도메인에는 취소선을 그었습니다.
또한 추가 레퍼런스를 소개하는 새 글을 작성했습니다.
https://noa-xyz.tistory.com/37
parallax scrolling 홈페이지 레퍼런스2
패럴렉스 스크롤링은 일반적으로 웹 페이지 상의 요소들이 스크롤에 각기 다르게 반응하는 것(또는 그렇게 작동하도록 하는 기법)을 의미합니다. 패럴렉스 스크롤링은 흔히 스토리텔링에 활
noa-xyz.tistory.com
패럴랙스 스크롤링Parallax Scrolling은 스크롤을 할 때 개체마다 움직이는 속도를 다르게 한 것을 말하죠.
원경과 전경을 구분해서 입체감과 원근감을 줄 수도 있고,
같은 심도의 개체들이 서로 다른 속도값을 갖게 해서 역동성을 줄 수도 있습니다.
패럴랙스 스크롤링이나 다른 스크롤 효과를 잘 사용한 웹사이트를 10개 모아 보았습니다.
(패럴랙스 스크롤링만 10개 하려고 했는데, 모아놓고 보니 비슷해 보여서)
1. putzengal.at(도메인 만료)
Putzengel - Schutz vor Schmutz
Seit der Gründung unseres modern geführten Unternehmen in Jahre 2001 steht die Dienstleistungsgedanke absolut an erster Stelle. Die dynamische Entwicklung unseres Unternehmen bestätigt, dass Eigenschaften wie Freundlichkeit, Genauigkeit und Zuverlässigkeit
www.putzengel.at
이미 널리 알려져 있는 만큼 효과 활용에 있어서도 디자인에 있어서도 모범적인 레퍼런스라고 생각합니다.
첫 화면에선 드래그&드랍으로 쓰레기를 쓰레기통에 담을 수 있고,
Unternehmen섹션에서는 여자가 들고 있는 청소기의 on을 클릭하면
소리까지 내면서 나뭇잎과 IE 아이콘을 빨아들입니다.
2. iutopi.com
Iutopi - Creative Land
The brands that evolve are the ones that reach people ( Yours shouldn't be the exception ) Nowadays, there's so much information that you don't have enough time to see everything. We all feel the same. When there are too many options, we prefer the practic
www.iutopi.com
putzengel.at가 패럴랙스 스크롤링을 다른 효과들과 잘 활용했다면,
iutopi.com은 패럴랙스 스크롤링의 사용을 극대화했습니다.
마지막에 footer 영역이 자기 자리를 차지하는 것까지 참 깔끔합니다.
3. beckett.design
Beckett Werbeagentur in Ingolstadt
Licht ins Dunkel bringen... Mit uns werden die kühnsten Ideen lebendig und die spannendsten Visionen Wirklichkeit. Wir setzen Ihre Botschaft sowohl online als auch im Print effektiv sowie innovativ um und schenken Ihrem Unternehmen so ein unverkennbares Ge
www.beckett.design
하나하나 다 잘 만들었지만, 개인적으로 가장 맘에 드는 거 하나를 고르자면
contact 섹션 오른쪽에 큐브가 하나 떠있는데, 실제로 조작할 수 있다는 점입니다.
이런 돌발적인 요소가 주는 의외성이 '디테일이 훌륭하다'는 평가를 부른다고 봅니다.
4. Nasaprospect.com
NASA: Prospect
..you should be able to explore every bit of the solar system, and this may well be required. Due to the aforementioned event, we were forced to scatter these golden objects, lest they be found too easily by the wrong hands. It is important that you do not
nasaprospect.com
패럴랙스 스크롤링도 적용되어 있지만,
그보다는 중앙에 고정된 영역 안에서 동작을 바꾸는 우주비행사가 눈에 들어옵니다.
동화책을 보는 것 같습니다.
5. citipark.co.uk
https://citipark.co.uk/citipark/braking-badly/
Braking Badly
Put your skills to the test and play Braking Badly!
citipark.co.uk
위의 Nasaprospect와 비슷합니다.
패럴랙스 스크롤링 효과가 적용되어 있진 않습니다.
6. stonewallforever.org
https://stonewallforever.org/monument
Monument | Stonewall Forever
Explore a collection of historical content and stories from the community today. The legacy of Stonewall lives on in all of us. Add your piece to the ever-growing monument.
stonewallforever.org
정보 전달은 더럽게 안 되지만, 효과는 일단 멋있습니다.
7. renaudrohlinger.com
Portfolio Renaud
Portfolio - Creative developer Renaud ROHLINGER
renaudrohlinger.com
이것도 많이 알려진 페이지로 알고 있습니다.
개인 포트폴리오 사이트인 만큼, 시선을 사로잡는 효과와 동작들이 전면에서 강조되고 있습니다.
8. dogstudio.co
Dogstudio. Multidisciplinary Creative Studio.
We are at the intersection of art, design and technology. Our goal is to deliver amazing experiences.
dogstudio.co
효과를 사용한 방식은 위의 renauldrohlinger.com와 비슷해 보입니다.
9. valaire.mu(도메인 만료)
Valaire
The official website for Valaire. Check out the latest news, videos, tour dates and more. New Album Oobopopop will be released Sept.16.! Feel good electro music.
valaire.mu
스크롤을 움직이면, 눈으로 보기에 화면이 세로로 움직이다가 가로로 움직이다가 하는 것 같습니다.
유행을 하는 듯 마는 듯, 이따금 보이는 효과입니다.
10. goal.com
https://www.goal.com/story/nxgn2019en/index.html
NxGn 2019: The best 50 wonderkids in football
Goal reveals the most promising players born since January 1, 2000 with Jadon Sancho, Vinicius Junior and 48 more future football superstars featuring
www.goal.com
스크롤을 움직이면, 화면이 '위아래'가 아니라 마치 '앞뒤'로 움직이는 것처럼 보입니다.
효과 자체도 잘 만들었지만, 내용에 맞게 잘 사용되기도 했습니다.
어워즈 등에서 보고 모아둔 참고자료들 중에서, 스크롤 효과를 잘 사용한 것 10개를 골라보았습니다.