Parallax эффект перемещение логотипа на Bootstrap
При скроллинге страницы логотип, изначально находящийся в контейнере перемещается в меню находящееся в топе сайта, это простой параллакс эффект для Bootstrap.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified jаvascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type='text/jаvascript' src='https://code.jquery.com/jquery-1.10.1.js'></script>
<style>
.navbar-inverse {
background: rgba(62, 195, 246, 0);
border-bottom: none;
}
.navbar-inverse .navbar-toggle {
border: 1px solid #333;
border-color: rgba(255, 255, 255, 0.7);
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
border-color: transparent;
}
@media (max-width: 767px) {
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
background: rgba(255, 255, 255, 0.75);
}
}
.navbar-inverse .navbar-nav > li > a {
color: black;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
color: #22F;
}
.small-logo-container {
padding-top: 50px;
height: 50px;
overflow: hidden;
}
.small-logo {
color: white;
font-size: 2.5em;
padding-bottom: 2px;
}
.big-logo-row {
background: gold;
}
.big-logo-row .big-logo-container {
padding-top: 50px;
}
.big-logo-row h1 {
font-size: 4em;
margin: 0;
padding: 0 0 15px 0;
}
@media (min-width: 400px) {
.big-logo-row h1 {
font-size: 4.5em;
}
}
@media (min-width: 440px) {
.big-logo-row h1 {
font-size: 5.5em;
}
}
@media (min-width: 500px) {
.big-logo-row h1 {
font-size: 6.5em;
}
}
@media (min-width: 630px) {
.big-logo-row h1 {
font-size: 7.5em;
}
}
@media (min-width: 768px) {
.big-logo-row h1 {
font-size: 9em;
padding-bottom: 30px;
}
}
@media (min-width: 1200px) {
.big-logo-row h1 {
font-size: 12em;
}
}
</style>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="small-logo-container">
<a class="small-logo" href="#">↥Логотип</a>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="/">Главная</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div class="container-fluid big-logo-row">
<div class="container">
<div class="row">
<div class="col-xs-12 big-logo-container">
<h1 class="big-logo">↧ Логотип</h1>
</div>
<!--/.col-xs-12 -->
</div>
<!--/.row -->
</div>
<!--/.container -->
</div>
<!--/.container-fluid -->
<div class="container">
<div class="row">
<div class="col-lg-5 col-md-6 col-sm-8">
<h2>Текст для примера</h2>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
<p>Здесь много много текста для демонстрации примера</p>
</div>
<!--/.col-xs-12 -->
</div>
<!--/.row -->
</div>
<!--/.container -->
<script>
$(window).scroll(function() {
var navbarColor = "62,195,246"; //color attr for rgba
var smallLogoHeight = $('.small-logo').height();
var bigLogoHeight = $('.big-logo').height();
var navbarHeight = $('.navbar').height();
var smallLogoEndPos = 0;
var smallSpeed = (smallLogoHeight / bigLogoHeight);
var ySmall = ($(window).scrollTop() * smallSpeed);
var smallPadding = navbarHeight - ySmall;
if (smallPadding > navbarHeight) {
smallPadding = navbarHeight;
}
if (smallPadding < smallLogoEndPos) {
smallPadding = smallLogoEndPos;
}
if (smallPadding < 0) {
smallPadding = 0;
}
$('.small-logo-container ').css({
"padding-top": smallPadding
});
var navOpacity = ySmall / smallLogoHeight;
if (navOpacity > 1) {
navOpacity = 1;
}
if (navOpacity < 0) {
navOpacity = 0;
}
var navBackColor = 'rgba(' + navbarColor + ',' + navOpacity + ')';
$('.navbar').css({
"background-color": navBackColor
});
var shadowOpacity = navOpacity * 0.4;
if (ySmall > 1) {
$('.navbar').css({
"box-shadow": "0 2px 3px rgba(0,0,0," + shadowOpacity + ")"
});
} else {
$('.navbar').css({
"box-shadow": "none"
});
}
});
</script>
Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию.
Это займёт не более минуты. Не волнуйтесь, мы не спамим!
У данной публикации нет комментариев.
admin
Автор15-10-2020, 21:36
ДатаАнимация / Bootstrap сниппеты
Категория- Комментариев: 0
- Просмотров: 3 318
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Чат
-
nika
4 фев 2023, 18:26hvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv -
revapro100
6 ноя 2022, 08:55скинул в лс п -
nika
4 ноя 2022, 17:44Всем здрасьте)) -
admin
4 ноя 2022, 11:06Сайт приобретён новым владельцем для развития и расширения другими скриптами и модулями) -
admin
4 ноя 2022, 11:05@revapro100, Давайте -
revapro100
3 ноя 2022, 17:47Привет! Могу закинуть парочку хороших программ вам -
wapstyle
30 окт 2022, 09:01для связи admin@wapstyle.ru -
wapstyle
30 окт 2022, 09:01Приму в дар или размещу у себя, если у тебя проблемы с оплатой хостинга -
blablacar
28 окт 2022, 20:39Админ, спасибо тебе за старания! -
blablacar
28 окт 2022, 20:38жаль, крутой сайт -
admin
7 сен 2022, 17:55чат в комплекте , чат платный с ключём -
admin
4 сен 2022, 13:09Всем привет ! Продам этот сайт. Нет времени заниматься по вопросам можно тут или в л.с -
Nissan Flow
27 авг 2022, 08:55А как установить приложение Web2App v3.5 - многофункциональное приложения Webview для Android чет не пойму через что открывать подскажите -
revapro100
20 авг 2022, 07:32только прочитал, извиняюсь. Лето - осень в деревне куча суеты. ох! уж эти хостеры! -
admin
21 июл 2022, 20:55@Rocky, -
Rocky
21 июл 2022, 11:30Всем привет -
admin
20 июл 2022, 20:52@revapro100, тихо тихо)) Чуть акк не забанили хостеры)) -
revapro100
20 июл 2022, 20:14Всем привет!) Что то так тихо в чате)
Чтобы оставлять сообщения - зарегистрируйтесь
Комментарии
Пользуетесь ли Вы облаком тегов