테스트 사이트 - 개발 중인 베타 버전입니다

pc outlogin 아래에 비디오효과 적용하기

· 2년 전 · 1161 · 6

pc 버전 outlogin 아래에 비디오효과를 넣어보았습니다.

tail.php에 아래 코드를 넣어줍니다.

a 태그에서 링크주소를 원하는대로 넣으시면 됩니다.

배경사진은 크기를 outlogin의 크기에 맞게 235px로 만들었습니다.

mp4 영상은 에펙에서 motion trail효과로 만든 2초 분량의 영상입니다.

배경사진위에서 이 mp4 영상이 autoplay로 반복 재생이 되어 영상효과를 냅니다.

[code]

<div id="kim231" style="padding:2px;">
 <a href="https://sir.kr">
  <div style=width:231px;height:235px;background:url(http://test.com/images/moon.jpg)>
    <video style=width:231px;mix-blend-mode:screen src=http://test.com//video/effect/motion.mp4 autoplay loop muted></video>
  </div>

 </a>
</div>[/code] 

mix-blend-mode로 screen를 주는것이 배경사진과 mp4영상이 가장 잘 조화가 됩니다. screen대신에 다른 것을 적용하려면 아래를 참고하세요

https://www.w3schools.com/cssref/playdemo.php?filename=playcss_mix-blend-mode

아래팁을 참고했습니다

https://sir.kr/g5_tip/15911?sfl=wr_name%2C1&stx=%EB%B9%84%ED%83%80%EC%A3%BC%EB%A6%AC

감사합니다.

 

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 6개

2년 전
감사 합니다.
@들레아빠 따뜻한 관심에 항상 감사드립니다
2년 전
철용님도 2년전 제가 처음 뵈었을 때보다 훨씬 진화하셨습니다. 수고하셨어요.
@비타주리 덕분입니다. 있어 보이게 홈페이지를 만드는데는 이 효과가 최고인것 같습니다.
예전 플래시효과를 대체해도 되겠습니다.
에펙으로 영상을 만드는데 자바스크립트 표현식을 사용했습니다
자바스크립트가 안쓰이는 곳이 없네요^^
감사합니다.

감사합니다.

게시글 목록

번호 제목
17316
17315
17313
17312
17305
17304
17298
17294
17291
17285
17284
17279
17272
17271
17270
17262
17255
17248
17241
17238
17236
17220
17217
JavaScript 회원가입 2
17216
17214
17207
17205
17203
17201
17198