examp1
@examp1

Js код работает на половину на адаптиве из-за чего такое может быть?

Есть сайт на адаптиве есть табы сделаные спомощью свайпа
их код идентичен меняется только цифра с 2 на 3 в итоге таб с солнышком работает коректно а таб с луной работает только на половину (не меняеться картинка и не идет анимация)
код таба с луной
$('section[name=sleep]').swipe( {
		swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
			if (direction=='up') scrollto($('body').scrollTop()+distance);
			if (direction=='down') scrollto($('body').scrollTop()-distance);
			if (direction=='up' || direction=='down') return true;
			let cont = $('#p2-phrases');
			let cur = cont.find('.phase.active');
			let C = $('#p2-circle');
			let upImage = $('#p2').prev('.upImage');
			console.log(upImage);
			if (direction=='right') {
				let n = (cur.attr('rel')*1)-1;
				let N = cont.find('.phase[rel="'+(n)+'"]');
				if (N.exists() && cur.attr('rel')!='1') {
					cur.removeClass('active');
					N.addClass('active');
					C[0].className = 'phase'+n;
					upImage.children('.active').removeClass('active');
					upImage.children('[rel='+(n)+']').addClass('active');
				} else {
					// scroll to prev
					// C[0].className = '';
				}
			}
			if (direction=='left') {
				let n = (cur.attr('rel')*1)+1;
				let N = cont.find('.phase[rel="'+(n)+'"]');
				if (N.exists() && n<4) {
					cur.removeClass('active');
					N.addClass('active');
					C[0].className = 'phase'+n;
					upImage.children('.active').removeClass('active');
					upImage.children('[rel='+(n)+']').addClass('active');
				} else {
					// scroll to next
					// C[0].className = '';
				}
			}
		}
	});

html таба с луной
<section class="screen bluegrad active" name="sleep">
	<div class="upImage">
					<div class="upImagePhase active" rel="1" style="background-image:url('/upload/images/ce08a674c0e4489.jpg')">&nbsp;</div>
					<div class="upImagePhase" rel="2" style="background-image:url('/upload/images/c0467769796f28e.jpg')">&nbsp;</div>
					<div class="upImagePhase " rel="3" style="background-image:url('/upload/images/b39c5778b6f45fa.jpg')">&nbsp;</div>
			</div>
	<div id="p2" class="container">
		<div id="p2-phrases">
							<div class="phase active" rel="1">
					<div>Я хочу закрыть глаза</div>
<div>и раствориться во сне</div>
<span>Гонка мыслей в голове не прекращается <br>с окончанием дня. Нервы напряжены, <br>эмоции на пределе, каждый шорох <br>мешает расслабиться и заснуть</span>				</div>
							<div class="phase" rel="2">
					<div>Я хочу спокойного</div>
<div>сна без тревоги</div><span>Эмоциональное перенапряжение <br>не дает расслабиться и насладиться <br>сном. Список задач на сегодня, завтра, <br>всю неделю тревожит и вырывает <br>из сна</span>				</div>
							<div class="phase " rel="3">
					<div>Я хочу спать сегодня</div>
<div>и быть бодрым завтра</div>
<span>Хочу чтобы каждая минута сна <br>восстанавливала мой организм <br>и приносила максимум пользы, <br>для того чтобы в каждом мгновении <br>жизни быть бодрым и собранным</span>				</div>
					</div>
		<div id="p2-circle" class="phase1">
			<div>
				<svg id="p2-circle-dots">
					<circle cx="50%" cy="50%" r="50%"></circle>
				</svg>
				<div id="p2-circle-progress">&nbsp;</div>
				<div class="p2-circle-bulls pos1"><div>&nbsp;</div></div>
				<div class="p2-circle-bulls pos2"><div>&nbsp;</div></div>
				<div class="p2-circle-bulls pos3"><div>&nbsp;</div></div>
				<div id="p2-circle-swipe"><div></div></div>
				<div id="p2-circle-marker">
					<div>
						<div>
							<div class="p2-circle-marker-star"></div>
							<div class="p2-circle-marker-star"></div>
							<div class="p2-circle-marker-star"></div>
							<div id="p2-circle-marker-moon"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

код таба с солнцем
$('section[name=standup]').swipe( {
		swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
			// console.log(direction);
			if (direction=='up') scrollto($('body').scrollTop()+distance);
			if (direction=='down') scrollto($('body').scrollTop()-distance);
			if (direction=='up' || direction=='down') return true;
			let cont = $('#p3-phrases');
			let cur = cont.find('.phase.active');
			let C = $('#p3-circle');
			let upImage = $('#p3').prev('.upImage')
			console.log(upImage);
			if (direction=='left') {
				let n = (cur.attr('rel')*1)-1;
				let N = cont.find('.phase[rel="'+(n)+'"]');
				if (N.exists() && cur.attr('rel')!='1') {
					cur.removeClass('active');
					N.addClass('active');
					C[0].className = 'phase'+n;
					upImage.children('.active').removeClass('active');
					upImage.children('[rel='+(n)+']').addClass('active');
				} else {
					// scroll to prev
					// C[0].className = '';
				}
			}
			if (direction=='right') {
				let n = (cur.attr('rel')*1)+1;
				let N = cont.find('.phase[rel="'+(n)+'"]');
				if (N.exists() && n<4) {
					cur.removeClass('active');
					N.addClass('active');
					C[0].className = 'phase'+n;
					upImage.children('.active').removeClass('active');
					upImage.children('[rel='+(n)+']').addClass('active');
				} else {
					// scroll to next
					// C[0].className = '';
				}
			}
		}
	});

html код таба с солнцем
<section class="screen silvergrad active" name="standup">
	<div class="upImage">
					<div class="upImagePhase active" rel="1" style="background-image:url('/upload/images/82ac38f8f828849.jpg')">&nbsp;</div>
					<div class="upImagePhase " rel="2" style="background-image:url('/upload/images/1905bad22f9aa1f.jpg')">&nbsp;</div>
					<div class="upImagePhase " rel="3" style="background-image:url('/upload/images/efc2238c229d58e.jpg')">&nbsp;</div>
			</div>
	<div id="p3" class="container">
		<div id="p3-phrases">
							<div class="phase active" rel="1">
					<div>Я хочу радоваться</div>
<div>утру</div><span>Просыпаться без раздражения и чувства <br>подавленности, отдохнувшим и готовым <br>к новому дню</span>				</div>
							<div class="phase " rel="2">
					<div>Я не хочу переводить</div>
<div>будильник</div>
<span>Просыпаться без раздражения <br>и бесконечного перевода будильника, <br>собранным и отдохнувшим</span>				</div>
							<div class="phase " rel="3">
					<div>Я хочу быть</div><div>бодрым с утра</div><span>Проснуться в гармонии с собой, <br>отдохнувшим, без раздражения <br>и потери времени приступить <br>к задачам нового дня.</span>				</div>
					</div>
		<div id="p3-circle" class="phase1">
			<div>
				<svg id="p3-circle-dots">
					<circle cx="50%" cy="50%" r="50%"></circle>
				</svg>
				<div id="p3-circle-progress">&nbsp;</div>
				<div class="p3-circle-bulls pos1"><div>&nbsp;</div></div>
				<div class="p3-circle-bulls pos2"><div>&nbsp;</div></div>
				<div class="p3-circle-bulls pos3"><div>&nbsp;</div></div>
				<div id="p3-circle-swipe"><div></div></div>
				<div id="p3-circle-marker">
					<div>
						<div>
							<div id="p3-circle-marker-sun"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
  • Вопрос задан
  • 109 просмотров
Пригласить эксперта
Ответы на вопрос 1
@UndineS
Для анимации:
Раскомментируйте в блоке "@media all and (max-width: 650px){ ... }" анимацию
animation: moon-star-one 4s infinite; animation-timing-function: linear;

(аналогично для второй и третьей звезды)
и сам код анимации
@keyframes moon-star-one {
	0% { transform:translate(100%, -200%) scale(1.19) rotate(0deg); }
	50% { transform:translate(100%, -200%) scale(1) rotate(180deg); }
	100% { transform:translate(100%, -200%) scale(1.19) rotate(360deg); }
}
@keyframes moon-star-two {
	0% { transform:translateY(-25%) scale(1) rotate(0deg); }
	50% { transform:translateY(-25%) scale(0.81) rotate(180deg); }
	100% { transform:translateY(-25%) scale(1) rotate(360deg); }
}
@keyframes moon-star-three {
	0% { transform:translate(200%, 25%) scale(0.81) rotate(0deg); }
	50% { transform:translate(200%, 25%) scale(0.62) rotate(180deg); }
	100% { transform:translate(200%, 25%) scale(0.81) rotate(360deg); }
}


Для свайпа:
досканально разобраться на ходу не получается, но попробуйте в блоке
$('section[name=sleep]').swipe( {
...
});

поменять друг на друга слова left и right в условиях direction (содержимое блока if не менять, только условие), так как в блоке с солнцем это работает. Скорее всего, там какой-то конфликт в расчетах происходит в блоке с луной. Версия RAX7 насчет двух блоков тоже должна быть верной, исправьте и то, и то.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы