<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.15/i18n/Russian.json"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
});
</script>
</head><tr id="anchor">...</tr><nav>
...
<a href="#el_721">el_721</a>
<a href="#el_722">el_722</a>
<a href="#el_723">el_723</a>
...
</nav>
<table>
<tbody>
...
<tr id="el_721">
<td>el_721</td>
<td>el_721</td>
</tr>
<tr id="el_722">
<td>el_722</td>
<td>el_722</td>
</tr>
<tr id="el_723">
<td>el_723</td>
<td>el_723</td>
</tr>
...
</tbody>
</table><a href="input.html?val=1">1</a>
<a href="input.html?val=2">2</a>
<a href="input.html?val=3">3</a>
<a href="input.html?val=4">4</a><input type="text">
<script>
function parseUrlParams() {
let res = {};
window.location.search.replace(/^\?/, '').split('&').forEach((param) => {
param = param.split('=');
res[param[0]] = decodeURIComponent(param[1]);
});
return res;
}
document.querySelector('input').value = parseUrlParams().val;
</script>background: url('image.png') no-repeat 50% 50px/500px auto;background-image: url('image.png');
background-repeat: no-repeat;
background-position: 50% 50px;
background-size: 500px auto;<div class="wrap">
<div class="block visible">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
</div>.block {
display: none;
}
.block.visible {
display: block;
}function toggler(selector, delay) {
let elems = $(selector),
length = elems.length-1,
i = 0;
function toggleTo(index) {
elems.removeClass('visible');
$(elems[index]).addClass('visible');
}
setInterval(function(){
toggleTo(i === length ? i = 0 : ++i)
}, delay);
}
toggler('.block', 1000);.content {
justify-content: center;
}.circ {
margin-left: auto;
margin-right: auto;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.0.3/mediaelementplayer.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<video width="640" height="360">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
</video>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.0.3/mediaelementplayer.min.js"></script>
<script>
$('video').mediaelementplayer();
</script>
</body>
</html>#header { background: url(img/furniture.jpg); }
или
body { background: url(img/furniture.jpg); }#wrapper { overflow: hidden }, а во время открытия меню - убирайте.data-aos-*, которые анимируются при скроле, в дефолтном состоянии находятся за вьюпортом, в результате чего появляется горизонтальная прокрутка.
<img src="https://unsplash.it/700/300" alt="" />img {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
max-width: 100vw;
max-height: 100vh;
}