Валера Удав

Есть отличный слайдер Swiper, в нем как раз есть вариант с полосой прокрутки.

На один объект отводится один запрос на сервер, т.е. сколько бы раз не повторялось изображение на сайте, оно будет инициализироваться только одним запросом. По этой причине хорошо использовать спрайтовые изображения для ускорения загрузки сайта.

P.S. хотя сейчас с приходом HTTP/2 ситуация немного поменялась

Скрыть блоки так чтобы они не загружались не получится. Хорошим тоном адаптивной верстки считается переверстывание одного блока под разные медиа запросы разрешений экрана. Как правило полностью скрывать блоки в адаптиве почти не приходится, если дизайн адекватно нарисован, или же это какието незначительные блоки вроде телефонов в шапке, которые не дают никакой нагрузки, даже если их скрыть.

Если говорить конкретно про скрытие, то медиа запросы и display: none; о чем выше уже писали.

Вот простой пример

Следуйте логике загрузки страницы. Подключая стили в конец страницы в результате на выходе вы получите то что пользователь сначала увидит ваш html скелет без стилей и лишь через какоето время появятся саши стили.

Если стили обращены к элементам которые изначально не видимы (допустим модальные окна которые вызываются при клике), то такие стили вполне себе можно подключить и в конец файла. Но все таки лучше так не делать или делать только в крайних случаях когда CSS реально сильно замедляет загрузку и при этом является стилем элемента который виден не сразу.

Как правильно было сказано причина именно в семантичности кода. По факту грубо говоря всю страницу можно сверстать хоть на span если дать им параметр display: block; однако такая верстка не будет удовлетворять семантичности. Поисковики читают сайт по тегам, и если все div блоки для него абсолютно одинаковые то теги header, footer, nav, aside и т.д. дают сразу понять что это за часть страницы (вложенность тегов тоже имеет значение, тот же header можно использовать не только для шапки всего сайта). Более того гугл дает меньший приоритет сайтам сверстаный не семантичным html5, так что это еще и СЕО

На jQuery будет выглядеть примерно так

$(document).on("click",function(){
    $("#fullpage").css("opacity","1");
});

JSFiddle

.box {
    position: relative;
    left: 0;
    transition: left 0.3s ease;
}
.box:hover {
    left: 5px;
}

Пример