Топ 5 сниппетов для JQuery

Часто бывает так, что приходиться использовать одни и те же скрипты, для одних и тех же проблем для своих сайтов. Для этого я приготовил 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); 
    });

Если остались вопросы, задавайте в комментариях, так же можете посмотреть Как сделать атоскролл к элементу