Страница 3 из 4 < 12 3 4 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   CSS animation математический маятник (https://javascript.ru/forum/xhtml-html-css/77002-css-animation-matematicheskijj-mayatnik.html)

Блондинка 17.03.2019 23:16
Цитата:
Сообщение от Malleys
Не ясно, что же означает ваше «не могу зайти»! Я подумал, что может быть у вас отключен JavaScript, и выложил ссылку на архив.
зайти то могу, но ничего не видно - черный фон, но сверху справа только полбуквы "А" при клике на которую появляется рамка как возле полей формы при клике, тоже самое с кнопками 1,0 0,5 и 0,25 справа внизу, при клике на кнопки HTML CSS JS вообще ничего не происходит, могу перейти только на главную при клике на лого, и на твою страницу при клике на твой ник, кроме этих двух стр ничего не могу сделать.

Блондинка 17.03.2019 23:43
и архив скачать без регистрации нельзя, а зарегистрироваться не могу.

Блондинка 18.03.2019 07:50
Malleys,
возможно ли исправить код в 19 посте и скинуть в личку? только убедительная просьба, ничего не надо трогать в стиле и в теле страницы, в том смысле что не надо спаны заменять на псевдоклассы/псевдоэлементы, пусть так спаны и останутся

Malleys 19.03.2019 20:58
Вы напечатали код в посте №20...

Да, оно не работает, вам нужен sass c compass, autoprefixer и babel, которые превратили тот код в этот...

Ваш транспилированный пример
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Математический маятник</title>
	<style>

.mathematics_pendulum {
  width: 930px;
  height: 500px;
  background: linear-gradient(to top, #ade6ad, #e6e6cc);
  border-radius: 50px/35px;
  border: 1px solid #c0c0c0;
  position: absolute;
}

#still_point {
  display: inline-block;
  width: 1px;
  height: 1px;
  background: transparent;
  border: 45px solid transparent;
  border-top-color: #000080;
  position: absolute;
  left: 420px;
}

#pendulum {
  width: 75px;
  height: 400px;
  display: inline-block;
  position: absolute;
  top: 45px;
  left: 428px;
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-animation: pendulum 10.03545s cubic-bezier(0.36, 0, 0.64, 1) forwards;
  animation: pendulum 10.03545s cubic-bezier(0.36, 0, 0.64, 1) forwards;
}

#pendulum_rod {
  width: 3px;
  height: 325px;
  background: #999;
  display: inline-block;
  border-radius: 2px;
  position: absolute;
  left: 36px;
}

#point_pendulum {
  width: 75px;
  height: 75px;
  display: inline-block;
  border-radius: 50%;
  background: radial-gradient(circle at 60% 40%, #bfbfff, #0000ff);
  position: absolute;
  top: 325px;
}

@-webkit-keyframes pendulum {
  0% {
    -webkit-transform: rotate(1.5708rad);
            transform: rotate(1.5708rad);
  }
  10% {
    -webkit-transform: rotate(-1.44982rad);
            transform: rotate(-1.44982rad);
  }
  20% {
    -webkit-transform: rotate(1.13998rad);
            transform: rotate(1.13998rad);
  }
  30% {
    -webkit-transform: rotate(-0.76361rad);
            transform: rotate(-0.76361rad);
  }
  40% {
    -webkit-transform: rotate(0.43574rad);
            transform: rotate(0.43574rad);
  }
  50% {
    -webkit-transform: rotate(-0.21183rad);
            transform: rotate(-0.21183rad);
  }
  60% {
    -webkit-transform: rotate(0.08772rad);
            transform: rotate(0.08772rad);
  }
  70% {
    -webkit-transform: rotate(-0.03095rad);
            transform: rotate(-0.03095rad);
  }
  80% {
    -webkit-transform: rotate(0.0093rad);
            transform: rotate(0.0093rad);
  }
  90% {
    -webkit-transform: rotate(-0.00238rad);
            transform: rotate(-0.00238rad);
  }
  100% {
    -webkit-transform: rotate(0.00052rad);
            transform: rotate(0.00052rad);
  }
}

@keyframes pendulum {
  0% {
    -webkit-transform: rotate(1.5708rad);
            transform: rotate(1.5708rad);
  }
  10% {
    -webkit-transform: rotate(-1.44982rad);
            transform: rotate(-1.44982rad);
  }
  20% {
    -webkit-transform: rotate(1.13998rad);
            transform: rotate(1.13998rad);
  }
  30% {
    -webkit-transform: rotate(-0.76361rad);
            transform: rotate(-0.76361rad);
  }
  40% {
    -webkit-transform: rotate(0.43574rad);
            transform: rotate(0.43574rad);
  }
  50% {
    -webkit-transform: rotate(-0.21183rad);
            transform: rotate(-0.21183rad);
  }
  60% {
    -webkit-transform: rotate(0.08772rad);
            transform: rotate(0.08772rad);
  }
  70% {
    -webkit-transform: rotate(-0.03095rad);
            transform: rotate(-0.03095rad);
  }
  80% {
    -webkit-transform: rotate(0.0093rad);
            transform: rotate(0.0093rad);
  }
  90% {
    -webkit-transform: rotate(-0.00238rad);
            transform: rotate(-0.00238rad);
  }
  100% {
    -webkit-transform: rotate(0.00052rad);
            transform: rotate(0.00052rad);
  }


	</style>
</head>
<body>
	<div tabindex="0" class="mathematics_pendulum" role="button" aria-label="Проиграть анимацию маятника" onclick="restartAnimation(this)" ontouchstart="restartAnimation(this)" onkeydown="restartAnimation(this)">
		<span id="still_point"></span>
		<span id="pendulum">
			<span id="pendulum_rod"></span>
			<span id="point_pendulum"></span>
		</span>
	</div>
	<script>
		
"use strict";

function restartAnimation(target) {
    var parentNode = target.parentNode;
    var comment = document.createComment("");

    parentNode.replaceChild(comment, target);
	
    setTimeout(function() {
        parentNode.replaceChild(target, comment);
    });
};

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



Транспилированный пример с Codepen
<button class="pendulum"></button>

<style>

.pendulum {
  width: 255px;
  background: #cfe6cf;
  border-radius: 15px / 12px;
  border: 1px solid #c0c0c0;
  padding: 0;
}
.pendulum::before {
  content: "";
  display: block;
  width: 0;
  margin: auto;
  border: 15px solid transparent;
  border-top-color: #000080;
  border-bottom-width: 0;
}
.pendulum::after {
  content: "";
  display: block;
  margin: auto;
  margin-bottom: 8px;
  width: 25px;
  height: 100px;
  background: radial-gradient(closest-side circle at 50% 87.5%, #0000ff 90%, rgba(0, 0, 0, 0)), linear-gradient(to right, rgba(0, 0, 0, 0) 47%, #999999, rgba(0, 0, 0, 0) 53%);
  -webkit-mask: radial-gradient(closest-side circle at 45% 84.5%, rgba(0, 0, 0, 0.3), #000000 136%);
  mask: radial-gradient(closest-side circle at 45% 84.5%, rgba(0, 0, 0, 0.3), #000000 136%);
  transform-origin: 50% 0;
  animation: pendulum 10.03545s cubic-bezier(0.36, 0, 0.64, 1) forwards;
}

@keyframes pendulum {
  0% {
    transform: rotate(1.5708rad);
  }
  10% {
    transform: rotate(-1.44982rad);
  }
  20% {
    transform: rotate(1.13998rad);
  }
  30% {
    transform: rotate(-0.76361rad);
  }
  40% {
    transform: rotate(0.43574rad);
  }
  50% {
    transform: rotate(-0.21183rad);
  }
  60% {
    transform: rotate(0.08772rad);
  }
  70% {
    transform: rotate(-0.03095rad);
  }
  80% {
    transform: rotate(0.0093rad);
  }
  90% {
    transform: rotate(-0.00238rad);
  }
  100% {
    transform: rotate(0.00052rad);
  }
}

</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.matches"></script>
<script>

addEventListener("click", function(event) {
	const target = event.target;
	
	if(target.matches(".pendulum")) {
		const parentNode = target.parentNode;
		const comment = document.createComment("");

		parentNode.replaceChild(comment, target);
		
		setTimeout(function() {
			parentNode.replaceChild(target, comment);
		});
	}
});

</script>


Сложный вы путь выбрали, теперь транспилированный код вы будете редактировать как исходный...

Вопросы:
  • Почему среди возможных решений вы выбираете самое сложное и многословное?
  • В каком учебнике вы прочитали про ошибочное и проблемное учение «нажать на <div>», которое вы активно пытаетесь продвинуть?

Блондинка 20.03.2019 13:05
Цитата:
Сообщение от Malleys
Вопросы:
Почему среди возможных решений вы выбираете самое сложное и многословное?
В каком учебнике вы прочитали про ошибочное и проблемное учение «нажать на <div>», которое вы активно пытаетесь продвинуть?
1. наверное из-за ограниченых возможностей что у меня имеются.
2. У каждого художника свои любимые фломастеры, у каждого есть любимый цвет, любимый продукт питания, любимый напиток и т. д. но ни кто не может объяснить почему, так и тут, ну просто не нравится мне присутствие кнопки если можно обойтись кликом по див'у а почему не знаю.

Блондинка 20.03.2019 13:09
чет не работает у меня скрипт запуск анимации по клику, но зато сам маятник работает как надо.

Malleys 20.03.2019 13:59
Цитата:
Сообщение от Блондинка
чет не работает у меня скрипт запуск анимации по клику, но зато сам маятник работает как надо.
Обновил пост №24, работает?

Что за браузер у вас?

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

UPD А, нет, просто среди возможных решений вы обычно выбираете самое сложное и многословное...

Цитата:
Сообщение от Блондинка
У каждого художника свои любимые фломастеры...
Так это подмена понятии, у вас нет любимой кнопки, не так ли?

Блондинка 20.03.2019 14:44
Обычно пользуюсь Habit Browser , есть яндекс, восемь опер, хром, юсвеб, и стандарный что был в телефоне,
чёт опять не работает обновление анимации

рони 20.03.2019 15:26
Цитата:
Сообщение от Malleys
UPD А, нет, просто среди возможных решений вы обычно выбираете самое сложное и многословное...
возможно разные возможности есть у вас, а блондинка (и я в том числе) о них и не подозревает.
и вопрос каким путём придти к решению, что на див нельзя кликать? почему?

Malleys 20.03.2019 16:52
Цитата:
Сообщение от Блондинка
чёт опять не работает обновление анимации
сам скачал Habit Browser и проверил... теперь работает пост №24 в Habit Browser!

рони, Да, <div onclick> работает с мышью и в телефоне в новых браузерах, но оно не работает с клавиатуры, оно не работает на телефоне в некоторых браузерах (в том числе в Habit Browser, которым пользуется Блондинка), оно не работает на Android TV, оно не воспринимается скинридерами как кнопка ...

Вон, она ведь пишет...
Цитата:
Сообщение от Блондинка
чёт опять не работает обновление анимации
хотя там и стоит желанный <div onclick>, короче поменял обратно на <button>


Часовой пояс GMT +3, время: 13:13.
Страница 3 из 4 < 12 3 4 >
Показывать 40 сообщений этой темы на одной странице