이미지 + 블렌드모드 파티클 합성

이건 swf 를 만들 때 제가 주구장창 사용하던 것인데 견문이 약해서인지 html-css 로 표현된 것이 없어서 회원님들과 공유합니다.

먼저 애프터이펙트에서 파티클 효과를 만들거나 또는 유튜브 등에서 뚱쳐 옵니다.

https://www.youtube.com/watch?v=VTH1zCgC1kI

뚱친 동영상을 본인의 계정으로 업로드합니다. 동영상 길이가 너무 길면 동영상 편집 프로그램 등으로 30초 미만으로 잘라 주세요.

동영상주소 - https://blog.kakaocdn.net/dn/dhjKtp/btq42zLeYT5/0XKVXTxU11rUukpUBgi4x1/tfile.mp4

이미지를 만들 때는 동영상 가로 세로 비율과 똑같이 만들어 주세요. 유튜브의 경우 16:9 비율을 가지니 이미지도 이와 같이 만듭니다. 아니면 이미지 사이즈에 맞게 파티클 mp4 를 동영상 편집 프로그램으로 조절해도 됩니다.

이 비율이 맞지 않으면 그걸 맞출려고 또 css 등에서 "용"을 써야 합니다.

이미지주소 - https://blog.kakaocdn.net/dn/cMFzJT/btq42AwCSOl/XHBN93pdduqeyiLoMCTgv1/img.jpg

스타일은 다이렉트로 주었으니 따로 빼내서 사용하실 분은 그렇게 하세요.

이 마법을 부리는 것은 mix-blend-mode:screen 이란 놈입니다. 포토샵에서 screen 효과와 같습니다.

동영상의 배경 검은색을 투명처리 해 줍니다.

<div style=width:이미지가로px;height:이미지세로px;background:url(이미지주소)>
    <video style=width:100%;mix-blend-mode:screen src=동영상주소 autoplay loop muted></video>
</div>

[code]

<div style=width:720px;height:405px;background:url(https://blog.kakaocdn.net/dn/cMFzJT/btq42AwCSOl/XHBN93pdduqeyiLoMCTgv1/img.jpg)>
    <video style=width:100%;mix-blend-mode:screen src=https://blog.kakaocdn.net/dn/dhjKtp/btq42zLeYT5/0XKVXTxU11rUukpUBgi4x1/tfile.mp4 autoplay loop muted></video>
</div>

[/code]

위 소스를 https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default 에서 확인해 보세요.

결과물 - http://www.mediaplayer.kr/main/tip/14