Как подправить JavaScript?

Question

[Александр Тягунов]

Использую такое решение для анимации элементов:

$(window).scroll(function() {	
$('#example-14').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+600) {
$('.device-arrow14').addClass("slideUp");
}
});	
});

#example-14{
text-align: center;
}
#example-14 .device-arrow14{
width: 100%;
visibility: hidden;
margin: 0 auto;
}
#example-14{
text-align: center;
}
.slideUp{
	animation-name: slideUp;
	-webkit-animation-name: slideUp;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;

	visibility: visible !important;			
}

@keyframes slideUp {
	0% {
		transform: translateY(100%);
	}
	50%{
		transform: translateY(-8%);
	}
	65%{
		transform: translateY(4%);
	}
	80%{
		transform: translateY(-4%);
	}
	95%{
		transform: translateY(2%);
	}			
	100% {
		transform: translateY(0%);
	}	
}

@-webkit-keyframes slideUp {
	0% {
		-webkit-transform: translateY(100%);
	}
	50%{
		-webkit-transform: translateY(-8%);
	}
	65%{
		-webkit-transform: translateY(4%);
	}
	80%{
		-webkit-transform: translateY(-4%);
	}
	95%{
		-webkit-transform: translateY(2%);
	}			
	100% {
		-webkit-transform: translateY(0%);
	}	
}

<section id="example-4">
<div class="device-arrow4">
Анимируемый элемент
</div>
</section>

Анимация происходит в момент когда страница скроллится вниз на 600 пикселей, до этого анимируемый элемент скрыт. Нужно же сделать чтоб скрипт срабатывал сразу после загрузки страницы, а не в момент скролла, но так же был скрыт до начала анимации (привел пример 1 анимации, всего будет 4, каждая из последующих проигрывается с задержкой).

Comments

[Максим Тимофеев]

Вы написали для скрола, а надо, что бы после загрузки? https://learn.jquery.com/using-jquery-core/documen...

[Александр Тягунов]

Максим Тимофеев: верно, нужно чтоб срабатывал после загрузки страницы.

[Максим Тимофеев]

Александр Тягунов: Ну и в чем проблема? Ссылка не отрывается, которую я дал?

[Александр Тягунов]

Максим Тимофеев: Максим спасибо за ссылку. Проблема в том что я обладаю очень скромными знаниями в ява, пол дня просидел решая проблему только потом обратился за советом. Если никто не подскажет буду сидеть ломать голову.

[Максим Тимофеев]

Александр Тягунов: Ява тут не при чем не путайте java с java-script - разница колоссальная.

$( document ).ready(function() {
    здесь код, который сработает когда страница загружена
допустим:
$('.device-arrow14').addClass("slideUp");
добавит класс "slideUp" для '.device-arrow14', что может быть Вам вполне достаточно
});

[Александр Тягунов]

Максим Тимофеев: По поводу java мой косяк=) Приведенный Вами код работает, но анимируемый элемент не скрывается до начала анимации. Т.е. страница загружается, элемент виден, подходит время задержки анимации, анимация срабатывает. Так же себя ведет если вообще не использовать скрипт, а задать анимацию только в CSS.

Answer 1

[Александр Тягунов]

$( document ).ready(function() {
    здесь код, который сработает когда страница загружена:
$('.device-arrow14').addClass("slideUp");
});

Для вопроса сформулированного мной, решение такое. Решение предложил Максим Тимофеев.

Answer 2

[Михаил Чирский]

По хорошему вот этот кусок

$('#example-14').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+600) {
$('.device-arrow14').addClass("slideUp");
}
});

вынести в отдельную ф-цию, к примеру так:

var topOfWindow = window.scrollY;

function myScroll() {
$('#example-14').each(function(){
var imagePos = $(this).offset().top;
topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+600) {
$('.device-arrow14').addClass("slideUp");
}
});
}

далее вызывать ее

myScroll();

$(window).scroll(function() {
myScroll();
});

Чтобы узнать текущую позицию без window.scroll(), воспользуйтесь глобальным объектом window, если я не ошибаюсь, там должен быть property scrollY, тоесть window.scrollY вернет вам ваш offset который у вас, при открытии браузера, или же если вы скролили страницу до этого и остановились не на 0 позиции, он вернет это число.
Проще говоря, ваш код начинает работать после события window.scroll, а не после загрузки страницы.

Comments

[Александр Тягунов]

Т.е. код должен начать выполняться как только страница начнет скроллится?

[Александр Тягунов]

Осознавая свою дуболомость вынужден признать, что не понимаю как заставить предложенный код работать =(((

[Михаил Чирский]

Александр Тягунов: нет! Я на самом деле не очень понял, что вы хотите, если вы попробуете объяснить я смогу легко помочь, ваш код отрабатывает только когда вы начинаете скролить, т.к вы исп. метод window.scroll(), чтобы код сработал сразу, его нужно выполнять до этого метода, а уже в нем проверять, при каких условиях, и что должно работать, хорошим примером тому является: getbootstrap.com/components, где у них при скроле выделяется нужный раздел

[Александр Тягунов]

Ок, на самом деле все просто.
Что есть сейчас:
есть элемент который скрыт до того момента пока страница не прокрутится до 600 пикселей (т.е. скрипт делает 2 вещи - делает скрытый элемент видимым при определенных условиях и вызывает анимацию появления этого элемента).

Нужно же чтобы анимация срабатывала не от скролла, а самостоятельно, сразу после загрузки страницы.

Что именно должен делать скрипт:
на странице будет несколько элементов в ряд, анимация которых, должна происходить последовательно (сначала первая, вторая запускается когда заканчивается первая и т.д.). Суть в том, что нужно чтоб элементы были скрыты до того как начнется анимация.

Т.е. нужно переделать два аспекта: сделать чтоб скрипт запускал анимацию при загрузке страницы и я так понимаю сделать еще один вариант кода который будет запускаться с задержкой.

Надеюсь понятно изложил=))

[Михаил Чирский]

Примерно суть понял, ну visibility, не отработает плавно, лучше воспользоваться opacity, либо скрывать элемент за пределами сцены, чтобы он либо вываливался сверху, либо откуда еще, ну 1 вопрос, я не понимаю, зачем вам скрол) если вы хотите, чтобы анимация сразу же начала проигрываться, после загрузки страницы. По поводу задержки есть 2 ф-ции, 1 вызывается 1 раз, setTimeout, 2 вызывается каждый через каждый заданный интервал, пока ее не остановить, если правильно понял вас, то скрол тут не нужен, и подойдет использование setTimeout с задержкой.
А вообще если нужна анимация на CSS, то можно все задержки сделать там, просто чтобы например начлаа играть анимация, добавлять класс body, или родительскому контейнер, сразу после загрузки страницы. Вот набросал простой пример, так вы хотели? codepen.io/Mike0609/pen/GpMQgm

[Александр Тягунов]

chirskiy_mixail: Максим спасибо! Примерно это мне и было нужно. Я самостоятельно так же решил проблему, не так изящно как Вы конечно=) Я слишком усложнил задачу, а оказалось все просто:
Как выполнить скрипт с задержкой?