웹 디자인에서 스플래시 화면의 10가지 극적인 예

드라마틱한 입구를 만들고 싶으신가요? 놀라운 애니메이션, 고급 라이브러리 실험 또는 독창적인 디자인으로 방문자를 놀라게 하기 전에 방문자를 따뜻하게 하고 싶으십니까? 그런 다음 스플래시 화면에 눈을 설정해야 합니다.

데스크탑 소프트웨어의 세계에서 와서 웹 디자인에 성공적으로 뿌리를 내리게 되었습니다. 빠르고, 가볍고, 비교적 간단하고 강력합니다. 우리는 항상 처음 몇 초가 세상을 어떻게 바꿀 수 있는지에 대해 이야기합니다. 모든 것은 처음부터 완벽해야 합니다. 그리고 스플래시 화면은 이 임무의 성공과 직접적으로 연결된 웹 애플리케이션의 구성 요소 중 하나입니다.

대다수의 사람들은 이 소중한 첫인상을 만드는 배후에 영웅 영역이 있다고 생각합니다. 그러나 i에 점을 찍고 t를 건너는 것을 좋아하고 매초가 중요하다고 믿는 꼼꼼하고 부지런한 코드 아티스트가 있습니다. 글쎄, 그것은 방법입니다.

온라인 청중을 더 빨리 시작할수록 더 나은 첫인상을 남길 수 있습니다. 그렇기 때문에 우리는 이 분야에서 다양한 독창적인 솔루션을 목격하고 있습니다. 실제로 그리고 실제로 그들은 웹사이트와 청중 사이의 대화를 엽니다. 로더가 창의력을 과시할 능력이 없다고 생각한다면 스플래시 화면은 확실히 잠재력이 있습니다.

전체 화면 활용하기

스플래시 애니메이션을 사용하면 작은 요소뿐만 아니라 전체 화면이 서비스에 있습니다. 그들은 관객에게 놀라운 것을 약속하여 관심을 불러일으키는 영화 오프닝 크레딧 시퀀스와 같습니다.

테드 아큐리의 SmokeT

Three.js는 빠르고 가벼운 인트로를 만드는 데 좋은 동반자가 아니지만 Tedd Arcuri의 경우 확실히 트릭을 수행합니다. 여기에 능숙하게 재현된 매우 사실적인 연기 효과를 사용하여 문자 "T"의 모양을 향상시킵니다. 후자는 로고 타입, 마스코트 또는 제목으로 쉽게 변경할 수 있으므로 여기에서 순전히 상징적입니다.

.

티모시 기블린의 스플래시 페이지

대부분의 스플래시 화면은 브랜드 아이덴티티와 함께 ​​사용됩니다. 예를 들어 Timothy Giblin의 Splash 페이지가 있습니다. 아티스트의 창의적 사고가 풍부해진 브랜드 아이덴티티가 돋보이는 100% 클래식 스플래시 화면입니다. 저자는 황금 평균을 고수하는 방법을 보여줍니다. 그의 개념은 독창적이고 동시에 겸손합니다. 그것은 단지 로고 타입을 드러내지만, 이 폭로가 시선을 사로잡습니다.

Hitesh Sahu의 스플래시 화면 애니메이션

이 예는 Timothy Giblin의 솔루션보다 덜 인상적이지만 더 실용적이고 오늘날 모든 곳에서 볼 수 있습니다. 본질적으로 다음 단계로 넘어가는 게으른 로딩일 뿐입니다. 홈페이지의 요소들을 하나하나 재미있고 창의적으로 보여주어 더욱 흥미진진합니다.

더 흥미로운 코드 조각이 있습니다. 컬렉션을 함께 탐색하고 다음 프로젝트에 가장 적합한 것을 찾도록 합시다.

클래식 솔루션

스플래시 화면에 보다 검증된 접근 방식을 사용하고 싶으십니까? 아래의 예는 당신이 거기에 도달하는 데 도움이 될 것입니다.

Adam Blum의 스플래시 스크린

Adam Blum 솔루션의 아름다움 뒤에는 전통적인 슬라이딩 효과가 있습니다. 깨끗하고 순수한 배경과 연이어 등장하는 몇 가지 핵심 문구가 포함되어 있습니다. 사용자의 관심을 불러일으키는 원시적이지만 실행 가능한 방법인 기대의 힘을 활용합니다.

니라잔의 플레이 온

이전 솔루션을 좀 더 흥미롭게 만들기 위해 Niranjan이 이 펜에서 했던 것처럼 배경으로 조작을 추가할 수 있습니다. 그의 프로젝트 Play On은 이미지 배경에 적용된 반투명 오버레이 화면 사이의 멋진 슬라이딩 전환을 특징으로 합니다. 멋지고 재미있습니다.

윌리엄스의 마이 스플래쉬

My Splash by Williams는 고전적인 시작 화면의 또 다른 대표적인 예입니다. 개념에는 두 단계가 있습니다. 애니메이션은 처음에는 적당히 편안한 속도로 작가의 서명을 드러낸다. 그 후 검은 화면이 나타납니다. 이것은 수많은 프로젝트에 적합한 우아하고 매끄럽고 비즈니스 같은 솔루션입니다.

Dmytro Lvivsky의 애니메이션 스플래시 화면

Dmytro Lvivsky의 Animated Splash Screen은 자신만의 솔루션을 만들기 위한 완벽한 시작점입니다. JavaScript 기반 애니메이션에는 여러 화면과 각 화면 사이의 전통적인 전환이 있습니다. 후자는 원이 극을 이끄는 효과를 기반으로 한다.

CodePen에서 Dmytro Lvivsky(@UnforbiddenYet)의 Pen Animated Splash Screen을 참조하십시오.

Giles Papworth의 간단한 CSS3 페이딩

다음은 엄청나게 단순화된 솔루션입니다. 일상은 유서 깊은 페이딩 효과와 함께 텍스트 블록을 하나씩 표시하는 데 있습니다. 그러나 해야 할 모든 작업을 수행합니다. 그리고 가장 중요한 것은 CSS3만 사용하기 때문에 귀중한 리소스를 "먹지" 않고 수행합니다. 심플하고 우아하며 겸손하고 가볍습니다.

무드세터

다음 예는 시작 화면에서 웹사이트의 톤을 설정하는 데 시작 화면을 사용할 수도 있음을 보여줍니다.

Andrew Tunnecliffe의 콘솔 로딩 애니메이션

예를 들어, 코더라면 Andrew Tunnecliff의 콘솔 로딩 애니메이션이 적절한 분위기를 조성할 것입니다. 그것은 구식이며 잔인할 정도로 간단하며 개발자를 위한 개인 포트폴리오와 완벽하게 어울립니다.

Thibault Jan Beyer의 떨어지는 숫자

통계 기반 또는 데이터 기반 프로젝트를 염두에 두고 있다면 Thibault Jan Beyer의 Falling Numbers가 스토리텔링 경험을 위한 좋은 시작점이 될 것입니다. 애니메이션은 결국 땅에 부딪혀 메인 화면을 여는 떨어지는 숫자와 함께 열립니다. 약간의 디지털 스파이스가 더해진 기하학적인 매력이 있습니다.

마지막으로

많은 사람들에게 Stan Lee는 항상 "Bruce Lee의 괴상한 동생"이 될 것입니다. 우리에게 그는 선이 악을 이기는 우주 뒤에 서있는 아이콘이며 영원히 우리 마음에있을 것입니다.

Matt Feinstein의 마블 스플래시 스크린

Matt Feinstein의 Marvel Splash Screen은 정확히 공물은 아니지만 모든 슈퍼히어로 팬들은 그것을 즐길 것입니다. 제목은 그 자체로 말합니다. 그의 스플래시 애니메이션에는 놀라운 만화책 분위기가 있습니다. 그것은 놀라운 것처럼 보이는 Marvel 영화의 오프닝 시퀀스를 복제한 것입니다.

스플래시를 만드는 방법

스플래시 스크린은 물론 무겁지 않은 한 로더의 대안으로 사용할 수 있습니다. 불행히도 여전히 그것을 너무 진지하게 받아들이고 그것을 연극의 액션으로 가득 찬 부분으로 변형시키려는 사람들이 있습니다.

웹 디자인의 스플래시 화면은 빠르고 짧고 가벼우며 요점을 정확히 전달하는 한 효과적입니다. 물론, 그들은 당신의 천재성을 보여주기 위해 전체 화면을 제공합니다. 그래도 본연의 사명에 충실해야 합니다. 관심을 불러일으키고 즉시 더 흥미로운 솔루션으로 지휘봉을 넘겨야 하는 스플래시입니다.