Часто бывает так, что приходиться использовать одни и те же скрипты, для одних и тех же проблем для своих сайтов. Для этого я приготовил 5 топовых скриптов, которые можно использовать почти каждый раз
Топовые сниппеты для ваших сайтов
See the Pen Top snippets by Aleksandrs (@CoolS2) on CodePen.0
Все 5 сниппетов я добавил в codepen, чтобы вы могли наглядно посмотреть их работу, а теперь разберем их по порядку
1. Прелоадер для сайта
HTML
Самый топовый сниппет, который я всегда использую для своих сайтов!
Сразу после тега body, вставляем наш блок с анимацией, который будет отображаться перед тем как сайт будет загружен
<div class="preloader">
<div class="spinner-inside"><img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" alt="loading"></div>
</div>
CSS
Сделаем его фиксированным, чтобы при скролле был наш блок с анимацией и 100% на всю ширину и высоту с белым фоном
.preloader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 999999;
background-color: #ffffff;
background-position: center center;
background-repeat: no-repeat;
}
.spinner-inside{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 50px;
margin: auto;
min-height: 1px;
max-height: 50px;
}
JQuery
Когда загрузиться наш js файл, мы запускаем функцию handlePreloader() в которой мы проверяем, есть ли такой блок с классом .preloader и если есть, убираем его через 200 мс с эффектом fadeOut
$(document).ready(function(){
function handlePreloader() {
//When site is ready
if($('.preloader').length){
$('.preloader').delay(200).fadeOut(500);
}
window.onload = handlePreloader();
});
2. Кнопка для прокрутки страницы вверх
Кнопка, которая и правда часто используется на многих сайтов
HTML
Добавим ссылку с классом топ
<a class="top" href="javascript:">Back to top</a>
JQuery
По нажатию на нашу ссылку с классом топ, анимируем скролл со скоростью slow
$('.top').on('click', function(){
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
3. Сделать все ссылки с параметром Target=»_BLANK»
Ведь удобно когда ссылки открываются в новых вкладках? Конечно лучше подумать об этом заранее и каждый ссылке сразу прописывать target, но что если забыл, а сейчас ссылок миллион?
JQuery
$('a').click(function(){
this.target = "_blank";
});
4. Сделать все колонки одной высоты
Если вы работаете с bootstrap, то наверно часто сталкивались с тем, что колонки из-за разной длины текста становились не красивыми. Ладно если вы сами пишите текста для сайта, а что если пишут другие люди? Вы же не будете говорить им сколько должно быть символов, иначе верстка развалится) Вот решение:
JQuery
В каждом блоке с классом .row, мы ищем наиболее высокий блок, записываем это в переменную и всем колонком, которые в этом блоке, задаем эту высоту.
$('.row').each(function(){
var max_height = 0;
$("div[class^='col-']", this).each(function(){
if ($(this).height() > max_height) { max_height = $(this).height(); }
});
$("div[class^='col-']", this).height(max_height);
})
5. Легкая анимация на картинки
Совсем не обязательный сниппет, но в своем роде красит сайт.
JQuery
Задаем всем картинкам в блоке .content прозрачность 0.8 и анимацию при наводке мышкой ( если навел, не прозрачная, а если убрал курсор, то снова прозрачность на 0.8
$(".content img").fadeTo("fast", 0.8);
$(".content img").hover(function(){
$(this).fadeTo("fast", 1);
},function(){
$(this).fadeTo("fast", 0.8);
});
Если остались вопросы, задавайте в комментариях, так же можете посмотреть Как сделать атоскролл к элементу