Canvas至網站中

課程中,以【templatemo】範本為例:

一、將Canvas置於網頁內,並進行CSS調整

HTML5 Canvas連結參考:連結

/*templatemo-style.css修改,將背景移除*/
.tm-intro {
/*	background: url(../img/home-bg.jpg) no-repeat;
	background-attachment: fixed;
	background-position: left top;
	background-size: 100% 750px;
*/
.tm-intro{position: relative;}
#canvas{width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
#tm-section-1{position: absolute; z-index: 99; /*將logo等置於canvas上方*/}

二、影片的置入

HTML5 Video連結參考:連結1連結2

【fontawesome】連結

<div class="tm-news-item">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-news-item-img-container card">
        <img src="media/card.jpg" alt="Image" class="img-fluid tm-news-item-img">  
    </div>
    <div class="cardClick isHide">
        <video width="80%" poster="media/card.jpg" preload="auto" controls muted autoplay loop >
                <source src="media/card.mp4">
        </video>
        <i class="cardClick-close fa fa-times"></i>
    </div>
</div>

參考連結:transform: translate3d(-50%, -50%, 0);

.card{width: 50%; height: auto;}
.cardClick{ position: absolute; left: 0; top: 0 ;right: 0;bottom: 0;
          background:rgba(89, 127, 136, 0.63); z-index: 1001;}
.cardClick video { position: absolute; top: 50%; left: 50%;
                   transform: translate3d(-50%, -50%, 0);}
.cardClick .cardClick-close { position: absolute; top: 16px; right: 16px;
                        color: #fff; font-size: 16px;}
.isHide { display: none;}
$('.card img').click(function(){
    $('html,body').animate({scrollTop:0},1000);
	$('.cardClick').removeClass('isHide');
});
$('.cardClick-close').click(function(){
		$('.cardClick').addClass('isHide');
});