JSFiddle - React, Tailwind, and code Playground
HTML
<div id="body">
<div class="slide_wrapper" id="slide_wrapper1">
<div class="slide" id="slide1">
<img src="http://habrastorage.org/storage2/8ce/cdc/6e9/8cecdc6e9364102302e3f519f82efcf8.png" />
</div>
</div>
<div class="content">
<h1>Ваш телефон вмешивается в вашу жизнь?</h1>
<br/>
<table>
<tr>
<td class="one">
Вы хотите покоя, а случайный звонок поднимает вас с постели?<br/>
<br/>
Первый поцелуй! Ничто не сможет прервать этот чудесный момент.<br/>
Только если это не Gangnam Style, зазвучавший из кармана от звонка вашего маленького братишки.<br/>
</td>
<td class="two">
А может быть вы всего лишь за три часа уложили вашего малыша спать и вам звонко и весело пришла СМС о распродаже новой книги “Радость материнства”?
</td>
</tr>
</table>
<br/>
<p class="annotation">
Не торопитесь разбить ваш новенький Galaxy S об стену.<br/>
Лучше установите ModeBot и насладитесь чашечкой кофе в тишине!
</p>
<br/>
<br/>
<br/>
<h1>ModeBot профессионально возьмет на себя защиту вашего спокойствия.</h1>
<br/>
<table>
<tr>
<td class="one">
Он может самостоятельно включать и выключать звук вашего телефона тогда, когда вам это нужно. Не нужен звук, но нужен виброрежим — это тоже не проблема для ModeBot.<br/>
Боитесь пропустить важный звонок? Добавьте абонента в белый список и он вам дозвонится, даже когда ваш телефон в беззвучном режиме.<br/>
<br/>
Однако и это еще не все, для самых требовательных теперь есть возможность регулировки громкости звонка. Пусть ваш телефон будет громким днем, тихим вечером и беззвучным ночью — все в руках у Вас и вашего ModeBot.
</td>
<td class="two">
И совет напоследок: если вы отключили звонок на телефоне и не хотите даже думать о том, чтобы вернуть его обратно — просто воспользуйтесь виджетом ModeBot. Одно нажатие и телефон перейдет в требуемый вами режим, а затем, когда пройдет нужное время,...
CSS
*{
margin:0;
padding:0;
font-family: "Roboto",Arial,sans-serif;
font-size: 14px;
line-height: 20px;
}
body{
background-image:url("https://ssl.gstatic.com/android/market_images/web/background_stripes.gif");
color: #333333;
}
#body{
margin: 0 auto;
width: 800px;
background-color: white;
}
.slide{ position: relative;}
#slide1{
background-image: url("http://habrastorage.org/storage2/3bf/efe/d70/3bfefed7019062773ce360e032869a62.png");
}
#slide2{
background-image: url("http://habrastorage.org/storage2/59d/edf/f5d/59dedff5d099de6ff7375e9edb2549cb.png");
}
.slide_wrapper, .slide{
overflow: hidden;
height: 391px;
width: 800px;
}
#b2text{ left: 430px; position: absolute; top: 30px;}
#b2logo_wrapper{ left: 490px; position: absolute; top: 100px;width:196px; height: 196px; line-height: 196px; text-align: center;}
#b2logo{ vertical-align:middle;}
h1{font-size: 18px;}
.content{
padding: 20px;
}
.content table{ width: 100%;}
.content td.one{width: 60%; padding-right: 30px; vertical-align:top;}
.eq_width td.one{width: 50%; padding-right: 30px; vertical-align:top;}
ul{list-style-position: outside; margin-left: 30px;}
.content td.two{padding-right: 30px; vertical-align:middle;}
.annotation{font-style: italic;}
JavaScript
jq = jQuery.noConflict();
function aldparallax(_parent, _blocks, _callback)
{
var me = this;
var parent = jq(_parent);
var elements = parent.find(_blocks);
var callbacks = _callback;
me.recalcPositions = function()
{
var wTop = jq(window).scrollTop();
var wHeight = jq(window).height();
var wBottom = wTop+wHeight;
var states = new Array();
elements.each(
function()
{
var th = jq(this);
var id = th.attr('id');
var box = new Array();
box['wTop'] = wTop;
box['wBottom'] = wBottom;
box['wHeight'] = wHeight;
var offset = th.offset();
var eTop = offset.top;
var eBot = eTop+th.height();
box['iTop'] = eTop;
box['iBottom'] = eBot;
...