Уроки JavaScript Практика #7 Анимация в js

В этом уроке мы подробно разберем один из видов анимации в языке программирования javascript.
========================================================
И не пропускай новые видео!!!
========================================================
ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА:
========================================================

========================================================

[leader]

Понятно и доступно даже мне)) Спасибо))

[МаксимКалинкин-мй]

заебался я уже по командировкам ездить по России, да гайки крутить, смотрю твои видео, и не только твои, до этого начинал читать книжку по java, мне кажется все довольно понятным, в школе с математикой все ок было, нужно лишь взять себя в руки, да и выучить это все наконец, вот только где взять столько сил, энергии и мотивации, чтобы не бросить это дело, не успев начать ...
Ребята, которые прочитали данный коммент, которые только заканчивают школу, либо молодые, которые до сих пор сидят на шее у родителей, пока у вас есть возможность учиться и не работать, пользуйтесь ей, потом сложно будет ;)

[sanjo]

Класно, эти видео вот прям для меня как буд-то сделаны, т.к. впитал кучу теории а практики не хватает, и тут те на. Знаю что этому плейлисту 6 лет, но все же безумно интересен каждый урок особенно если потом сам что-то доделываешь(не важно что, просто что в голову взбрендит). Например я сделал так, что-бы квадрат восьмёркой двигался создавши еще 3 функции и бесконечность движения этого квадратика забабахал, и сижу довольный и пялюсь как квадратик пиксели наматывает))

[derasadqwesdar]

МММдааааааааааааа! Победил !!! Немного потупил как же без этого, теперь такое чувство что почти хакер я стал.

[StasianGames]

Чтобы гонять красный квадрат от угла до угла бесконечно:
function myMove(){
var elem =
var pos = 0;
var id = setInterval(frame, 3);
function frame(){
if(pos >=350){
clearInterval(id);
Reverse();
}else{
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}

}

function Reverse(){
var elem =
var pos = 350;
var id = setInterval(frame, 3);
function frame(){
if(pos <= 0){
clearInterval(id);
myMove();
}else{
pos--;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}

}

[Jelay_i_polychay]

Добрый день, спасибо за видео. Может подскажете мне, как можно сделать так, чтобы скрипт на сайте показывал бегущий снизу вверх заданный текст, но чтобы при обновлении страницы, он не начинал с начала показ текста, а продолжал движение ??

[ingvarorlov]

верно ли я понимаю этот скрипт каждые 10 мил. с. будет переписывать стили в дом дереве для этого объект. Тоесть постоянно обращаться к дом. С точки зрения производительности это нормально? А если нафигачить таких квадратов штук десять то все хана, все затупит?

[Peter-vztb]

Бред. Так никто не анимирует уже лет 5. Хорошо хоть на нужный ресурс ссылку кинул. В на курсе есть интересные уроки но не этот.

[romanchuiko]

Как сделать, чтобы по второму клику по кнопке квадратик возвращался?

[godlikeIra]

Спасибо за ролик, теперь вопрос как можно сделать два квадрата чтобы они стукнулись

[hotchaircreative]

Хорошо объясняешь по сути дела, молодец! лайков тебе нахуярил)

[timgamer]

Очень понятно.
Но
Как сделать чтобы он не по одной линии двигал
А чтоб скакал по всей странице ????

[luckysting]

Попробуйте понажимать на Animation пару раз :)

[FantazyEliott]

Понимаю что видео очень давно залито, но спасибо!

[reizer]

Вот я переписал код как у тебя. Запускаю а у меня ни чего не работает в JS! написал точно так же. Я попробовал проверить на ошибку с помощью alert вызовется ли это окно. После строчки var elem = у меня alert не выводится! помоги пожалуйста в чём тут ошибка?
и вот сам код из JS:

function myMove() {
var elem =
var pos = 0;
var id = setInterval(frame, 10);
function frame() {
if (pos == 350) {
clearInterval(id);
}else {
pos++;
elem.style.left = pos + 'px';
}
}
}

[ivankruk]

Для разнообразия заныкал анимацию в модальное окно=)

[ЯрославКузнецов-гы]

Спасибо чувак, 4 сайта обчитал - везде дичь какая-то сложноусвояемая, и просидел 1, 5 часа за изучением чтобы потом придти сюда и за 6 минут научиться...

[alekav]

Может кто помочь. Я попробовал доработать этот код. Так чтобы квадрат по клику кнопки перемещался сначала в один конец, а по повторному клику во второй конец. Но код получился глючный, и работает только несколько раз, что вообщем заедает. Может кто-нибудь исправит его?
HTML
<p><button
<div id="myContainer">
<div id="myAnimation">

</div>
</div>
CSS
#myContainer {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#myAnimation {
width: 50px;
height: 50px;
position: absolute;
background: red;
}
JS
function moveCube() {
if (pos < 350) {
clearInterval(id);
var ad = setInterval(down, 5);

}
else if (pos > 0) {
clearInterval(ad);
var id = setInterval(up, 5);
}
}

function down() {
if (pos < 350) {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}

function up() {
if (pos > 0) {
pos--;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}

[neverworld]

А блокиратора так и нету от 9999+ нажатий на эту кнопку, из полезного узнал только то что можно указывать пиксели через 'px' и всё

[dogvscatfunny]

Кому понятно тому не сложно, а кто не знает для того сложно, а значит речи эти глупые и не нужные)