14.03.2019, 12:42
|
 |
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
Такой вопрос, кто нибудь делал подобные анимации с transform: rotateX ?
первоначальные значения 90deg и -90deg отличаются визуально? просто немного поэкспериментировала и особой разницы не заметила, видно что элемент вращается но трудно сказать в какую сторону.
|
|
14.03.2019, 18:01
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
Сообщение от Malleys
|
|
Вам только нужно, чтобы анимация запускалась или маятник правильно работал или то и другое?
|
В самом идеальном случае надо чтобы маятник правильно работал чисто на css, и только запускался наново на js, поэтому я создала тему в этом разделе, а вопрос про про обновление дива был в другом разделе |
|
16.03.2019, 04:54
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от Блондинка
|
|
надо, чтобы маятник правильно работал чисто на CSS, и только запускался заново на js
|
https://codepen.io/Malleys/pen/pYVzEg
https://codepen.io/Malleys/full/pYVzEg
|
Сообщение от Блондинка
|
|
Такой вопрос, кто нибудь делал подобные анимации с transform: rotateX? Первоначальные значения 90deg и -90deg отличаются визуально?
|
CSS-функция rotateX отвечает за вращение вокруг оси абсцисс, а вам нужно (в примере с маятником) вращение вокруг оси аппликат, за что отвечает rotateZ или rotate.
Последний раз редактировалось Malleys, 20.03.2019 в 17:19.
|
|
16.03.2019, 17:56
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
Malleys,
просто возникла идея на основе этого маятника сделать еще что нибудь, типа лого или заголовка, когда буквы с небольшой задержкой поочерёдно начинают "падать" затухая, поэтому и спросила про ось Х
|
|
16.03.2019, 20:40
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
Не могу понять что происходит, раньше нормально смотрела на codepen, сейчас никак не могу посмотреть, даже скопировала код страницы по ссылке выше, всё без результата.
|
|
16.03.2019, 20:46
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
Если не трудно, скиньте в личку код По этой ссылке
|
Сообщение от Malleys
|
|
https://codepen.io/Malleys/pen/pYVzEg
|
ну или на мыло или вайбер |
|
16.03.2019, 20:56
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
Можно скачать в виде архива https://codepen.io/Malleys/share/zip/pYVzEg
Что за браузер у вас?
Последний раз редактировалось Malleys, 16.03.2019 в 21:01.
|
|
17.03.2019, 12:42
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
кажется я начинаю догадываться, видимо причина в том что я затрагиваю темы сверхсекретные, имеющие стратегическое государственное значение, такие как подсветка пунктов меню и маятник на css, которые можно обсуждать только в кругу близких родственников на кухне, иначе пасодуть как во времена союза при железном занавесе.
а если серьезно и без ёрничания, объясните мне, если кто-то говорит что "не может зайти", зачем упорно предлагать ему зайти на сторонние ресурсы и создавать ему проблемы, что мешает выложить код в теме или скинуть в личку?
|
|
17.03.2019, 17:37
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от Блондинка
|
|
Объясните мне, если кто-то говорит что "не может зайти", зачем упорно предлагать ему зайти на сторонние ресурсы...
|
Не ясно, что же означает ваше «не могу зайти»! Я подумал, что может быть у вас отключен JavaScript, и выложил ссылку на архив.
|
Сообщение от Блондинка
|
|
Что мешает выложить код в теме....
|
Я выкладываю код в теме, если... - код разумной длины написан в соответствии с различными спецификациями HTML, CSS и JS, и запускается хотя бы в последней версии Chrome (запускается)
- это — гипотетический код, который объясняет какую-либо идею (не запускается)
Я выкладываю код в песочнице ( codepen.io, codesandbox.io, а также jsfiddle.net или plnkr.co), если... - код слишком длинный (более 9 КБ)
- для работы кода необходима некая файловая система
- используется препроцессор или сборщик
|
Сообщение от Блондинка
|
|
Что мешает выложить код в теме....
|
Вы попросили, чтобы вам помогли написать код анимации маятника на CSS, я не думаю, что это великолепно высчитывать значения по формулам вручную, с расстановкой префиксов (вам это надо!), поэтому для этой цели я использовал препроцессор SCSS (я против подключения этого SCSS к любому проекту, но в данном случае он подходит как раз! И вы видели, какая у вас получилась неуправляемая каша/простыня, когда вы только сделали анимацию первого колебания от 90° до -45° в посте №3). Поэтому он написан при помощи препроцессора SCSS, и вы знаете, почему он опубликован в песочнице.
|
|
17.03.2019, 23:00
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
Malleys,
я пыталась сегодня что-то сделать часов девять, но результата ноль, где и что не так не могу понять
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Математический маятник</title>
<style>
@import "compass/css3"; $g: 9.8; $l: 1; $beats: 10; $T: 2 * pi() * sqrt($l/$g);
.mathematics_pendulum { width: 930px; height: 500px; background: -webkit-linear-gradient(top, #ade6ad, #e6e6cc); background: -moz-linear-gradient(top, #ade6ad, #e6e6cc); background: -o-linear-gradient(top, #ade6ad, #e6e6cc); background: linear-gradient(to top, #ade6ad, #e6e6cc); -webkit-border-radius: 50px/35px; 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; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: pendulum #{0.5 * $T * $beats}s cubic-bezier(0.36, 0, 0.64, 1) forwards; animation: pendulum #{0.5 * $T * $beats}s cubic-bezier(0.36, 0, 0.64, 1) forwards; }
#pendulum_rod { width: 3px; height: 325px; background: #999; display: inline-block; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; position: absolute; left: 36px; }
#point_pendulum { width: 75px; height: 75px; display: inline-block; -webkit-border-radius: 50%; border-radius: 50%; background: -webkit-radial-gradient(60% 40%, circle, #bfbfff, #00f); background: -o-radial-gradient(60% 40%, circle, #bfbfff, #00f); background: radial-gradient(circle at 60% 40%, #bfbfff, #00f); position: absolute; top: 325px; }
@-webkit-keyframes pendulum { @for $k from 0 to ($beats + 1) { $t: 0.5 * $k * $T; $θ: 0.5 * pi() * cos(sqrt($g / $l) * $t)$f: pow(e(), -0.25 / pi() * $t * $t); #{100% * $k / $beats} { transform: rotate(#{$f * $θ}rad); } } } @keyframes pendulum { @for $k from 0 to ($beats + 1) { $t: 0.5 * $k * $T; $θ: 0.5 * pi() * cos(sqrt($g / $l) * $t)$f: pow(e(), -0.25 / pi() * $t * $t); #{100% * $k / $beats} { transform: rotate(#{$f * $θ}rad); } } }
</style>
</head>
</head>
<body>
<button class="mathematics_pendulum"></button>
<div class="mathematics_pendulum">
<span id="still_point"></span>
<span id="pendulum">
<span id="pendulum_rod"></span>
<span id="point_pendulum"></span>
</span>
</div>
<script>
addEventListener("click", ({ target }) => { if(target.matches(".mathematics_pendulum")) { const { parentNode } = target; parentNode.replaceChild(target, target); } } );
</script>
</body>
</html>
|
|
|
|
