끈적 끈적한 포지셔닝 및 대시 Sass가있는 쌓인 카드

최근 Corey Ginnivan 웹 사이트에서 매혹적인 디자인 요소를 발견했습니다. 스크롤 할 때 동적으로 재배치하는 카드 스택.

처음에는 이것이 광범위한 JavaScript가 필요하다고 생각했습니다. 그러나 나는 우아한 솔루션이 position: sticky 와 Sass의 터치. Corey의 접근 방식을 복제하는 대신 내 버전을 만들기로 결정했습니다.

먼저 기본 카드 스타일을 정의해 봅시다.

 몸 {
  배경 : 선형 등급 ( #e8e8e8, #e0e0e0);
}

.wrapper {
  여백 : 0 Auto;
  최대 width : 700px;
}

.card {
  배경색 : #fff;
  국경 : 1px Solid #CCC;
  Border-Radius : 10px;
  Box-Shadow : 5px 5px 5px rgba (0, 0, 0, 0.1);
  색상 : #333;
  패딩 : 40px;
}

끈적 끈적한 효과를 얻으려면 position: sticky 와 상단 오프셋을 설정합니다.

 .card {
  위치 : 스티커;
  상단 : 10px;
  / * 기타 카드 스타일 */
}

이것은 초기 끈적 끈적한 동작을 만듭니다. 스택 효과를 시뮬레이션하기 위해 Sass의 @for 루프를 활용합니다.

 @for $ i for 1 ~ 8 {
  .card : nth-Child (#{$ i} n) {
    상단 : $ i * 20px;
  }
}

이 루프는 각 카드의 top 속성을 조정하여 스태킹 환상을 만듭니다.

이 접근법은 시각적으로 매력적인 결과를 초래합니다. 추가 개선에는 강화 된 미학을 위해 박스 섀도우 및 카드 색상 조정이 포함될 수 있습니다.

그러나 대체 레이아웃을 탐색하고 싶었습니다. 이 웹 사이트의 다른 디자인에서 영감을 얻은 저는 Flexbox를 사용한 수평 배열을 실험했습니다.

 .wrapper {
  디스플레이 : Flex;
  오버 플로우 -X : 스크롤;
}

.card {
  높이 : 60VH;
  최소값 : 50VW;
  위치 : 스티커;
  상단 : 5VH;
  왼쪽 : 10VW;
}

동적 무작위 요소를 추가하기 위해 Sass의 random() 함수를 루프에 통합했습니다.

 @for $ i for 1 ~ 8 {
  .card : nth-Child (#{$ i} n) {
    왼쪽 : $ i * 20px random (200) * 1px;
    상단 : $ i * 1px random (130) * 1px;
    변환 : 회전 (random (3) -2 * 1deg);
  }
}

이 수정은 각 카드에 임의의 오프셋과 회전을 도입하여보다 장난스럽고 역동적 인 프리젠 테이션을 초래합니다.

position: sticky 명확하게 입증됩니다.

위 내용은 끈적 끈적한 포지셔닝 및 대시 Sass가있는 쌓인 카드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!