Parallax перемещение логотипа / Эффекты / Сниппеты Bootstrap

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Эффекты

Bootstrap: 3

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Русский

Уникальный ID: 84

Количество символов:

Посмотрели: 3780 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 4 голосов

Тип лицензии: CC BY 4.0

Авторство: bootstraptema.ru

Информация: Пользователям

Информация: Правообладателям

Теги: бутстрап, параллакс, скроллинг, Bootstrap, Parallax, Snippet, scroll

Поделился: aTmpl

Добавлено: 2015-11-27 в 10:49

Метка: 1582178543

⇄ ⇅

<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>
 
 </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>
 
 </div>
 
 </div>
 
</div>

<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>
 
 </div>
 
</div>

<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);

$('.small-logo-container ').css({
 "padding-top": smallPadding
 });

BootstrapTema

Parallax перемещение логотипа

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0