로 고유 한 배경 효과를 만들기위한 10 개의 스 니펫이 큽니다(문자 그대로 및 비 유적으로). HD(그리고 현재 4K)디스플레이의 출현으로 디자이너는 화면 부동산의 부하를 차지하는 배경을 만들고 있습니다. 왜? 왜냐하면 그들은 놀라운 시각적 영향을 미치고 이야기를하는 데 도움이되기 때문입니다.그러나 단순히 사진이나 질감을 큰 공간에 던지는 것보다 배경에 훨씬 더 많은 것이 있습니다. Css 와 자바 스크립트의 가끔 비트의 조합은 몇 가지 놀라운 특수 효과의 생성을 강화합니다.

디자이너가 배경을 양념을 치는 독특한 방법 중 일부를 살펴 보겠습니다. 우리는 또한 당신이 그들이 어떻게 작동하는지 정확하게 볼 수 있도록 각 기술에 대한 펜을 포함 할 것입니다.

CSS 혼합 모드 컬러로 변경

만드는 것이 효과 배경이 너무 멋진은 고정된 요소의 상단에 나타납으로 색상을 변경하는 사용자가 스크롤됩니다. CSSmix-blend-mode속성의 사용은 배경의 내용에 따라 색조의 변화를 허용합니다.

스크롤 애니메이션

연상시키는 측-스크롤 비디오 게임이 과거의,이 기술은 기능 두 가지 이미지–각 스크롤이 반대 방향으로합니다. CSStransform및 일부 JS 의 도움으로 수행됩니다.

왜곡 된

왜곡 된 배경은 웹 디자인에서 가장 인기있는 트렌드 중 하나입니다. 그것은 인쇄 디자인에 구현하기 매우 쉬웠다 효과와 웹에서 할 수있는 고통-지금까지. 이 순수한 HTML/CSS 솔루션은 식은 죽 먹기를 만듭니다.

움직이는 그림

상당히 간단한 css 비트를 사용하면이 배경은 여러 이미지 간의 원활한 전환을 허용합니다. 그것은 전통적인 자바 스크립트보다 훨씬 더 가벼운 슬라이더를 만듭니다.

애니메이션 그라디언트

신중하게 수행하지 않으면 애니메이션 배경이 그 위에 앉아있는 내용에서 산만해질 수 있습니다. 이 애니메이션 그라디언트 예제는 더 미묘한 효과이기 때문에 좋습니다. 자바 스크립트를 사용하여 팔레트와 일치하도록 그라디언트 색상을 정의 할 수 있습니다.

블러 스크롤

이 기술은 매우 유용할 수 있습니다 때 시간에 대한 당신이 정말로 원하는 방문자에 초점을 배경 이미지(과 같은 헤더의 뉴스 문서)및 수 있도록 다음에 대한 읽기 쉬운 텍스트의 맨 위에. JQuery 를 조금 사용하면 스크롤시background-size속성을 변경하여 효과를 만듭니다.

오버레이가있는 페이드 인 영웅 이미지

이 예제에서는 몇 가지 일이 있습니다. 첫째,전폭 영웅 이미지는 다른 색조를 만들기 위해 상단에 추가 된 색상 오버레이를 가지고 있습니다. 그런 다음 시각적으로 부드러운 방식으로 이미지를 소개하기 위해 페이드 애니메이션이 구현됩니다. 마지막으로 시차 스타일의 스크롤 효과가 믹스에 추가됩니다. 결과는 비교적 적은 코드(및 JS 없음)를 사용하는 매우 현대적인 모양입니다.

배경 확대/축소 및 팬

최근에 우리가보고있는 효과가 있습니다. 사용자가 패널 위로 마우스를 가져 가면 배경 이미지가 커서의 움직임과 함께 확대되고 패닝됩니다. 일부 상호 작용을 추가하고 사용자의 관심을 유지하는 쉬운 방법입니다.

Hover 에서 공개

이 예는 사용자의 마우스 위치를 기반으로 배경이 공개되는 분할 화면을 보여줍니다. ‘전’및’후’샷과 같은 비교에 적합합니다.

스크롤의 색상 변경

때때로 우리는 단순한 단색의 사용이 얼마나 강력 할 수 있는지 잊어 버립니다. 여기에서는 스크롤 위치에 따라 배경색이 변경 될 때 발생할 수있는 영향을 봅니다. 이 경량 솔루션은 무거운 이미지만큼 시각적으로 효과적 일 수 있습니다.최전선의

배경

배경은 더 이상 콘텐츠를 프레임하는 수단이 아닙니다. 이렇게 많은 흥미로운 방법을 활용하고,그것의 가치를 실험으로 다양한 배경 기술 및 참조할 수 있는 방법의 사용자 경험을 향상시키기 위 귀하의 다음 프로젝트입니다.