<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
const http = require('http');
const fs = require('fs');
http.createServer(function(req, res) {
res.writeHead(200, {'Content-Type': 'video/mp4'});
var rs = fs.createReadStream('video.mp4');
rs.pipe(res);
}).listen(8080);
<div id="bg" class="" style="width: 100%; height: 7926.44px;">
<canvas id="mainBgC" width="1120" height="806" style="width: 1120px; height: 806px;"></canvas>
<canvas id="shinesBgC" width="1120" height="806" style="width: 1120px; height: 806px;"></canvas>
<canvas id="animationC" width="1120" height="806" style="width: 1120px; height: 806px;"></canvas>
</div>
const loader = PIXI.loader;
loader
.add('first', '1.jpg')
.add('second', '2.jpg');
loader.load((loader, resources) => {
let scene = new PIXI.Container();
let bg = new PIXI.Sprite(resources.first.texture);
bg.anchor.x = 0.5;
bg.anchor.y = 0.5;
bg.position.x = renderer.width / 2;
bg.position.y = renderer.height / 2;
scene.addChild(bg);
renderer.render(scene);
}
@font-face {
font-family: 'fira_sans';
src: url('firasansbold.eot');
src: url('firasansbold.eot?#iefix') format('embedded-opentype'),
url('firasansbold.woff2') format('woff2'),
url('firasansbold.woff') format('woff'),
url('firasansbold.ttf') format('truetype'),
url('firasansbold.svg#fira_sansbold') format('svg');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'fira_sans';
src: url('firasansregular.eot');
src: url('firasansregular.eot?#iefix') format('embedded-opentype'),
url('firasansregular.woff2') format('woff2'),
url('firasansregular.woff') format('woff'),
url('firasansregular.ttf') format('truetype'),
url('firasansregular.svg#fira_sansregular') format('svg');
font-weight: 400;
font-style: normal;
}
*{
font-family: "fira_sans";
}
.bold{
font-weight: 700
}
.normal{
font-weight: 400
}
const popup = document.querySelectorAll('.popup');
let counter = 0;
setInterval(function() {
popup[counter].classList.remove('show');
counter++;
counter === popup.length ? counter = 0 : console.log('¯\\_(ツ)_/¯')
popup[counter].classList.add('show');
}, 1000)
демонстрация мокапов, очень много изображений которые очень высокого разрешения для ретины
$( "#el" ).on( "swipeleft", fn );
$( "#el" ).on( "swiperight", fn );
$( "#cart" ).on( "mouseenter mouseleave", function( event ) {
$( this ).toggleClass( "active" );
});
<svg class="icon icon-vk">
<use xlink:href="img/sprite.svg#icon-vk"></use>
</svg>
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-vk" viewBox="0 0 24 24">
<path class="st0" d="M13.162 18.994c.609 0 .858-.406.851-.915-.031-1.917.714-2.949 2.059-1.604 1.488 1.488 1.796 2.519 3.603 2.519h3.2c.808 0 1.126-.26 1.126-.668 0-.863-1.421-2.386-2.625-3.504-1.686-1.565-1.765-1.602-.313-3.486C22.864 8.997 25.22 6 23.136 6h-3.981c-.772 0-.828.435-1.103 1.083-.995 2.347-2.886 5.387-3.604 4.922-.751-.485-.407-2.406-.35-5.261.015-.754.011-1.271-1.141-1.539A8.07 8.07 0 0 0 11.148 5c-2.273 0-3.841.953-2.95 1.119 1.571.293 1.42 3.692 1.054 5.16-.638 2.556-3.036-2.024-4.035-4.305C4.976 6.426 4.902 6 4.042 6H.787C.295 6 0 6.16 0 6.516c0 .602 2.96 6.72 5.786 9.77 2.756 2.975 5.48 2.708 7.376 2.708z"/>
</symbol></svg>
<svg>
<symbol id="icon-vk"></symbol>
<symbol id="icon-instagram"></symbol>
...
</svg>
. Использовать точно также. Только id поменяйте.