그누 홈페이지 에팩효과 정보
그누 홈페이지 에팩효과
관련링크
본문
애펙 전문 지인을 후들겨서 효과를 하나 만들어 보았습니다.
꼭 그누 뿐만이 아니라 모든 홈페이지에 사용할 수 있습니다.
링크 페이지를 보면 상단이 이미지이고 하단이 효과가 들어간 이미지입니다.
예제는 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> 를 계속 사용하면 됩니다.
추천
17
17
댓글 28개
와우 좋습니다.
@마당쇠151 제가 만든 것도 아닌데요. 여튼 감사합니다.
무한 감사합니다. ^^
@아이스웨덴™ 유용하게 사용하세요.
혹시나 역시나 비타주리님~~~따봉!!!~
감사합니다
@나리스 나리스님 팁이나 댓글 등에서 보여주는 관심사에서 저도 많이 배웁니다.
감사합니다.
감사합니다.
사이즈 비율이 나와있네요. 좋은 정보 감사합니다.
@하늘뚱 저걸 온리사이즈 이벤트로 정의해 주는 건 모바일 가로모드 세로모드 전환시 반응형으로 만들려고 한 거에요. 감사합니다.
대~~박. 감사 합니다.
@들레아빠 예 이건 리자님 레이다망에서 안전할 것 같아요.ㅋ
그냥 복붙만 했을 뿐인데 완전 느낌이 있네요 ^^
@sosososo 앞으로 지인을 더 괴롭혀서 이런 효과파일을 많이 만들어야겠어요.
좋은 소스 더 멋지게 꾸며 주셔서 감사 드립니다. ^^
@호텔천사 예 감사드려요
감사합니다.
@써맨 감사합니다
대단하시군요 css 가 자꾸 어려워지니 마음이 급조해지는것같아요
@GST1 천천히 하세요.
효과 동영상을 더 구할수 있나요? 혹시 어디서 구해야 하나요? 배경이 검으면 되나요?
@faithmission
검은 배경이면 되니까 본인이 만들어 사용하세요.ㅜㅠ
그리고 이렇게 동영상을 이미지에 매칭시켜 사용하는 방법은 과문한지는 모르겠으나 제가 처음으로 사용한 것으로 알고 있습니다.
그러니 이런 효과용 mp4 를 일부러 만드시는 분은 없구요. 따로 필요한 효과를 의뢰해서 할 수 밖에는 없습니다. 전문 애펙 디자이너의 일당은 생각외로 고가입니다.^^
검은 배경이면 되니까 본인이 만들어 사용하세요.ㅜㅠ
그리고 이렇게 동영상을 이미지에 매칭시켜 사용하는 방법은 과문한지는 모르겠으나 제가 처음으로 사용한 것으로 알고 있습니다.
그러니 이런 효과용 mp4 를 일부러 만드시는 분은 없구요. 따로 필요한 효과를 의뢰해서 할 수 밖에는 없습니다. 전문 애펙 디자이너의 일당은 생각외로 고가입니다.^^
@faithmission
혹 필요하다면 https://sir.kr/g5_tip/18542 다운로드 받아 쓰세요.
근데 타이틀용 배너라고 하기에는 좀 그래요... 완전 디자인용으로 만든 것이라...
혹 필요하다면 https://sir.kr/g5_tip/18542 다운로드 받아 쓰세요.
근데 타이틀용 배너라고 하기에는 좀 그래요... 완전 디자인용으로 만든 것이라...
와 진짜 너무 멋있습니다. 너무 감사합니다.
타이틀 배너가 아니라도 이미지에 포인트를 줄수 있어서 좋은 것 같습니다.
진짜 만든 수고와 나눔에 너무 감사합니다.
타이틀 배너가 아니라도 이미지에 포인트를 줄수 있어서 좋은 것 같습니다.
진짜 만든 수고와 나눔에 너무 감사합니다.
@faithmission 감사합니다
상상만하던 기능을 만들어주셨네요! 감사합니다!
혹시 이미지 크기에 맞춰서 영상을 늘리면 깨지려나요...? 한번 해봐야겠습니다. 감사합니다
혹시 이미지 크기에 맞춰서 영상을 늘리면 깨지려나요...? 한번 해봐야겠습니다. 감사합니다
@Winter0
http://www.mediaplayer.kr/wittazzurri/effect_mp4.php
하단 css 부분을 참고해 보세요. 이미지사이즈와 비디오크기에 상관없이 원하는대로 리사이징 됩니다.
http://www.mediaplayer.kr/wittazzurri/effect_mp4.php
하단 css 부분을 참고해 보세요. 이미지사이즈와 비디오크기에 상관없이 원하는대로 리사이징 됩니다.
재밌네요 잘 읽었습니다
