그누 홈페이지 에팩효과
애펙 전문 지인을 후들겨서 효과를 하나 만들어 보았습니다.
꼭 그누 뿐만이 아니라 모든 홈페이지에 사용할 수 있습니다.
링크 페이지를 보면 상단이 이미지이고 하단이 효과가 들어간 이미지입니다.
예제는 2개이고 반응형인데 폰트 사이즈는 알아서...
a태그에는 역시 알아서 링크를 넣어주세요
mp4 - https://blog.kakaocdn.net/dn/cpBAY5/btrFvVLsBIf/aG5rrBOJN1dhUYm28N9b4K/tfile.mp4
이미지는 무조건 16:9 비율로 맞추어야 합니다. 1280-720 으로 맞추었구요.
[code]
<style>
.effect-div { width:100%; background-size:cover; overflow:hidden; position:relative; }
.effect-div video { width:100%; mix-blend-mode:screen; }
.effect-div div { font-size:3rem; font-weight:bold; width:100%; height:100%; position:absolute; top:0px; left:0px; display:flex; justify-content:center; align-items:center; }
</style>
<div class=effect-div style="background-image:url('이미지경로')">
<video src="mp4경로" autoplay loop muted></video>
<div><a style=color:#ffffff>회사 소개</a></div>
</div>
<script>
onresize = function() {
for (effect_div of document.getElementsByClassName("effect-div")) effect_div.style.height = effect_div.offsetWidth * 9 / 16 + "px";
}
onresize();
</script>
[/code]
<div class=effect-div>...</div> 를 계속 사용하면 됩니다.
댓글 28개
그냥 다른 분 오픈 소스로 레벨이나 연명하려 합니다.ㅜㅠ
감사드려요.
감사합니다.
검은 배경이면 되니까 본인이 만들어 사용하세요.ㅜㅠ
그리고 이렇게 동영상을 이미지에 매칭시켜 사용하는 방법은 과문한지는 모르겠으나 제가 처음으로 사용한 것으로 알고 있습니다.
그러니 이런 효과용 mp4 를 일부러 만드시는 분은 없구요. 따로 필요한 효과를 의뢰해서 할 수 밖에는 없습니다. 전문 애펙 디자이너의 일당은 생각외로 고가입니다.^^
혹 필요하다면 https://sir.kr/g5_tip/18542 다운로드 받아 쓰세요.
근데 타이틀용 배너라고 하기에는 좀 그래요... 완전 디자인용으로 만든 것이라...
타이틀 배너가 아니라도 이미지에 포인트를 줄수 있어서 좋은 것 같습니다.
진짜 만든 수고와 나눔에 너무 감사합니다.
혹시 이미지 크기에 맞춰서 영상을 늘리면 깨지려나요...? 한번 해봐야겠습니다. 감사합니다
http://www.mediaplayer.kr/wittazzurri/effect_mp4.php
하단 css 부분을 참고해 보세요. 이미지사이즈와 비디오크기에 상관없이 원하는대로 리사이징 됩니다.