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

Вариант решения: задать слой с другим фоном и делать ему fadeIn или fadeOut в зависимости от направления прокрутки.
https://jsfiddle.net/glebkema/8m6sL7cy/

По второй ссылке фон меняется плавно по мере прокручивания. Приятно остановиться на полпути и пойти в обратную сторону, чтобы полюбоваться качеством перехода.

Вариант решения: менять прозрачность второго слоя пропорционально координате прокрутки.
https://jsfiddle.net/glebkema/cd8pjdyg/

С бутстрапом совмещается тем, что:

1. бутстрап уже использует jQuery и его не надо подключать самостоятельно;
   
2. координаты переходов можно не задавать константами, а вычислять по положению ключевых элементов на странице.
   

Вот подробно и с картинками: www.stseprounof.org/how-to-renew-translation
Коротко:

1. в Poedit открываем текущий перевод ru_RU.po
   
2. пункт меню "Каталог / Обновить из POT-файла"
   
3. в окне выбора файла меняем ограничение "Шаблоны * .POT" на "Все файлы * . *"
   
4. выбираем англоязычный файл из обновления
   (автор говорит про default.po, у меня это en_EN.po)
   
5. получаем окошко с перечислением новых и устаревших записей
   
6. закрываем окошко, чтобы Poedit добавил новые записи и удалил устаревшие
   (если какая-то английская фраза осталась, но изменилась, то её перевод окрасят жёлтым цветом как "неточный")
   
7. проверяем, что изменилось, и сохраняем новый ru_RU.po
   

https://notepad-plus-plus.org/features/multi-editi...

Вариант через относительное позиционирование: https://jsfiddle.net/glebkema/7Lpv0x3w/

.parent {
  padding: 10px;
}
img {
  position: relative;
  top: 80%; 
  left: 80%;
  height: 20%;
  width: 20%;
}