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
- Просмотров: 2 887
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Комментарии
Подскажите, как и где получить API ключ, чтобы установить модуль?
Просьба! Когда выкладываете модули то, пишите хотя-бы короткую инструкцию, как это всё устанавливать. Не все же
KRIK73, А у меня вообще выдаёт вот такую ошибку: Fatal error: Uncaught Error: Class "HTMLPurifier_Config" not found
Здравствуйте ! на новом движке не работает 15.1 . белый экран
на 15.1 уже не работает
Нужен ли на сайте ViP раздел