Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 26.09.2018, 22:27   #11
Jinna
Новичок
Джуниор
 
Регистрация: 24.09.2018
Сообщений: 6
По умолчанию

Цитата:
Сообщение от Ottava Посмотреть сообщение
Там в посте же есть ссылка на demo проверьте что в третьем примере "opacity transition between 2 images" на CSS всё меняется плавно.


О, а это уже новые требования, которые не были озвучены в стартпосте

То есть, вам надо, чтобы по событию onHover на пункте меню менялась картинка бэкграунда, а на всех остальных пунктах возвращалась изначальная картинка?
Да,
Jinna вне форума Ответить с цитированием
Старый 26.09.2018, 22:36   #12
Jinna
Новичок
Джуниор
 
Регистрация: 24.09.2018
Сообщений: 6
По умолчанию

Цитата:
Сообщение от Ottava Посмотреть сообщение
Jinna, у меня вот такой код работает с плавным переходом. В IE будут проблемы, но там и ваш исходный код отображается криво (проверял в IE 8)

CSS
Код:
.nav-container {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	margin: 0;
	padding: 0;
	position: fixed;
	top: 0;
	left: 0%;
	z-index: 9999;
}

.nav-menu {
	width: 50%;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	background: black;
	z-index: 1;
	flex-direction: column-reverse;
	align-items: center;
	justify-content: center;
	margin: 0 0 0 50%;
	padding: 0;
}

.nav-menu li {
	list-style: none;
}

.nav-menu a {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
        font-size: 16px;
        line-height: 46px;
        letter-spacing: 8px;
        text-decoration: none;
        text-transform: uppercase;
        color: white;
}

.nav-menu .nav-column .bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	pointer-events: none;
	z-index: -1;
	transform: scale(1.1);
	background-position: center center;
	background-size: cover;
	transition: opacity 2s;
	opacity: 0;
}


.nav-menu .nav-column.active .bg {
	transform: scale(1);
	transition: opacity 2s;
	opacity: 1;
}


.nav-menu .nav-column .bg.bg1 {
	background-image: url(http://bgfons.com/uploads/pattern/pattern_texture1157.jpg);
}

.nav-menu .nav-column .bg.bg2 {
	background-image: url(https://otvet.imgsmail.ru/download/4e0ce039dd5c81fb86558fdb3df75d9c_h-2.jpg);
}

.nav-menu .nav-column .bg.bg3 {
	background-image: url(https://www.10wallpaper.com/wallpaper/1680x1050/1207/blue_light_-Abstract_design_wallpaper_1680x1050.jpg);
}

.nav-menu .nav-column .bg.bg4 {
	background-image: url(http://eskipaper.com/images/red-and-green-abstract-1.jpg);
}

.nav-menu .nav-column .bg.bg5 {
	background-image: url(https://look.com.ua/pic/201210/1024x600/look.com.ua-51275.jpg);
}

.nav-menu .nav-column .bg.bg6 {
	background-image: url(http://oboi.tululu.org/o/2/68361/prew.jpg);
}
url картинок верните на свои, я тестировал на чужих картинках.
Картинка чуть дергается тк у вас стоит в одном месте transform: scale(1.1); а в другом transform: scale(1); - из за этого меняется масштаб бэкграунда в момент события onHover. Может, так и было задумано...
И время перехода - 2s, меняйте на нужное вам.


HTML, он остался ваш, только я убрал "active" из всех элементов, кроме главной страницы
Код:
<nav class="nav-container"> 
	<ul class="nav-menu">
		<li  class="nav-column"><a href="index.html">Контакты</a><div class="bg bg1"></div></li>
		<li  class="nav-column"><a href="about.html">Цены</a><div class="bg bg2"></div></li>
		<li  class="nav-column"><a href="portfolio.html">Стили</a><div class="bg bg3"></div></li>
		<li  class="nav-column"><a href="#">Услуги</a><div class="bg bg4"></div></li>
		<li  class="nav-column"><a href="price.html">Обо мне</a><div class="bg bg5"></div></li>
		<li  class="nav-column active"><a href="contact.html">Главная</a><div class="bg bg6"></div></li>
	</ul>
</nav>
Яваскрипт тоже остался ваш.


Спасибо Вам большое, Вы просто умничка, Целый день сегодня промучилась, чуть голову не сломала. Спасибо спасибо спасибо

Я добавила еще обычный транзишн, не знаю правильно ли это но все заработало прям так как я хотела

Код:
.nav-menu .nav-column .bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	pointer-events: none;
	z-index: -1;
	transform: scale(1.1);
	background-position: center center;
	background-size: cover;
	transition: opacity 1s;
	opacity: 0;
	transition: 1s;
}


.nav-menu .nav-column.active .bg {
	transform: scale(1);
	transition: opacity 1s;
	opacity: 1;
	transition: 1s;
}
Вы меня так выручили. спасибо Вам еще раз
Jinna вне форума Ответить с цитированием
Старый 27.09.2018, 00:19   #13
Ottava
Форумчанин
 
Регистрация: 05.09.2017
Сообщений: 157
По умолчанию

Цитата:
Сообщение от Jinna Посмотреть сообщение
Я добавила еще обычный транзишн, не знаю правильно ли это но все заработало прям так как я хотела
Рискуя показаться занудой, всё же замечу, сто синтаксис:
Код:
transition:   изменяемое_свойство   длительность_изменения   функция_изменения   задержка;
Поэтому запись:
Код:
transition: opacity 1s;
означает менять свойство opacity элемента в течении 1 сек.


Ваша запись:
Код:
transition: 1s;
означает менять ВСЕ свойства элемента в течении 1 сек (а не только прозрачность). Просто у вас стили CSS такие, что в них ничего не меняется кроме прозрачности(opacity).
Плюс, ваша строка transition: 1s; отменяет строку transition: opacity 1s; расположенную выше - браузер выполняет последнюю из одинаковых инструкций.


PS: Но главное - чтобы Вас всё устраивало. Проверьте в различных браузерах что всё работает.
Ида, на мобильных телефонах нет события наведении на объект (hover) - как там будет работать ваш сайт...
Безопасность с Content Security Policy

Последний раз редактировалось Ottava; 27.09.2018 в 00:40.
Ottava вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавный переход к метке jQuery 1.9.1 patch JavaScript, Ajax 3 06.06.2013 20:16
Плавный переход от формы-картинки к фону Crystallon Общие вопросы Delphi 1 01.08.2012 09:25
Как в делфи сделать переход по ссылке artbotva Общие вопросы Delphi 11 06.05.2012 21:13
JQuery - переход по URL после анимации D-Snaker JavaScript, Ajax 5 18.09.2011 21:29
Плавный переход между картинками ZvEr_HaCkEr Мультимедиа в Delphi 11 03.06.2011 02:39