Попытка создать страницу HTML5 на основе элемента Flash, который я нашел

Question

Я пытаюсь реализовать дизайн, который нашел на другом сайте. Он разработан во Flash, но я пытаюсь воспроизвести нечто подобное, используя HTML5, CSS и Javascript (или PHP, если необходимо).

См. Следующий сайт. http://www.raytheon.com/newsroom/technology/

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

Answer 1

Я бы сделал это так:

<div class="pagecontainer">
  <div id="page1" class="page"  style="background: url(picture20px*400px);"/> 
  <div id="page2" class="activepage"  style="background: url(picture20px*400px);"/> 
  <div id="page3" class="page"  style="background: url(picture20px*400px);"/> 
</div>

css:

 .pagecontainer {
  position:relative;
  width:440px;
  height:400px;
  overflow:hidden;
 }
 .activepage {
  float:left;
  width:400px;
  height:400px;
  overflow:hidden;
  padding-left:20px;

 }
.page {
  float:left;
  width:20px;
  height:400px;
  overflow:hidden;
  padding-left:20px;
}

Обновление: на самом деле, я думаю (после прочтения обновления других ответов), что floatлучше, потому что анимация будет проще с плавающей точкой.Я все еще использовал бы переполнение: скрытое на странице.чтобы сделать страницу видимой, анимируйте ее ширину, чтобы активная страница имела ширину 400 пикселей.Все страницы имеют содержание 400 пикселей, но должны быть видны только 20 пикселей.

Answer 2

Я думаю, что вы можете сделать тот же макет, сделав div с маленькой шириной и большой высотой и поместив изображение внутри div с текстом на нем, горизонтальным как flash. Вот пример кода:

<div style="float: left;  width: 20px; height: 400px;background-color:Red">
        </div>
        <div style="float: left;  width: 20px; height: 400px;background-color:Blue">
        </div>
        <div style="float: left;  width: 20px; height: 400px;background-color:Black">
        </div>
        <div style="float: left;  width: 20px; height: 400px;background-color:Yellow">
        </div>
        <div style="clear:both" >
        </div>