function slideSecond() {
$('body').slideUp(2000, function() {
$(this).css("display", "block");
});
}
slideSecond();
body {
margin: 0;
padding: 0;
border: 5px dotted black;
}
nav {
min-width: 1000px;
position: fixed;
left: 20%;
border: 1px dotted black;
background-color: gray;
z-index: 999;
font-size: 20px;
font-weight: bold;
text-decoration: underline;
}
nav ul {
display: flex;
justify-content: space-between;
list-style-type: none;
padding-left: 0;
}
nav ul li {
padding: 10px;
}
#content {
text-align: center;
width: 20%;
margin: 0 auto;
height: 1500px;
}
#content img {
margin-top: 100px;
}
#content p {
text-align: justify;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="nav1">
<ul>
<li>Главная</li>
<li>Товары</li>
<li>Контакты</li>
</ul>
</nav>
<div id="content">
<img src="https://cdn2.iconfinder.com/data/icons/crystalproject/crystal_project_256x256/apps/background.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus nibh eu semper luctus. Aliquam eget tellus at velit pellentesque placerat. Ut ut massa metus. Curabitur id augue at augue sagittis sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse id posuere massa, a condimentum sapien. Phasellus mollis faucibus tortor, eget ultricies eros cursus id. Suspendisse lacus diam, ultrices id est sed, sagittis condimentum libero.
Donec quis accumsan lorem. In vehicula, massa eu dapibus scelerisque, lacus ligula ullamcorper lorem, interdum hendrerit nibh tellus in nunc. Aenean quis ligula mollis, volutpat ipsum in, lacinia dolor. Sed feugiat lacus at odio fermentum dapibus. Maecenas et tempor ligula, in tincidunt diam. Donec iaculis tortor mollis rhoncus placerat. Morbi at varius nulla. Ut aliquet neque nec ipsum fermentum sagittis. Duis ultrices, arcu eget pulvinar condimentum, sapien elit pharetra libero, vel elementum felis nunc in metus. Vestibulum gravida sit amet ligula et ornare.
Mauris at velit commodo, interdum sapien quis, porttitor nunc. Sed ac volutpat mi, in vulputate quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer varius quam quis elit ornare molestie. Proin mollis lectus in molestie consequat. Vivamus mattis gravida hendrerit. Fusce commodo ac nibh in sagittis. Nam dapibus magna a sapien feugiat, blandit ultrices arcu lacinia. Quisque luctus hendrerit convallis. In porta, dolor ut venenatis sodales, enim nisl lacinia nunc, sit amet ornare nibh mi vitae nulla. Nullam turpis elit, pharetra ut lectus id, scelerisque finibus diam. Nullam scelerisque urna turpis. Aenean maximus pulvinar nulla, quis mollis felis dignissim et.
Fusce non elementum nibh, quis vehicula dui. Praesent finibus a arcu in consectetur. Praesent vel viverra massa, at hendrerit lectus. Nullam placerat, leo sed rutrum luctus, libero ligula ultricies dolor, in aliquet tortor velit sed turpis. Maecenas quis mauris quis ligula eleifend maximus. Ut egestas in turpis a venenatis. Pellentesque in laoreet sem. Proin sit amet purus sit amet ipsum hendrerit molestie. Maecenas pharetra cursus velit, sit amet pellentesque nunc lobortis ut.
Suspendisse purus nulla, pharetra eget nisi vitae, maximus vulputate quam. In dapibus pharetra tortor, ac elementum diam rutrum quis. Donec blandit, ante in mollis pulvinar, est ligula placerat nibh, ac pellentesque nisi risus et felis. Curabitur vitae finibus quam. In faucibus venenatis ipsum id fermentum. Suspendisse tempus mauris id pharetra laoreet. Donec mi orci, finibus in nisl malesuada, euismod vehicula massa. Aenean nec imperdiet mauris, nec venenatis tortor. Aliquam vitae leo placerat massa suscipit blandit eget ac metus. Proin vulputate lacus ante, in ullamcorper urna tempus sit amet. Integer lobortis interdum metus non porta. In vitae tortor massa. Morbi bibendum mattis mauris id tristique. Aenean mi arcu, vestibulum vel bibendum non, molestie non urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sem ante, rhoncus sit amet arcu sed, pellentesque aliquam sem.</p>
</div>
Должно быть: через 2 секунды после загрузки страницы всё содержимое страницы выезжает плавно снизу, но почему-то не получается...
'https://codepen.io/alexseveneight/pen/LjLYZO'
Можно попробовать сделать анимацию самому. Да, код чуть больше становится, за то ее можно кастомизировать как угодно!
function slideSecond() {
$('body').css({
'position' : 'absolute',
'opacity' : '0',
'top' : '200px',
'left' : '0'
});
setTimeout(()=>{
$('body').animate({
'top' : '0',
'opacity' : '1'
}, 300, function(){
$(this).css({
'position' : 'static'
});
});
}, 2000);
}
slideSecond();
body {
margin: 0;
padding: 0;
border: 5px dotted black;
}
nav {
min-width: 1000px;
position: fixed;
left: 20%;
border: 1px dotted black;
background-color: gray;
z-index: 999;
font-size: 20px;
font-weight: bold;
text-decoration: underline;
}
nav ul {
display: flex;
justify-content: space-between;
list-style-type: none;
padding-left: 0;
}
nav ul li {
padding: 10px;
}
#content {
text-align: center;
width: 20%;
margin: 0 auto;
height: 1500px;
}
#content img {
margin-top: 100px;
}
#content p {
text-align: justify;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="nav1">
<ul>
<li>Главная</li>
<li>Товары</li>
<li>Контакты</li>
</ul>
</nav>
<div id="content">
<img src="https://cdn2.iconfinder.com/data/icons/crystalproject/crystal_project_256x256/apps/background.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus nibh eu semper luctus. Aliquam eget tellus at velit pellentesque placerat. Ut ut massa metus. Curabitur id augue at augue sagittis sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse id posuere massa, a condimentum sapien. Phasellus mollis faucibus tortor, eget ultricies eros cursus id. Suspendisse lacus diam, ultrices id est sed, sagittis condimentum libero.
Donec quis accumsan lorem. In vehicula, massa eu dapibus scelerisque, lacus ligula ullamcorper lorem, interdum hendrerit nibh tellus in nunc. Aenean quis ligula mollis, volutpat ipsum in, lacinia dolor. Sed feugiat lacus at odio fermentum dapibus. Maecenas et tempor ligula, in tincidunt diam. Donec iaculis tortor mollis rhoncus placerat. Morbi at varius nulla. Ut aliquet neque nec ipsum fermentum sagittis. Duis ultrices, arcu eget pulvinar condimentum, sapien elit pharetra libero, vel elementum felis nunc in metus. Vestibulum gravida sit amet ligula et ornare.
Mauris at velit commodo, interdum sapien quis, porttitor nunc. Sed ac volutpat mi, in vulputate quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer varius quam quis elit ornare molestie. Proin mollis lectus in molestie consequat. Vivamus mattis gravida hendrerit. Fusce commodo ac nibh in sagittis. Nam dapibus magna a sapien feugiat, blandit ultrices arcu lacinia. Quisque luctus hendrerit convallis. In porta, dolor ut venenatis sodales, enim nisl lacinia nunc, sit amet ornare nibh mi vitae nulla. Nullam turpis elit, pharetra ut lectus id, scelerisque finibus diam. Nullam scelerisque urna turpis. Aenean maximus pulvinar nulla, quis mollis felis dignissim et.
Fusce non elementum nibh, quis vehicula dui. Praesent finibus a arcu in consectetur. Praesent vel viverra massa, at hendrerit lectus. Nullam placerat, leo sed rutrum luctus, libero ligula ultricies dolor, in aliquet tortor velit sed turpis. Maecenas quis mauris quis ligula eleifend maximus. Ut egestas in turpis a venenatis. Pellentesque in laoreet sem. Proin sit amet purus sit amet ipsum hendrerit molestie. Maecenas pharetra cursus velit, sit amet pellentesque nunc lobortis ut.
Suspendisse purus nulla, pharetra eget nisi vitae, maximus vulputate quam. In dapibus pharetra tortor, ac elementum diam rutrum quis. Donec blandit, ante in mollis pulvinar, est ligula placerat nibh, ac pellentesque nisi risus et felis. Curabitur vitae finibus quam. In faucibus venenatis ipsum id fermentum. Suspendisse tempus mauris id pharetra laoreet. Donec mi orci, finibus in nisl malesuada, euismod vehicula massa. Aenean nec imperdiet mauris, nec venenatis tortor. Aliquam vitae leo placerat massa suscipit blandit eget ac metus. Proin vulputate lacus ante, in ullamcorper urna tempus sit amet. Integer lobortis interdum metus non porta. In vitae tortor massa. Morbi bibendum mattis mauris id tristique. Aenean mi arcu, vestibulum vel bibendum non, molestie non urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sem ante, rhoncus sit amet arcu sed, pellentesque aliquam sem.</p>
</div>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
вообщем есть картинка, <img src=/path/тутцифраgif class=smileicon>, нужно чтобы при попадании текста из блока, в textarea, чтобы картинки такого типа, заменялись...
Есть 3 дропдауна, сделанные на bootstrap(код одного из них):
Необходимо вместить название в одну строкуВ разметке есть блок див фиксированного размера