이미지 + 블렌드모드 파티클 합성 > 그누보드5 팁자료실

그누보드5 팁자료실

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

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

본문

이건 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>

 


<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>

 

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

 

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

추천
6

댓글 8개

이런 효과가 에펙에서만 되는 줄 알았는데, 웹에서도 되네요.
피부미용실 메인 페이지로 사용하면 적당하겠어요.
생각지도 못했는데, 감사합니다.
전체 2,095 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT