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

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

· 2년 전 · 1155 · 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년전 제가 처음 뵈었을 때보다 훨씬 진화하셨습니다. 수고하셨어요.
@비타주리 덕분입니다. 있어 보이게 홈페이지를 만드는데는 이 효과가 최고인것 같습니다.
예전 플래시효과를 대체해도 되겠습니다.
에펙으로 영상을 만드는데 자바스크립트 표현식을 사용했습니다
자바스크립트가 안쓰이는 곳이 없네요^^
감사합니다.

감사합니다.

게시글 목록

번호 제목
17657
17655
17654
17653
17652
17651
17650
17642
17633
17632
17631
17630
17628
17624
17623
17620
17618
17617
17614
17612
17611
17610
17609
17608
17607
17604
17603
17602
17600
17594