Как сделать перекидную дату без JQuery? - JavaScript, Ajax

AlexKain · 02.05.2016, 12:29

Картинка с подобной датой во вложении

SQLPowerUser · 02.05.2016, 22:29

Если только нарисовать такую картинку, то можно через градиент

Код HTML:

<!DOCTYPE html>
<html>
<head> <meta charset="utf-8">
<title>tmp</title>
<style>
.digit {border-collapse:collapse;}
.digit td {
  font:35px arial;
  padding:0 4px;
  border:2px solid #111;
  background-image:linear-gradient(#fff 0%, #aaa 49%, #111 50%, #111 51%, #fff 52%, #eee 75%, #aaa 100%);
}
</style>
</head>
<body>
<table class="digit">
  <tr> <td>0</td> <td>7</td> </tr>
</table>
</body>
</html>

AlexKain · 03.05.2016, 12:23

Нет, нарисовать-то понятно. Как сделать эффект листания, сверху вниз?

Пепел Феникса · 03.05.2016, 12:55

ну а с JQuery вы это как сделали?

AlexKain · 03.05.2016, 14:01

Да никак. Я это еще не делал. Выучил HTML, CSS, JavaScript. А вот до JQuery руки не дошли. В поисковых системах на запрос вроде "как сделать эффект перелистывания цифр" все ответы начинаются так: "Берем плагин <plagin_name> JQuery"

Пепел Феникса · 03.05.2016, 14:26

по сути это называется берем готовое.
и да, JQuery это не новый язык, это библиотека на JS.
самое быстрое было бы наверно CSS анимацию прикрутить, и со scaleY эффектом поиграть.

AlexKain · 03.05.2016, 15:00

Да знаю что не новый. Просто это неслабый набор функций, которые нужно выучить. Не говоря уже о том, что ради одного эффекта подключать эту немаленькую бандуру... Что касается scale эффекта. Я и сам подозреваю, что нужно свойство transform. Но есть проблема. Это свойство применяется к элементу ЦЕЛИКОМ. А в данном случае эффект перелистывания выглядит так, что верхняя половина прямоугольника загибается вниз до центра (при этом нижняя половина не меняется), а потом наоборот - разгибается вдоль нижней половины, не трогая верхнюю. Вот <a href="http://plugindetector.com/ru/flipcountdown">пример</a>. Разделить верхнюю и нижнюю половину тоже не вариант - потому что цифра находится сразу в обеих, и меняется сначала одна ее часть, затем другая

Gorychev · 03.05.2016, 15:22

В реальной жизни берут готовую либу и все. Все равно использование JQuery это сейчас де факто стандарт. Возможно нужно начать разбираться с ней, а не убивать время на свои велосипеды? Хорошо конечно разобраться в этом вопросе и научиться самому такое создавать.. Но, имхо, лучше потратить время на изучение на JQuery.

Alex11223 · 03.05.2016, 15:26

Цитата:

Просто это неслабый набор функций, которые нужно выучить.

Выучить? Зачем?
Нужно просто использовать их, начиная с простых примеров в туториалах и т.п., гуглить и читать документацию по определенным функциям по необходимости.

Пепел Феникса · 03.05.2016, 16:05

Цитата:

Разделить верхнюю и нижнюю половину тоже не вариант - потому что цифра находится сразу в обеих, и меняется сначала одна ее часть, затем другая

вполне себе вариант.

03.05.2016, 12:55	#4
Пепел Феникса Старожил Регистрация: 28.01.2009 Сообщений: 21,000	ну а с JQuery вы это как сделали? Хорошо поставленный вопрос это уже половина ответа. \| Каков вопрос, таков ответ. Программа делает то что написал программист, а не то что он хотел. Функции/утилиты ждут в параметрах то что им надо, а не то что вы хотите.

03.05.2016, 14:26	#6
Пепел Феникса Старожил Регистрация: 28.01.2009 Сообщений: 21,000	по сути это называется берем готовое. и да, JQuery это не новый язык, это библиотека на JS. самое быстрое было бы наверно CSS анимацию прикрутить, и со scaleY эффектом поиграть. Хорошо поставленный вопрос это уже половина ответа. \| Каков вопрос, таков ответ. Программа делает то что написал программист, а не то что он хотел. Функции/утилиты ждут в параметрах то что им надо, а не то что вы хотите.

03.05.2016, 15:00	#7
AlexKain Пользователь Регистрация: 25.09.2015 Сообщений: 50	Да знаю что не новый. Просто это неслабый набор функций, которые нужно выучить. Не говоря уже о том, что ради одного эффекта подключать эту немаленькую бандуру... Что касается scale эффекта. Я и сам подозреваю, что нужно свойство transform. Но есть проблема. Это свойство применяется к элементу ЦЕЛИКОМ. А в данном случае эффект перелистывания выглядит так, что верхняя половина прямоугольника загибается вниз до центра (при этом нижняя половина не меняется), а потом наоборот - разгибается вдоль нижней половины, не трогая верхнюю. Вот <a href="http://plugindetector.com/ru/flipcountdown">пример</a>. Разделить верхнюю и нижнюю половину тоже не вариант - потому что цифра находится сразу в обеих, и меняется сначала одна ее часть, затем другая Последний раз редактировалось AlexKain; 03.05.2016 в 15:10.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
jQuery. Blur на div. Как сделать?	Mr_freeman	JavaScript, Ajax	2	24.01.2013 15:55
Как формировать Ajax-запрос без jQuery ?	Metaron	JavaScript, Ajax	1	05.03.2011 22:25
Преобразовать дату в текст без формул	kipish_lp	Microsoft Office Excel	8	11.05.2010 14:38
Как сделать автоматич. дату и перенос записей.	Hito	БД в Delphi	8	07.05.2009 13:58
открываю документ. ввожу дату и другие данные, как сделать чтобы на другой странице велась статистика по	Аленка	Microsoft Office Excel	5	12.02.2008 17:36

03.05.2016, 12:23	#3
AlexKain Пользователь Регистрация: 25.09.2015 Сообщений: 50	Нет, нарисовать-то понятно. Как сделать эффект листания, сверху вниз?

03.05.2016, 14:01	#5
AlexKain Пользователь Регистрация: 25.09.2015 Сообщений: 50	Да никак. Я это еще не делал. Выучил HTML, CSS, JavaScript. А вот до JQuery руки не дошли. В поисковых системах на запрос вроде "как сделать эффект перелистывания цифр" все ответы начинаются так: "Берем плагин <plagin_name> JQuery"

03.05.2016, 15:22	#8
Gorychev Участник клуба Регистрация: 08.03.2008 Сообщений: 1,537	В реальной жизни берут готовую либу и все. Все равно использование JQuery это сейчас де факто стандарт. Возможно нужно начать разбираться с ней, а не убивать время на свои велосипеды? Хорошо конечно разобраться в этом вопросе и научиться самому такое создавать.. Но, имхо, лучше потратить время на изучение на JQuery.