디자인키트 인스타그램 디자인키트 핀터레스트 디자인키트 비핸스 디자인키트

이미지에 물결 효과 주기(Ripple effect)

CSS 24.03.27

jQuery Ripple은 jQuery 플러그인 중 하나로, 웹 페이지에 리플(파동) 효과를 추가하는 데 사용됩니다.

이 효과는 클릭 또는 터치 이벤트가 발생할 때 해당 요소 주위에 원 모양의 애니메이션을 생성하여 사용자에게 시각적 피드백을 제공합니다. 

이는 사용자 경험을 향상시키고 인터랙티브한 요소에 동적인 느낌을 부여하는 데 유용합니다.


주로 버튼, 링크 또는 어떤 요소에도 적용할 수 있으며, 주로 UI/UX 디자인에 사용됩니다.

 jQuery Ripple 플러그인은 HTML 요소에 간단하게 적용할 수 있으며, 사용자가 해당 요소를 클릭하거나 터치할 때 파동 효과가 활성화됩니다.


일반적으로 사용법은 다음과 같습니다


1. jQuery와 jQuery Ripple 플러그인을 HTML 페이지에 포함합니다.

2. jQuery Ripple 플러그인을 사용하여 특정 요소에 파동 효과를 적용합니다.

3. 사용자가 해당 요소를 클릭하거나 터치할 때 파동 효과가 발생합니다.



다음은 jQuery Ripples 플러그인을 사용한 간단한 예시입니다. 

이 예시는 HTML 파일에 jQuery와 jQuery Ripples 라이브러리를 포함하고, 특정 이미지에 리플 효과를 적용하는 방법을 보여줍니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Ripples Example</title>
<!-- jQuery 및 jQuery Ripples 라이브러리 추가 -->
<style>
  /* 이미지를 화면에 꽉 채우는 스타일 */
  body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  /* 이미지 컨테이너의 스타일 */
  #image-container {
    width: 100%;
    height: 100%;
    background: url('your-image.jpg') center center no-repeat;
    background-size: cover;
  }
</style>
</head>
<body>
 
<!-- 이미지가 들어갈 컨테이너 -->
<div id="image-container"></div>
 
<script>
// 문서가 준비되면 실행
$(document).ready(function(){
    // 이미지 컨테이너에 리플 효과 적용
    $('#image-container').ripples({
        // 리플의 반복 효과 여부
        dropRadius: 100, // 리플 반지름 크기
        perturbance: 0.04 // 물결의 왜곡 정도
    });
});
</script>
 
</body>
</html>
 
cs


위의 예시 코드에서 your-image.jpg 부분을 원하는 이미지 파일의 경로로 변경하면 해당 이미지에 리플 효과가 적용됩니다. 

이 코드를 사용하면 이미지가 전체 화면에 꽉 차게 표시되며, 사용자는 이미지 위를 클릭하거나 마우스를 올리면 리플 효과를 볼 수 있습니다.


[예제]

See the Pen RIPPLES PLUGIN by designkits (@designkits) on CodePen.

목록으로

관련 템플릿

최근 포스트

© 디자인키트