• Гость
 
For-Web
  • Главная
  • Вебмастеру new
    • Блог
    • SQL
    • PHP
    • JavaScript
    • CSS
    • HTML
    • Литература
    • VIP - Бесплатно
  • Скрипты сайтов
    • Bitcoin
    • Fruit Farm
    • Бонусники, Удвоители
    • Движки сайтов
    • Соц сети
    • Обмен визитами
    • Скрипты буксов
    • Скрипты рекламы
    • Интернет магагзин
    • Браузерные игры
    • Хайпы, Пирамиды
    • Скрипты CSGO
    • Скрипты хостинга
  • Data Life Eingine
    • Модули
    • Хаки
    • DLE шаблоны
  • Bootstrap
    • Шаблоны
    • Плагины
    • Сниппеты
    • Пособие Bootstrap
  • WordPress
    • Шаблоны
  • Дизайн и Графика
    • PSD макеты
    • Mocups Free
    • Иконки, Кнопки
    • Шрифты,Текст
    • Текстуры, Фон
    • Анимация
    • Формы
    • Палитра
    • Галерея
    • Раскладка
    • Модальное окно
    • Элементы загрузки
    • Меню и навигация
    • Таблицы
    • Украшения для сайта
    • Фотошоп
  • Шаблоны сайтов
    • WAP шаблоны
    • HTML 5 шаблоны
    • Админка
    • Автомобили
    • Аниме
    • Блоги
    • Бизнес и Финансы
    • Игровые
    • Женские
    • Заглушки
    • Кинопорталы
    • Кулинарные
    • Лендинг
    • Мобильные
    • Музыкальные
    • Новостные
    • ПО, IT
    • Портфолио
    • Природа
    • Строительство
    • Спорт
    • Хостинг
    • Адалт
    • Страницы 404
  • Windows
    • Windows
    • Программы
    • Темы
  • Инфо
    • О проекте
    • Обратная связь
    • Пользователи
    • Статистика
    • Объявления на сайте
    • Партнёрство
    • 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>

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


Скачать файл бесплатно

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

Реклама - это вынужденная мера для поддержания проекта на плаву. Я не принуждаю Вас кликать по рекламным блокам. Если конечно она вас не заинтересовала.

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







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

admin

Автор

15-10-2020, 21:36

Дата

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

Категория
  • Комментариев: 0
  • Просмотров: 2 887
Учебник Bootstrap
Руководство Bootstrap NavBar
DLE хаки
Красивые кнопки аттачмент для DLE
Bootstrap сниппеты
Адаптивный Canvas Bootstrap сниппет
Меню, навигация
Раскрывающееся вертикальное accordion меню
CSS
Цвета в CSS
Учебник Bootstrap
Руководство Bootstrap Card
Информация

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

Полезные советы
Для доступа к мобильной версии сайта DLE с ПК достаточно перейти по адресу /index.php?action=mobile

Комментарии
Подскажите, как и где получить API ключ, чтобы установить модуль?
15 мая 2022 14:16

Solyaris2000

Просьба! Когда выкладываете модули то, пишите хотя-бы короткую инструкцию, как это всё устанавливать. Не все же
15 мая 2022 13:09

Solyaris2000

KRIK73, А у меня вообще выдаёт вот такую ошибку: Fatal error: Uncaught Error: Class "HTMLPurifier_Config" not found
13 мая 2022 22:32

vir2oz

Здравствуйте ! на новом движке не работает 15.1  . белый экран
30 апреля 2022 17:02

KRIK73

на 15.1 уже не работает
22 апреля 2022 10:11

blink


Нужен ли на сайте ViP раздел


  • For-WEb.Ru © 2018 - 2022  

Авторизация


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