• Гость
For-Web
  • Главная
  • Вебмастеру
    • Блог
    • SQL
    • PHP
    • JavaScript
    • CSS
    • HTML
    • Литература
  • Скрипты, Soft, APP
    • Bitcoin
    • Соц сети
    • Реклама, Буксы
    • Интернет магагзин
    • Браузерные игры
    • Скрипты хостинга
    • Мобильные приложения
    • Программы
  • Data Life Eingine
    • Модули
    • Хаки
    • DLE шаблоны
  • Bootstrap
    • Шаблоны
    • Плагины
    • Сниппеты
    • Пособие Bootstrap
  • Дизайн и Графика
    • PSD макеты
    • Mocups Free
    • Иконки, Кнопки
    • Шрифты,Текст
    • Текстуры, Фон
    • Анимация
    • Формы
    • Палитра
    • Галерея
    • Раскладка
    • Модальное окно
    • Элементы загрузки
    • Меню и навигация
    • Таблицы
    • Украшения для сайта
    • Фотошоп
  • Шаблоны сайтов
    • WAP шаблоны
    • HTML 5 шаблоны
    • Админка
    • Автомобили
    • Аниме
    • Блоги
    • Бизнес и Финансы
    • Игровые
    • Женские
    • Заглушки
    • Кинопорталы
    • Кулинарные
    • Лендинг
    • Мобильные
    • Музыкальные
    • Новостные
    • ПО, IT
    • Портфолио
    • Природа
    • Строительство
    • Спорт
    • Хостинг
    • Адалт
    • Страницы 404
  • Инфо
    • О проекте
    • Обратная связь
    • Уроки
    • Статистика
    • Privacy Policy
главная » Анимация » Parallax эффект перемещение логотипа на Bootstrap

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>

Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию. Это займёт не более минуты. Не волнуйтесь, мы не спамим!

Parallax эффект перемещение логотипа на Bootstrap

Вы находитесь на странице скачивания файла. Все скрипты храняться на яндекс диске. Кнопки скачивания файла  находятся внизу страницы. Если нет кнопки  , то значит нет файла. Нет файла - просьба сообщить администратору  любым удобным способом. Спасибо большое за понимание!

Реклама - на страницах сайта, а также на странице загрузки файлов - это вынужденная мера для поддержания проекта на плаву. Я не принуждаю Вас кликать по рекламе, если конечно она вас не заинтересовала.

Да и самое важное, все материалы носят ознакомительный характер, все файлы взяты из открытых источников, соответственно Вы их используете на свой страх и риск. За риски связанные с утечкой данных, хищение средств и прочее при использовании скриптов администрация сайта ответственность не несёт!



  • Комментарии
  • О статье
  • Похожие новости
У данной публикации нет комментариев.

admin

Автор

15-10-2020, 21:36

Дата

Анимация / Bootstrap сниппеты

Категория
  • Комментариев: 0
  • Просмотров: 3 318
Блог
Справка по HTML атрибутам
Блог
Элементы HTML по категориям
HTML
HTML элементы в алфавитном порядке
Учебник Bootstrap
Руководство Bootstrap NavBar
Блог
DataLife Engine v.15.0 Press Release
HTML
HTML тег ссылки
Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Чат
  • nika
    4 фев 2023, 18:26
    hvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
    • 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
                                      Всем привет!) Что то так тихо в чате)
                                      Чтобы оставлять сообщения - зарегистрируйтесь
                                      x
                                      Закрыть Сохранить настройки Сохранить изменения Разбанить Удалить все
                                        Вставить Отмена
                                        Комментарии
                                        Дмитрий Николаев, Уже нет , этот я продал , не хотел , но устал . Так как админ хороший (она) не стала удалять права на
                                        28 декабря 2022 20:07

                                        nika

                                        Дмитрий Николаев, Не за что , с наступающим Вас
                                        28 декабря 2022 20:01

                                        nika

                                        как установить и зайти в админку. Нет файла install.php
                                        26 декабря 2022 23:09

                                        povar

                                        nika, У вас два сайта?
                                        24 декабря 2022 15:24

                                        Дмитрий Николаев

                                        nika,Спасибо! Вроде работает. 
                                        24 декабря 2022 12:31

                                        Дмитрий Николаев

                                        Пользуетесь ли Вы облаком тегов

                                        • For-WEb.Ru 2018 - 2022  

                                        Авторизация


                                        Регистрация Забыл пароль