Как заставить плавать блок?

Question

[Shugar348]

Есть вот этот сайт - shugar.github.io
На нем находится div с информацией, пришла в голову идея - заставить его плавать по определенной площади.
Если более конкретно, хотелось бы заставить его плавно двигаться по элипсу\влево-вправо\как бы плавать по экрану, не далеко отходя от исходной точки.

Answer 1

[Maksim Zverev]

www.w3schools.com/css/css3_animations.asp
www.the-art-of-web.com/css/css-animation
demo.tutorialzine.com/2009/12/colorful-clock-jquer...

Все это на CSS3, тоесть требует минимального порога вхождения. Не ищите готовый ответ, попробуйте сделать сами на основе выше приведенной информации, это не так сложно.

Answer 2

[Евгений Петров]

Как сделать движение точки по эллипсу (овалу в наклоне)?

Answer 3

[Юрий Лобанов]

www.useragentman.com/blog/2013/03/03/animating-cir...
А вообще это, простите, дно. Называться веб-программистом и не уметь такое сделать или загуглить.

Comments

[Shugar348]

Я попросил максимально адекватного решения, потому что где-то тут видел движение точки по эллипсу, я ожидал увидеть его. Ваша критика как всегда в своем роде.

[Юрий Лобанов]

@Shugar348 всех гладить по голове терпения не хватит. Не обижайтесь.
Насчет Вашей идеи — научиться делать такое — это одно, а вот реализовывать на сайте я не советую. Веб-разработчики вообще грешат всякими фичами на своих сайтах, которые сильно осложняют работу с ними.
Конкретно на данном сайте я бы всего-лишь слегка поправил типографику и оставил бы как есть. Если интересна критика типографики (конечно, это будет только мое мнение) — пишите.

[Shugar348]

@iiil интересно.

[Shugar348]

@iiil жду критики.

[Юрий Лобанов]

1. Выравняйте текст по левому краю, что за непонятный отступ? Обратите внимание, что буква С в заголовке имеет округлую форму слева, так что отступ заголовка и отступ текста должны немного отличаться, чтобы визуально выглядело ровно. Я вроде сделал padding-left:18px для тега p и было нормально
2. Увеличьте интерлиньяж, строчки слиплись и некрасиво смотрятся. Я ставил line-height:30px попробуйте и другие варианты, но будет смотреться куда лучше.
3. Строчка с номером телефона содержит только цифры, они высотой со строчные буквы и в итоге интерлиньяж между этой строкой и мылом выглядит меньше, попробуйте после выполнения п.2 ее немного сместить вниз, опять-таки, чтобы визуально смотрелось красиво.
4. Обратите внимание на выделенный желтым текст. Я конечно не типограф, тем более английский, но так слова вроде не хорошо оставлять, попробуйте перефразировать или перенести выделенные слова на след. строку, но по этому поводу лучше проконсультироваться с кем-нибудь другим. В теперешнем положении смотрится как-то странно.
5. Мыло сделайте кликабельным.
6. После пункта 1 выравняйте также по левому краю и тег hr.
7. Спорный момент, согласен, но ссылку на vk я бы сделал вида vk.com/japan_ask. Кто-то может захотеть скопировать ее.

[Shugar348]

Спасибо за критику, особенно обратил внимание на некоторые пункты, но не во всех сошелся в мнениях. Считаете, что если просто в линию - лучше смотрится? Я не знаю, что хотел показать именно таким отступом, но именно так мне кажется лучше.

[Юрий Лобанов]

@Shugar348 естественно дизайн не может иметь только одного решения, но подобные отступы чаще все используются для акцента, например подзаголовка или первой строки. В данном случае я не вижу в нем смысла. А смотрится он некрасиво.
В любом случае, как я уже говорил — это только мое мнение.

[Shugar348]

@iiil Можете оценить результат.

[Shugar348]

@iiil Что-то поправил, что-то нет, что-то не в полной мере.

[Юрий Лобанов]

@Shugar348 так мне нравится куда больше.
Все же насчет строки с номеров, Ваш вариант (без смещения)

Мой, сместил строку на 1 px вниз. Выглядят расстояния между строчек одинаковыми. Но дело Ваше.

[Shugar348]

@iiil Спасибо, сейчас исправлю

Answer 4

[Александр Таратин]

https://yadi.sk/i/srMLTy7_aQxXM

и сохраните фон как progressive jpeg

Comments

[Shugar348]

@DonSinDRom там слайды меняются, и стоит background-size:cover