유체가 퍼지는 효과 : css Mask 전환효과
모 애니메이션 홈페이지에 들어가면 잠시의 로딩후 마치 번지는 먹효과 처럼 이미지가 전개되는걸 보고
쪼랩인 나는 우와아아아!!! 하면서 눈이 초롱초롱 했었더랬다.
처음에는 검정이 나와서 블루가되고 블루배경이 이미지 배경으로 되는 2중효과인데.
랜덤효과라고 하기에는 일정한 모양과 패턴으로 지나가서 svg나 이런걸 썼나 싶었다.
영상이라고 하기에는 태그나 끊김 로딩시간이 적었기때문에 생각하지않기로 했다.
결론적으로 말하면 css animation으로도 가능한 범위라는 것이다.
약간의 트리거를 위해 javascript(Jquery)도 이용된다.
각각의 배경을 담당하는 레이어, 아래의 -점이 퍼저나가는 듯한- 이미지를 중첩하여서 더 밑쪽의 레이어에 있는 이미지를 보이게 하는 방식이다.
아래처럼 퍼지는 효과의 이미지가 필요하고. 이걸 적용하면, 위쪽 처럼 전환되는 효과를 볼수있다.
css수정으로 효과의 이미지, 중첩양과 속도에 따라서 퍼져나가는 모양을 다르게 줄수도 있다.
-참고 기술
*demo1 캐러셀 변경효과(총 2가지가 있으며 위의 효과는 2번째)
https://tympanus.net/Tutorials/CSSMaskTransition/index.html
*다른 형태의 유체(잉크번짐)효과
https://codyhouse.co/demo/ink-transition-effect/index.html
Ink Transition Effect | CodyHouse
My Modal Content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad modi repellendus, optio eveniet eligendi molestiae? Fugiat, temporibus! A rerum pariatur neque laborum earum, illum voluptatibus eum voluptatem fugiat, porro animi tempora? Sit h
codyhouse.co
코드는 아래와 같다
처음에 블랙배경먼저만들고 나서 블루를 만들고 해서.
HTML 구조가 엉망이긴한데 뜯어보고 분석하시다 보면 커스텀은 꽤 쉬운편이며,
퍼지는 간격 시작점 속도등은
css mask, animation: mask-play 만 잘조절하면된다.
Jquery 와 배경이미지(blue_bg.jpg), (위에 올려놓은)잉크가 퍼지는 연속이미지(ink_sprite.png)가 필요하다.
|
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
<style>
#mid {display:block; width:100%; height:100vh; position:relative;}
#full{background-color:#000; height:100%; display:block; z-index:4; position:absolute; left:0; right:0; top:0; bottom:0; z-index:2;}
#full.active{
-webkit-mask: url('./ink_sprite.png');
mask: url('./ink_sprite.png');
-webkit-mask-size: 2300% 100%;
mask-size: 2300% 100%;
-webkit-animation: mask-play 0.7s steps(22) forwards;
animation: mask-play 0.7s steps(22) forwards;
}
#blue_bg{ background-image: url("./blue_bg.jpg"); height:100%; display:block; position:absolute; left:0; right:0; top:0; bottom:0; z-index:2;}
#blue_bg.active{
-webkit-mask: url('./ink_sprite.png');
mask: url('./ink_sprite.png');
-webkit-mask-size: 2300% 100%;
mask-size: 2300% 100%;
-webkit-animation: mask-play 0.7s steps(22) forwards;
animation: mask-play 0.7s steps(22) forwards;
}
@-webkit-keyframes mask-play {
from {
-webkit-mask-position: 0% 0;
mask-position: 0% 0;
}
to {
-webkit-mask-position: 100% 0;
mask-position: 100% 0;
}
}
@keyframes mask-play {
from {
-webkit-mask-position: 0% 0;
mask-position: 0% 0;
}
to {
-webkit-mask-position: 100% 0;
mask-position: 100% 0;
}
}
#mid > div:nth-child(1){z-index:2;}
#mid > div:nth-child(2){z-index:1;}
#contents {z-index:0; background:red;}
</style>
<div id='mid'>
<!-- 효과구역 { -->
<div>
<div id="blue_bg" class='blue_bg'></div>
</div>
<div>
<div id="full"></div>
</div>
<!-- 효과구역 } -->
<div id='content'>
{content 내용을 입력해 주세요.}
</div>
</div>
<script>
$(window).load(function(){
$('#full').addClass("active");
/*Animation 효과 종료시*/
$("#full.active").on('webkitAnimationEnd AnimationEnd',function(){
$("#full").css('opacity', '0');
$('#blue_bg').addClass("active");
$("#blue_bg.active").on('webkitAnimationEnd AnimationEnd',function(){
$("#blue_bg").remove();
});
});
});
</script>
|
cs |
포타에 거의 동일한 글을 작성했으며 한번 보셨다.. 싶으시면 저 맞습니다.