그누 홈페이지 에팩효과 > 그누보드5 팁자료실

그누보드5 팁자료실

그누 홈페이지 에팩효과 정보

그누 홈페이지 에팩효과

본문

애펙 전문 지인을 후들겨서 효과를 하나 만들어 보았습니다.

꼭 그누 뿐만이 아니라 모든 홈페이지에 사용할 수 있습니다.

링크 페이지를 보면 상단이 이미지이고 하단이 효과가 들어간 이미지입니다.

예제는 2개이고 반응형인데 폰트 사이즈는 알아서...

a태그에는 역시 알아서 링크를 넣어주세요

 

mp4 - https://blog.kakaocdn.net/dn/cpBAY5/btrFvVLsBIf/aG5rrBOJN1dhUYm28N9b4K/tfile.mp4

 

이미지는 무조건 16:9 비율로 맞추어야 합니다. 1280-720 으로 맞추었구요.

 


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

 

<div class=effect-div>...</div> 를 계속 사용하면 됩니다.

추천
15

댓글 23개

스킨 만들긴 귀찮고 질답게시판도 열어보기 싫고...
그냥 다른 분 오픈 소스로 레벨이나 연명하려 합니다.ㅜㅠ
감사드려요.
저걸 온리사이즈 이벤트로 정의해 주는 건 모바일 가로모드 세로모드 전환시 반응형으로 만들려고 한 거에요. 감사합니다.

검은 배경이면 되니까 본인이 만들어 사용하세요.ㅜㅠ
그리고 이렇게 동영상을 이미지에 매칭시켜 사용하는 방법은 과문한지는 모르겠으나 제가 처음으로 사용한 것으로 알고 있습니다.
그러니 이런 효과용 mp4 를 일부러 만드시는 분은 없구요. 따로 필요한 효과를 의뢰해서 할 수 밖에는 없습니다. 전문 애펙 디자이너의 일당은 생각외로 고가입니다.^^

혹 필요하다면 https://sir.kr/g5_tip/18542 다운로드 받아 쓰세요.
근데 타이틀용 배너라고 하기에는 좀 그래요... 완전 디자인용으로 만든 것이라...
전체 2,133 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

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