JS와 CSS3의 15가지 놀라운 효과

디자이너 여러분, 여러분의 두뇌가 더 이상 기능을 거부하는 지경에 이르렀습니까?

웹사이트를 A Song of Fire and Ice(책을 읽지 않는 대중을 위한 Game of Thrones 시리즈) 이후에 차기 대작으로 만들 아이디어를 갖고 있고 찾고 있다면 다음 15 CSS3를 확인하십시오. 우리가 당신을 위해 반올림 한 효과.

튜토리얼에서 거래에 이르기까지 웹사이트를 굉장하게 바꿔줄 15가지 놀라운 효과를 제공합니다!

시차 효과

Nintendo Game Boy 25주년을 기념하는 ihatetomatoes 웹사이트를 검색해 보셨습니까? 어디에서 테트리스 게임도 하게 되었나요?

아니면 모델의 다채로운 배경과 대조적으로 항목이 얼마나 훌륭하게 튀어나와 있는지에 대해 Rimmel의 웹사이트를 검색했을 수도 있습니다.

현재 디자인에서 가장 격찬을 받는 듯한 3D 효과를 기술적으로 시차 효과라고 합니다. 디자이너는 이것들을 가지고 노는 것을 좋아하지만 역효과를 일으키고 뒤죽박죽 엉망이 될 수 있으므로 미묘하고 전략적이어야 합니다.

시차 효과 또는 시차 스크롤은 전경보다 느린 속도로 배경을 로드하여 3D 모양을 더 많이 만드는 결과입니다. 많은 작업처럼 들리나요? 똑똑하게 일하는 사람이 아니라 Cyberchimps에서 이미 완전히 완성된 Parallax 테마를 얻으십시오.

켄 번즈 효과

다큐멘터리 영화 제작자는 정지된 이미지로 이동 및 확대/축소하는 개념을 개척했습니다. 그래픽 디자이너는 이 효과를 많이 사용했으며 많은 웹사이트에서 이 효과를 접했을 수도 있습니다.

이 효과는 말 그대로 안구를 초점을 맞추고 싶은 곳으로 안내할 뿐만 아니라 이미지에 약간의 강도를 더합니다. 오래된 사진이 화면을 가로질러 번쩍이고 내레이터가 사진의 무언가에 대해 이야기하는 동안 프레임이 해당 피사체로 천천히 이동하고 확대되는 영화를 본 것을 기억하십니까?

Ken Burns 효과는 지루한 웹사이트에 즉각적인 페이스리프트를 제공하므로 꽤 유명해졌습니다.

반원형 탐색 메뉴

웹 사이트의 모양을 변경하기 위해 모든 노력을 기울일 필요는 없습니다. 때로는 늙고 지루한 남성 옵션을 없애는 것만으로도 도움이 될 수 있습니다.

대신 다양한 메뉴 옵션을 보여주는 세련된 원형 또는 반원형 탐색 옵션을 선택하십시오. 일부 디자이너는 소셜 미디어 공유 버튼에만 이것을 포함하지만 그 다양성에 놀라게 될 것입니다.

명백한 음악 콘솔 및 소셜 미디어 공유 아이콘에서 기본 메뉴 및 프로필 아이콘에 이르기까지 이를 활용할 수 있는 방법이 많이 있습니다.

이 CSS3 효과를 처음부터 만들면서 머리를 긁어모으고 싶지 않으신가요? DealFuel에서 하나를 무료로 받으십시오.

로그인 패널 표시/숨기기

요즘은 슬라이딩 패널이 일반적으로 사용되지만 주로 탭이 너무 많은 부하를 줄이기 위한 것입니다. 슬라이딩 패널은 여러 면에서 유익할 수 있기 때문에 이 옵션의 잠재력을 실험하는 설계자는 충분하지 않습니다.

콘텐츠 주제를 보여주고, 깔끔한 모양을 만들고, 미학을 높이거나, 기존의 디자인된 웹 사이트와 다릅니다. 로그인 패널 표시/숨기기는 모든 워드프레스 웹사이트의 필수 요소이며 로그인하면 여러 메뉴 옵션이 있는 대시보드 개요를 제공합니다. 여기에서 이 패널에 대해 자세히 알아보세요.

슬라이더 로그인 양식

슬라이드하여 더 많은 콘텐츠를 표시하는 또 다른 로그인 패널 옵션은 구독자가 이메일 주소와 이름보다 더 많은 정보를 입력하도록 하면서도 동시에 너무 많은 정보를 제공하고 싶지 않을 때 유용합니다.

공간을 줄이는 것도 최소한의 테마 웹사이트를 만들 때 유용할 것이므로 꼭 확인하세요.

3D 리본 및 3D 효과

여전히 시차 효과가 두렵고 엉망이 될까봐 두려워한다면 작게 시작하십시오. 3D 리본, 다양한 음영 및 그림자를 사용하여 웹사이트에 깊이 있는 전체적인 환상을 만들어 3D 효과를 렌더링합니다.

3D 리본 자체가 절대적으로 놀랍습니다. 이것을 사용하여 웹사이트의 일부 또는 게시하려는 공식 인증 문서를 강조 표시하면 페이지의 전반적인 시각적 매력을 높일 수 있습니다.

pvmgarage에서 CSS3를 사용하여 효과를 만드는 방법을 알고 있습니다.

커버플로우 효과

책 기반 웹 사이트에서 주로 사용되는 이 효과는 사진을 검색할 때 Mac 또는 Apple 장치에서 확실히 볼 수 있습니다. Coverflow 효과는 책 표지와 같은 다양한 항목을 보여줍니다. 그런 다음 왼쪽이나 오른쪽으로 쓸어넘겨 표지를 보고 팝업 세부 정보를 얻고 선택할 수 있습니다.

흥미롭게 들립니까? 이것을 프로젝트에 구현하시겠습니까? 그렇다면 확실히 이 부분을 살펴보십시오.

CSS3 전환

열심히 하기보다는 현명하게 플레이하는 디자이너는 웹사이트에 mojo를 추가하고, 여기에서 테마를 변경하고, 거기에 약간의 음영 및 그림자 요소를 추가하고 실제로 페이지를 변형할 수 있다는 것을 알고 있습니다. 이를 수행하는 또 다른 방법은 CSS3 전환을 통해 페이지 콘텐츠에 애니메이션을 적용하는 것입니다.

문자 간격에서 텍스트 그림자에 이르기까지 원하는 모든 것을 재생하여 가장 적합한 것을 확인하십시오. 또한 포괄적인 범위의 전환 효과로 구성된 훌륭한 공짜 물건이 있습니다.

눈을 테마로 한 CSS3 애니메이션

설 연휴의 여파로 아직도 고민이신가요? 눈을 테마로 한 CSS3 애니메이션은 축제 분위기일 뿐만 아니라 아이스크림 브랜드와 같은 특정 웹사이트에서도 매우 잘 작동합니다.

빠르고 사용하기 쉬우며 테마나 계절을 보완하기 위해 웹사이트나 블로그 페이지의 모양을 변경할 수 있습니다.

생기

애니메이션은 미묘하게 완성된 웹사이트에서도 놀라운 일을 할 수 있습니다. 관심이 클릭 유도 문안으로 향하기 때문에 관심을 끌 뿐만 아니라 전환에도 도움이 됩니다.

또는 단순히 페이지의 액면가에 추가됩니다. 다음은 확인할 수 있는 몇 가지 훌륭한 특수 애니메이션 효과입니다.

활자 효과

인스타그램 인용문 게시물에 과감한 텍스트 모양을 본 적이 있습니까? 이것이 레터프레스 효과의 모습이며 웹 디자인에서도 꽤 인기를 얻고 있습니다.

역타자 느낌이 나지만 우아하고 세련된 모습을 보여줍니다. 귀하의 것이 온라인 출판물이나 블로그라면 반드시 추천합니다. 또한 모든 C-suite에 가지 않고 전문가의 손길을 내고 싶다면 이것이 도움이 될 것입니다. 다음은 CSS3에서 활자 효과를 사용하는 방법에 대한 자습서입니다.

뒤집기 원

약간의 정보는 누구에게도 피해를 주지 않을 뿐만 아니라 웹사이트의 USP가 될 수도 있습니다. 새로 고침할 때마다 무작위 사실을 표시하는 웹사이트는 작은 손잡이가 있는 사진이 있는 일종의 갤러리로 작동할 수 있으며, 클릭하면 재미있는 퀴즈를 보여주기 위해 열립니다.

하지만 일반 웹사이트에서도 플리핑 서클은 매우 중요합니다. 정보를 압축하므로 텍스트로 가득 찬 페이지가 없습니다. 그리고 멋진 3D 느낌도 있습니다. 다음은 뒤집기 원을 만드는 방법에 대한 자습서입니다.

메가 메뉴

많은 카테고리를 랜딩 페이지에 바로 배치해야 하지만 복잡한 메뉴 표시줄을 만들지 않는 전자 상거래 웹사이트에서 본 적이 있을 것입니다.

메가 메뉴 옵션은 교육 산업에서도 필수입니다. 모든 주요 과정, 입학 정보, 학생 결과 등을 보여주는 대학 웹사이트가 있습니까?

메가 메뉴는 복잡하지 않고 더 날렵한 메뉴 모음 옵션을 생성하는 데 도움이 될 수 있으며 더 길고 복잡한 메뉴 옵션으로 인해 독자가 잘못된 옵션을 클릭하도록 혼동하지 않도록 할 수 있습니다. 반응형 메가 메뉴를 무료로 받아 많은 점수를 얻을 수도 있습니다.

아코디언 갤러리

독자가 사이트에 계속 참여하도록 하는 두 가지 방법이 있습니다. 강력한 콘텐츠를 강조하고 강력한 콘텐츠에 대한 관심을 끌 수 있습니다. 정적인 페이지는 독자의 눈을 사로잡을 수 있지만 아코디언 갤러리와 같은 인터랙티브한 페이지는 독자의 눈을 사로잡을 것입니다.

아코디언 갤러리는 최고의 포트폴리오를 선보이거나 베스트 셀러 제품에 관심을 갖기를 선택하든 항상 작동합니다. 독자의 관심을 끌고 페이지에 머물 수 있는 시간은 단 6초입니다. 아코디언 갤러리를 사용하여 웹사이트에서 독자의 관심을 더 오래 끌 수 있습니다. 무료로 사용할 수 있는 적응형 Accordion Gallery 플러그인이 있습니다.

라이트박스

그리드 갤러리가 얼마나 중요합니까? 당신이 사진 작가, 예술가 또는 단순히 블로거라면 이것은 당신의 다음 큰 공연을 의미할 수 있습니다.

그리드 갤러리는 모든 최고의 작품을 전시합니다! 언덕 위의 멋진 일몰 장면부터 강렬한 거리 초상화까지, 감탄을 자아내고, 소문을 퍼뜨리거나 단순히 계약을 성사시키도록 유도하는 그리드 갤러리가 최고의 이력서가 될 수 있습니다.

디자이너로서 이것은 클라이언트의 작업뿐만 아니라 자신의 웹사이트에 대해서도 고려해야 하는 사항입니다. 귀하의 작업을 챔피언으로 만들고 창의력을 보증하십시오. 그리드 갤러리는 그 가치가 있습니다.

하지만 이 거래에서는 아무 가치가 없습니다. 그러니 지금 잡으러 가십시오!

이 중 친구에게 어떤 것을 추천하시겠습니까?