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>
Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию.
Это займёт не более минуты. Не волнуйтесь, мы не спамим!
У данной публикации нет комментариев.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Облако тегов
Bootstrap bootstrap css CSS CSS3 dle DLE fruit farm html html шаблон html5 HTML5 Payeer PNG PSD wap Wordpress Скрипт удвоителя адаптивный адаптивный шаблон бонусник дизайн игровой хостинг иконки лендинг модуль панель портфолио сайт скрипт скрипт фермы текстура удвоитель удвоитель Payeer ферма фон фруктовая ферма хак шаблон экономическая игра
Пользуетесь ли Вы облаком тегов