Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 14.03.2019, 11:42
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 266

Такой вопрос, кто нибудь делал подобные анимации с transform: rotateX ?
первоначальные значения 90deg и -90deg отличаются визуально? просто немного поэкспериментировала и особой разницы не заметила, видно что элемент вращается но трудно сказать в какую сторону.
Ответить с цитированием
  #12 (permalink)  
Старый 14.03.2019, 17:01
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 266

Сообщение от Malleys
Вам только нужно, чтобы анимация запускалась или маятник правильно работал или то и другое?
В самом идеальном случае надо чтобы маятник правильно работал чисто на css, и только запускался наново на js, поэтому я создала тему в этом разделе, а вопрос про про обновление дива был в другом разделе
Ответить с цитированием
  #13 (permalink)  
Старый 16.03.2019, 03:54
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 944

Сообщение от Блондинка
надо, чтобы маятник правильно работал чисто на 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 в 16:19.
Ответить с цитированием
  #14 (permalink)  
Старый 16.03.2019, 16:56
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 266

Malleys,
просто возникла идея на основе этого маятника сделать еще что нибудь, типа лого или заголовка, когда буквы с небольшой задержкой поочерёдно начинают "падать" затухая, поэтому и спросила про ось Х
Ответить с цитированием
  #15 (permalink)  
Старый 16.03.2019, 19:40
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 266

Не могу понять что происходит, раньше нормально смотрела на codepen, сейчас никак не могу посмотреть, даже скопировала код страницы по ссылке выше, всё без результата.
Ответить с цитированием
  #16 (permalink)  
Старый 16.03.2019, 19:46
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 266

Если не трудно, скиньте в личку код По этой ссылке
Сообщение от Malleys
https://codepen.io/Malleys/pen/pYVzEg
ну или на мыло или вайбер
Ответить с цитированием
  #17 (permalink)  
Старый 16.03.2019, 19:56
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 944

Можно скачать в виде архива https://codepen.io/Malleys/share/zip/pYVzEg

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

Последний раз редактировалось Malleys, 16.03.2019 в 20:01.
Ответить с цитированием
  #18 (permalink)  
Старый 17.03.2019, 11:42
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 266

кажется я начинаю догадываться, видимо причина в том что я затрагиваю темы сверхсекретные, имеющие стратегическое государственное значение, такие как подсветка пунктов меню и маятник на css, которые можно обсуждать только в кругу близких родственников на кухне, иначе пасодуть как во времена союза при железном занавесе.

а если серьезно и без ёрничания, объясните мне, если кто-то говорит что "не может зайти", зачем упорно предлагать ему зайти на сторонние ресурсы и создавать ему проблемы, что мешает выложить код в теме или скинуть в личку?
Ответить с цитированием
  #19 (permalink)  
Старый 17.03.2019, 16:37
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 944

Сообщение от Блондинка
Объясните мне, если кто-то говорит что "не может зайти", зачем упорно предлагать ему зайти на сторонние ресурсы...
Не ясно, что же означает ваше «не могу зайти»! Я подумал, что может быть у вас отключен JavaScript, и выложил ссылку на архив.

Сообщение от Блондинка
Что мешает выложить код в теме....
Я выкладываю код в теме, если...
  • код разумной длины написан в соответствии с различными спецификациями HTML, CSS и JS, и запускается хотя бы в последней версии Chrome (запускается)
  • это — гипотетический код, который объясняет какую-либо идею (не запускается)

Я выкладываю код в песочнице (codepen.io, codesandbox.io, а также jsfiddle.net или plnkr.co), если...
  • код слишком длинный (более 9 КБ)
  • для работы кода необходима некая файловая система
  • используется препроцессор или сборщик

Сообщение от Блондинка
Что мешает выложить код в теме....
Вы попросили, чтобы вам помогли написать код анимации маятника на CSS, я не думаю, что это великолепно высчитывать значения по формулам вручную, с расстановкой префиксов (вам это надо!), поэтому для этой цели я использовал препроцессор SCSS (я против подключения этого SCSS к любому проекту, но в данном случае он подходит как раз! И вы видели, какая у вас получилась неуправляемая каша/простыня, когда вы только сделали анимацию первого колебания от 90° до -45° в посте №3). Поэтому он написан при помощи препроцессора SCSS, и вы знаете, почему он опубликован в песочнице.
Ответить с цитированием
  #20 (permalink)  
Старый 17.03.2019, 22:00
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 266

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>
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
отменить animation: для класса Black_Star (X)HTML/CSS 6 28.10.2016 10:06
css animation height ekkl-82 (X)HTML/CSS 17 30.10.2015 09:22
css анимация, плавный вовзрат к начальному значению FanAizu (X)HTML/CSS 0 30.01.2014 16:28
JQuery CSS анализатор javascript jQuery 2 15.08.2010 20:27
Подскажите по CSS меню Александр_1988 Элементы интерфейса 1 17.05.2010 10:58