Блог

Главная - Вопросы по программированию - Проблема с позиционированием и масштабированием анимации Javascript

Проблема с позиционированием и масштабированием анимации Javascript

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Итак, в настоящее время я работаю над одним экраном, на котором есть несколько content views экранов, доступ к которым будет осуществляться с помощью кнопки сбоку от динамической области. Я нашел это репозиторий (https://github.com/ian-de-vries/Multi-Screen.js ), который достигает чего-то очень похожего на то, что я хочу, только он ожидает полного экрана, а не только определенной области. До сих пор я был очень близок к выполнению, как я надеялся, но последние пару часов поставили меня в тупик. В настоящее время существует две проблемы:

1) Относительные divs используют % width значение их содержимого div , в то время как анимация divs использует % width целое screen , делая анимацию divs больше. Я думаю, что способ обойти это — вычислить fixed width во время анимации, а затем удалить ее после анимации. Если вы установите a fixed width в css (что не подходит для сайта), анимация будет плавной и правильной width во время анимации, но затем приведет к следующей проблеме.

2) Из-за оригинальной функциональности js анимации идут прямо по центру, что снова усугубляет анимацию из-за offset content .

Хотя я пытался решить обе эти проблемы, JS это выше моих сил, несмотря на мой опыт работы с другими языками программирования. Я думал, что что-то понял при редактировании pre/post/animation_css variables , но я не мог получить то, чего хотел достичь. В любом случае, ниже приведен быстрый фиктивный сайт, который хорошо копирует код на реальном сайте и создает те же проблемы. Чтобы это заработало, поместите эти два файла в папку с multi-screen.js файлом из репозитория.

 <!DOCTYPE html>
<html>
<head>
    <!-- Scrolling Pages -->
    <!-- latest jQuery -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

    <!-- link the css and js scripts -->
    <link href="style.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="multi-screen.js"></script>

    <!-- run the plugin -->
    <script type="text/javascript">$(document).ready(function() { MultiScreen.init(); });</script>
</head>
<body>

<div class="wrapper">

<div class="header">My Header</div>
    <div class="contentarea">


<div style="float:left; width: 20%; background-color: red; height: 500pt;"></div>

<div style="width:80%; float: right; height: 600pt; background-color: grey;">

<div id="entry_screen" class="ms-container ms-default" style="">

<a href="javascript:void(0)" class="ms-nav-link" data-ms-target="screen2" data-ms-exit-animation="top" data-ms-enter-animation="bottom">go down</a><br>
    <a href="javascript:void(0)" class="ms-nav-link" data-ms-target="screen3" data-ms-exit-animation="top" data-ms-enter-animation="bottom">go down 2</a>

</div>

<div id="screen2" class="ms-container" style="">


    <a href="javascript:void(0)" class="ms-nav-link" data-ms-target="entry_screen" data-ms-exit-animation="bottom" data-ms-enter-animation="top">go up</a><br>

    <a href="javascript:void(0)" class="ms-nav-link" data-ms-target="screen3" data-ms-exit-animation="top" data-ms-enter-animation="bottom">go down</a>


    </div>

    <div id="screen3" class="ms-container" style="">

           <a href="javascript:void(0)" class="ms-nav-link" data-ms-target="screen2" data-ms-exit-animation="bottom" data-ms-enter-animation="top">go up</a><br>
    <a href="javascript:void(0)" class="ms-nav-link" data-ms-target="entry_screen" data-ms-exit-animation="bottom" data-ms-enter-animation="top">go up 2</a>


</div>
</div>
</div><!---------- Close "content-area" --------->
</div><!---------- Close "wrapper" --------->
</body>
</html>

CSS:

 .ms-container {
position: fixed;
z-index: 1;
display: none;
}

.ms-default {
position: absolute;
z-index: 2;
display: block;
}

#entry_screen {
height: 500pt; 
width: 80%; 
background-color: green; 
left: 0;
margin-left: 20%;
}

#screen2 {
height: 500pt;
width: 80%; 
//float: right; 
background-color: blue; 
//margin-right: 10%;
margin-left: 20%;

}

#screen3 {
height: 500pt;
width: 80%; 
background-color: magenta;
margin-left: 20%;
}

.wrapper {
min-height: 100%;
padding: 0  10% 0 10%;
height: auto !important;
height: 100%;
margin: 0 auto 0pt;
}

.contentarea {
position: relative;
}

.header {
    text-align: center;
width: 100%;
height: 50pt;
 }

a {
    color: white;

}

Ответ №1:

В итоге я использовал другую альтернативу. Тот, который я выбрал, был fullPage.js . Его можно использовать для желаемой функциональности, несмотря на то, что он предназначен для полноэкранных сайтов. Надеюсь, это поможет всем, кто хотел достичь чего-то подобного.