[해피CGI][cgimall] 마우스 오버 패럴랙스 슬라이더(React Slider w/ Hover Effect)

이 예제는 React로 제작된 이미지 슬라이더로, 마우스 움직임에 따라 패럴랙스 효과가 적용되어 생동감 있는 화면 전환을 제공합니다.
슬라이드는 버튼 클릭이나 이미지 선택으로 이동할 수 있으며, 중앙에 위치한 슬라이드가 강조되어 자연스러운 시각적 집중을 유도합니다.
마우스 오버 시 이미지와 텍스트가 미묘하게 이동하며, 사용자 입력에 반응하는 인터랙티브한 경험을 제공합니다.
CSS 트랜지션과 애니메이션을 활용하여 부드럽고 매끄러운 전환 효과를 구현했습니다.

HTML 구조

#app

CSS 소스

@import url('https://fonts.googleapis.com/css?family=Playfair+Display:700|IBM+Plex+Sans:500&display=swap');

 

:root {

  --color-primary: #6B7A8F;

  --color-secondary: #101118;

  --color-accent: #1D1F2F;

  --color-focus: #6D64F7;

  --base-duration: 600ms;

  --base-ease: cubic-bezier(0.25, 0.46, 0.45, 0.84);

}

 

// =========================

// Global

// =========================

 

*, *:before, *:after {

  box-sizing: border-box;

}

 

html, body {

  height: 100%;

}

 

body {

  font-family: 'IBM Plex Sans', sans-serif;

  background-color: var(--color-secondary);

}

 

#app {

  align-items: center;

  display: flex;

  height: 100%;

  justify-content: center;

  overflow-x: hidden;

  width: 100%;

}

 

h1, h2, h3 {

  font-family: 'Playfair Display', serif;

}

 

.visuallyhidden { 

  clip: rect(1px, 1px, 1px, 1px);  

  height: 1px; 

  overflow: hidden;

  position: absolute !important;

  white-space: nowrap;

  width: 1px;

}

 

 

// =========================

// Icons

// =========================

 

.icon {

  fill: var(--color-primary);

  width: 100%;

}

 

 

// =========================

// Buttons

// =========================

 

.btn {

  background-color: var(--color-primary);

  border: none;

  border-radius: 0.125rem;

  color: white;

  cursor: pointer;

  font-family: inherit;

  font-size: inherit;

  padding: 1rem 2.5rem 1.125rem;

  

  &:focus {

    outline-color: var(--color-focus);

    outline-offset: 2px;

    outline-style: solid;

    outline-width: 3px;

  }

  

  &:active {

    transform: translateY(1px);

  }

}

 

 

// =========================

// Slider controls

// =========================

 

.slider__controls {

  display: flex;

  justify-content: center;

  position: absolute;

  top: calc(100% + 1rem);

  width: 100%;

  

  .btn {

    --size: 3rem;

    

    align-items: center;

    background-color: transparent;

    border: 3px solid transparent;

    border-radius: 100%;

    display: flex;

    height: var(--size);

    padding: 0;

    width: var(--size);

    

    &:focus {

      border-color: var(--color-focus);

      outline: none;

    }

        

    &--previous > * {

      transform: rotate(180deg);

    }

  }

}

 

 

// =========================

// Slider

// =========================

 

.slider {

  --slide-size: 70vmin;

  --slide-margin: 4vmin;

  

  height: var(--slide-size);

  margin: 0 auto;

  position: relative;

  width: var(--slide-size);

}

 

.slider__wrapper {

  display: flex;

  margin: 0 calc(var(--slide-margin) * -1);

  position: absolute;

  transition: transform var(--base-duration) cubic-bezier(0.25, 1, 0.35, 1);

}

 

 

// =========================

// Slide

// =========================

 

.slide {

  align-items: center;

  color: white;

  display: flex;

  flex: 1;

  flex-direction: column;

  height: var(--slide-size);

  justify-content: center;

  margin: 0 var(--slide-margin);

  opacity: 0.25;

  position: relative;

  text-align: center;

  transition: 

    opacity calc(var(--base-duration) / 2) var(--base-ease),

    transform calc(var(--base-duration) / 2) var(--base-ease);

  width: var(--slide-size);

  z-index: 1;

  

  &--previous,

  &--next {    

    &:hover {

      opacity: 0.5;

    }

  }

  

  &--previous {

    cursor: w-resize;

    

    &:hover {

      transform: translateX(2%);

    }

  }

  

  &--next {

    cursor: e-resize;

    

    &:hover {

      transform: translateX(-2%);

    }

  }

}

 

.slide--current {

  --x: 0;

  --y: 0;

  --d: 50;

 

  opacity: 1;

  pointer-events: auto;

  user-select: auto;

  

  @media (hover: hover) {

    &:hover .slide__image-wrapper {

      transform: 

        scale(1.025)

        translate(

          calc(var(--x) / var(--d) * 1px),

          calc(var(--y) / var(--d) * 1px)

        );

    }    

  }

}

 

.slide__image-wrapper {

  background-color: var(--color-accent);

  border-radius: 1%;

  height: 100%;

  left: 0%;

  overflow: hidden;

  position: absolute;

  top: 0%;  

  transition: transform calc(var(--base-duration) / 4) var(--base-ease);

  width: 100%;

}

 

.slide__image {

  --d: 20;

  

  height: 110%;

  left: -5%;

  object-fit: cover;

  opacity: 0;

  pointer-events: none;

  position: absolute;

  top: -5%;

  transition:

    opacity var(--base-duration) var(--base-ease),

    transform var(--base-duration) var(--base-ease);

  user-select: none;

  width: 110%;

  

  @media (hover: hover) {

    .slide--current & {      

      transform: 

        translate(

          calc(var(--x) / var(--d) * 1px),

          calc(var(--y) / var(--d) * 1px)

        ); 

    }

  }

}

 

.slide__headline {

  font-size: 8vmin;

  font-weight: 600;

  position: relative;

}

 

.slide__content {

  --d: 60;

  

  opacity: 0;

  padding: 4vmin;

  position: relative;

  transition: transform var(--base-duration) var(--base-ease);

  visibility: hidden;

  

  .slide--current & {

    animation: fade-in calc(var(--base-duration) / 2) var(--base-ease) forwards;

    visibility: visible;

    

    @media (hover: hover) {

      transform: 

        translate(

          calc(var(--x) / var(--d) * -1px),

          calc(var(--y) / var(--d) * -1px)

        );

    }

  }

  

  > * + * {

    margin-top: 2rem;

  }

}

 

 

// =========================

// Animations

// =========================

 

@keyframes fade-in {

  from { opacity: 0 }

  to   { opacity: 1 }

}

JS 소스

const slideData = [

  {

    index: 0,

    headline: 'New Fashion Apparel',

    button: 'Shop now',

    src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/225363/fashion.jpg'

  },

  {

    index: 1,

    headline: 'In The Wilderness',

    button: 'Book travel',

    src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/225363/forest.jpg'

  },

  {

    index: 2,

    headline: 'For Your Current Mood',

    button: 'Listen',

    src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/225363/guitar.jpg'

  },

  {

    index: 3,

    headline: 'Focus On The Writing',

    button: 'Get Focused',

    src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/225363/typewriter.jpg'

  }

]

...  이하생략 ...

첨부파일 react-slider-w-hover-effect.zip에서  script.js 참조해주세요