seregindev

Да ничего сложного нет.
Я использую связку react+redux.
Store "Articles" -> REST экшены: запрос на список постов, запрос поста (если надо то на создание/обновление/удаление). У каждого события есть request/success/failure состояние. Просто создаем по 3 константы на каждое событие:

const prefix = '@@ARTICLE/';

export const REQUEST = `${prefix}REQUEST`;
export const RECEIVE_SUCCESS = `${prefix}RECEIVE_SUCCESS`;
export const RECEIVE_FAILURE = `${prefix}RECEIVE_FAILURE`;

такого плана.

Умные компоненты - "контейнеры". Создаем для работы с данными, для списка, например.
Глупые - "компоненты". Для отображения отображения, например непосредственно верстки списка.
Ну и все, при клике по посту -> dispatch(LoadPost(postId)), где:

import { REQUEST, ... и другие нужные константы } from '../constants';
const LoadPost = postId => (dispatch) => {
 dispatch({ type: REQUEST, id: postId });
 fetch(куда нам надо)
   .then(r => r.json())
   .then((request) => {
      // обработка успеха
   })
   .catch((ex) => {
     // обработка ошибки
   })
}

Ну, а анимация легкая: transition на translate и opacity.

Успехов!

Добавьте разные классы через админку Contact Form 7.
[submit class:class1 "Заказать"]
В вашем основном файле со скриптами пропишите функции, пример:

$('.class1').on('click', function(){
  alert('Вы нажали на элемент');
});

https://www.google.com.ua/search?q=learn+Java+Servlet
About 760,000 results

Если хотите обмениваться JSON, то смотрите в сторону Spring Rest. Тут потребуется как-то вызвать REST API через какой-нибудь JS фреймворк.
Если хотите встраивать данные в HTML, то смотрите в сторону Spring MVC.

Первый путь гораздо интереснее. Даром можете получить начальные знания, какого нибудь модного Vue.js или Angular2.

Начать лучше с того, что найти простое CRUD приложение. На Spring MVC таких навалом. Например, вот www.journaldev.com/3531/spring-mvc-hibernate-mysql...

Для второго случае, ищется чуть дольше. Но он будет интереснее, и, что не мало важно, скорее всего, получится красивее в плане дизайна. А для того, кто будет это оценивать, это может оказаться очень важно.

Если бы делал я, то стек был бы такой:
- Spring Boot + SpringRest (Гуглить RestController).
- ORM взял бы Hibernate или SpringData.
- Сборщик Maven
- БД, скорее всего нужна встроенная, чтобы проект запускался из коробки. Взял бы H2.
- Сейчас бы для фронта взял Vue.js, может пригодится в ближайшем году) + Bootstrap 4.

1) Изучить сервлеты
2) Изучить jdbc
3) Tomcat

Используйте один из серверов приложений, для начала tomcat например. Для него есть поддержка в разных IDE. Или glassfish, но это будет малость посложней.

Код конечно далеко не идеальный и его нужно дописать, но думаю посыл понятен https://codepen.io/Glaswr/pen/OWpdjN

нафига, тут вообще js?
это уже давно решается на чистом css. например, https://codepen.io/rm/pen/ldhon

https://jsfiddle.net/3wdqesb6/

$("#layers-widget-column-10 h5").each( function() { 
  var counter = $.trim($(this).text()); //Удаляем крайнее пробелы
  var percentage = counter.substring(counter.length-1) == '%'; //Последний символ %?
  console.log(percentage,counter.substring(counter.length-1));
  $(this).prop('Counter', 0).animate({ 
      Counter: (percentage?counter.substring(0, counter.length-1):counter) //Если проценты, возращаем строку без последнего символа
    }, { 
      duration: 1500, 
      easing: 'swing', 
      step: function(now) { 
        $(this).text(Math.ceil(now)+(percentage?'%':'')); //Если процент, добавляем знак процента
      } 
    }
  );
});

Update: добавил $.trim проблема была в пробелах