Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 04.06.2017, 22:25
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

используйте цикл для этих целей
Ответить с цитированием
  #12 (permalink)  
Старый 04.06.2017, 22:59
Аспирант
Отправить личное сообщение для JohnJohn Посмотреть профиль Найти все сообщения от JohnJohn
 
Регистрация: 04.06.2017
Сообщений: 46

Вроде так, но не так))) Не помогает.

<!DOCTYPE html>
<html>
<head>
<style>
.transform {
     translate(0,-150px);
    -webkit-transform: translate(0,-150px);
    -o-transform: translate(0,-150px);
    -moz-transform: translate(0,-150px);
}
</style>
</head>
<body>
<div id='page'>
<div class="about"></div>
<div class="about"></div>
<div class="about"></div>
</div>
<script type="text/javascript">
   var animateElement = document.getElementById('page');
var getPage = animateElement.getBoundingClientRect().top + window.pageYOffset;
var elementIcon = document.getElementsByClassName('about');
window.onscroll = function() {
    for (i = 0; i < elementIcon.length; i++){
  elementIcon[i].classList.add('transform');
}
    if (animateElement.classList.contains('transform') && window.pageYOffset < getPage) {
        elementIcon.classList.remove('transform');
      } else if (window.pageYOffset > getPage) {
        elementIcon.classList.add('transform');
      }
    };
</script>
</body>
</html>
Ответить с цитированием
  #13 (permalink)  
Старый 04.06.2017, 23:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

JohnJohn,
что хоть анимируется и когда?
Ответить с цитированием
  #14 (permalink)  
Старый 04.06.2017, 23:46
Аспирант
Отправить личное сообщение для JohnJohn Посмотреть профиль Найти все сообщения от JohnJohn
 
Регистрация: 04.06.2017
Сообщений: 46

Анимируются иконки, когда попадают в область видимости экрана.
Ответить с цитированием
  #15 (permalink)  
Старый 04.06.2017, 23:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

JohnJohn,
а можно макет, где по клику происходит ваша анимация, хотябы одной иконки?
Ответить с цитированием
  #16 (permalink)  
Старый 05.06.2017, 00:06
Аспирант
Отправить личное сообщение для JohnJohn Посмотреть профиль Найти все сообщения от JohnJohn
 
Регистрация: 04.06.2017
Сообщений: 46

По клику ничего происходить не должно. Отправил в лс
Ответить с цитированием
  #17 (permalink)  
Старый 05.06.2017, 00:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от JohnJohn
По клику ничего происходить не должно. Отправил в лс
видимо вы не понимаите, что вас просят сделать.
Ответить с цитированием
  #18 (permalink)  
Старый 05.06.2017, 00:22
Аспирант
Отправить личное сообщение для JohnJohn Посмотреть профиль Найти все сообщения от JohnJohn
 
Регистрация: 04.06.2017
Сообщений: 46

ааа, я понял, залить, позже сделаю
Ответить с цитированием
  #19 (permalink)  
Старый 05.06.2017, 00:25
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<html>
<head>
	<style>
		.transform {
			color:red;
		}
	</style>
</head>
<body>
	<div id='page'>
		<div class="about">5454</div>
		<div class="about">54545</div>
		<div class="about">454545</div>
	</div>
	<script>
		var flag = document.getElementById('page');
		var animEl = document.getElementsByClassName('about');
		function scr(){
			var elHeigth = flag.getBoundingClientRect().top - window.innerHeight;
			if(elHeigth <= 0 && Math.abs(elHeigth) <= window.innerHeight) {
				for (i = 0; i < animEl.length; i++){
					animEl[i].classList.add('transform');
				}
			}
			else{
				for (i = 0; i < animEl.length; i++){
					animEl[i].classList.remove('transform');
				}
			}
		}
		window.addEventListener("scroll" , scr);
	</script>
</body>
</html>


Я запутался и переписал заново все, так вроде все ок
Ответить с цитированием
  #20 (permalink)  
Старый 05.06.2017, 00:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

добавление класса в зоне видимости
JohnJohn,
описание если блок about полностью в зоне видимости(по высоте блока) ему добавляется класс, иначе снимается.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
 <style type="text/css">
 .transform {
   transform: translate(0,-150px);

}
 .about {
   height: 50px;
   width: 50px;
   background-color: #FF00FF;
   transition: all .8s ease-in;
   margin-top: 1500px
 }


 </style>
</head>
<body>

<div id='page'>
<div class="about"></div>
<div class="about"></div>
<div class="about"></div>
</div>
<script>
window.addEventListener("DOMContentLoaded", anim, false)
window.addEventListener("scroll", anim, false);

function anim() {
   [].forEach.call( document.querySelectorAll('.about'), function(el) {
      checkViewport(el) ? el.classList.add("transform") : el.classList.remove("transform")
   });
}
function checkViewport(a) {
    var b = a.getBoundingClientRect();
    return 0 < b.top && b.top + a.scrollHeight < window.innerHeight
};

</script>
</body>
</html>

Последний раз редактировалось рони, 05.06.2017 в 00:47.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Диалог между HTML и внешним JS в контексте расширения GoogleChrome ev1lart Events/DOM/Window 0 26.04.2017 19:25
Анимация на чистом JS Tecvid Events/DOM/Window 12 27.11.2014 12:46
Проекты на чистом js kidar2 Общие вопросы Javascript 7 09.01.2014 14:26
Картинка обрабатывается js 4yBaK Общие вопросы Javascript 10 11.09.2011 09:28