3D вращение элемента при скроле

@Rikko123 · Регистрация: 04.02.2015

Студворк — интернет-сервис помощи студентам

Доброго времени суток.
Прошу помощи дорогие форумчане.
Как реализовать данный эффект крутящегося 3d элемента при скроле страницы или смены секции.

Нашел 3d css трансформацию.

HTML5
1
2
3
4
5
6
7
8
9
<div class="container" id="container">
<div id="book">
    <figure class="back"></figure>
    <figure class="front"></figure>
    <figure class="left-1"></figure>
    <figure class="left-2"></figure>
    <figure class="right"></figure>
</div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
.container {
    margin: 100px auto auto 100px;
    position: relative;
    width: 226px;
    height: 316px;
    /* задаем глубину сцене */
    -webkit-perspective: 600px; /* webkit */
    -moz-perspective: 600px; /* mozilla */
    -ms-perspective: 600px; /* IE 10 */
    -o-perspective: 600px; /* opera когда-то тоже должна начать понимать */
    perspective: 600px; /* св-во по стандартам */
}
 
#book { /* поварачивать будет общий контейнер */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
 
    -webkit-transition: -webkit-transform 1.5s;
    -moz-transition: -moz-transform 1.5s;
    -ms-transition: -moz-transform 1.5s;
    -o-transition: -o-transform 1.5s;
    transition: transform 1.5s; /* трансформации будут происходить анимированно продолжительностью 0.5 сек */
    
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;   /* указываем, что дочерние элементы находятся в 3D пространстве */
    
}
#book.flip {    /* добавляя этот класс, поворачиваем контейнер на 180 градусов */
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -ms-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}
 
figure {
    position: absolute;
    display: block;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;    /* если элемент отвернут лицом от пользователя, контент этого элемента не виден */
}
.back, .front, .left-1, .left-2, .right {
    background: url(book-texture.jpg);
}
.front {
    width: 100%;
    height: 100%;
    background-position: -276px 0;
    -webkit-transform: rotateY( 0deg ) translateZ(  25px );
    -moz-transform: rotateY( 0deg ) translateZ(  25px );
    -ms-transform: rotateY(0deg) translateZ(  25px );
    -o-transform: rotateY( 0deg ) translateZ(  25px );
    transform: rotateY( 0deg ) translateZ(  25px );
    /* 
        rotateY - поворачиваем грань на нужный угол
        translateZ - т.к. объект имеет толщину
    */
}
.back {
    width: 100%;
    height: 100%;
    -webkit-transform: rotateY( 180deg ) translateZ(  25px );
    -moz-transform: rotateY( 180deg ) translateZ(  25px );
    -ms-transform: rotateY(180deg) translateZ(  25px );
    -o-transform: rotateY( 180deg ) translateZ(  25px );
    transform: rotateY( 180deg ) translateZ(  25px );   /* в начальном положении фэйс карты к нам развернут на 180 градусов */
}
 
/*
    придаем выпуклости торцу 
    разбиваем его на две части и ставим их под небольшим углом друг к другу
    
*/
.left-1 {
    background-position: -250px 0;
    width: 28.5px;
            /*
                тут я немного схалтурил. реально размер половины грани равен 25px и при этом значении оставалась дырка между гранями
                в этом примере не стал пересчитывать толщину книги с учетом потерь из-за "выпуклости" торца
         */
    height: 100%;
    -webkit-transform: rotateY( -70deg ) translate3d(-3px, 0, 8px );
    -moz-transform: rotateY( -70deg ) translate3d(-3px, 0, 8px );
    -ms-transform: rotateY(-70deg) translate3d( -3px, 0, 8px );
    -o-transform: rotateY( -70deg ) translate3d( -3px, 0, 8px );
    transform: rotateY( -70deg ) translate3d( -3px, 0, 8px ); /*
                                                                                                                             8 получаем из решения прямоугольного треугольника (по известному углу и гипотенузе вычисляем катет) online решить можно тут [url]http://www.fxyz.ru/[/url]
                                                                                                                             -3 - костыль, подобранный в ручную для этого примера
                                                                                                                        */
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center; /* поворачиваю торцы вокруг их левой границы: так проще потом расположить элемент (в данном случае) */
}
.left-2 {
    background-position: -225px 0;
    width: 28px;
    height: 100%;
    -webkit-transform: rotateY( -110deg ) translate3d( -24.5px, 0, 8px );
    -moz-transform: rotateY( -110deg ) translate3d(  -24.5px, 0, 8px );
    -ms-transform: rotateY(-110deg) translate3d( -24.5px, 0, 8px );
    -o-transform: rotateY( -110deg ) translate3d( -24.5px, 0, 8px );
    transform: rotateY( -110deg ) translate3d( -24.5px, 0, 8px ); /*24.5 - тоже из решения прямоугольного треугольника - второй катет */
    
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}
 
.right {
    background-position: -276px 0;
    width: 50px;
    height: 100%;
    -webkit-transform: rotateY( 90deg );
    -moz-transform: rotateY( 90deg );
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY( 90deg );
    transform: rotateY( 90deg );
    top: 0;
    right:  0;
}

Рабочий пример http://xiper.net/examples/html... -book.html
Хочу реализовать подобное как на http://www.crystalfresh.com.ua/.
Нечто подобное реализовано на svg http://ruseller.com/lessons/le... index.html .
Как привязать начало вращения анимации на событие скрола страницы ?
Подскажите как продумать динамику , либо может есть библиотека которая делает данную красоту.

@BANO · 26.07.2016, 14:24

Вы туда фулпейдж плагин не положили...

@Rikko123 · 26.07.2016, 16:56 **[ТС]**

Прошу прощение , все есть в новом архиве во вложение.

@BANO · 26.07.2016, 22:17

Rikko123, да я не поленился скачать и подстроить пути...
Я думаю почему не работает... Скорее всего из-за того, что фулпейдж вызывает event.preventDefault().
Думается мне, что у фулпейдж должно быть какое-то событие. Посмотрите там в документации, должно быть что-то типа "pageChange".

@Rikko123 · 26.07.2016, 22:57 **[ТС]**

Я б с удовольствием, но знания по js оставляют желать лучшего( я не понимаю что делать. Если найду это событие то как мне его исправить?

@BANO · 26.07.2016, 23:03

Я уже нашёл, onLeave называется, в него просто перенести весь код анимации.

@Rikko123 · 27.07.2016, 02:30 **[ТС]**

Нифига себе , ты просто гений !!! Заработало, ща буду експерементировать с настройками , чтобы как-то поефектней крутилось , но оно работает при скроле , это просто шедеврально. Ты самый настящий гений , спасибо тебе.

@Rikko123 · 28.07.2016, 16:02 **[ТС]**

При смене экрана на адаптивной версии появился косяк, когда дезодорант начинает скролить пробелами.
От чего это может быть, может ли это быть связано с изменением размеров экрана и позиционирование данного изображения?

@BANO · 28.07.2016, 19:44

Это из-за того, что изначально анимация не рассчитана на телефоны. Она рассчитана на десктопы. А ещё мне кажется, что у вас у этого блока ширина не в пикселях, а в каких-нибудь процентах.

@Rikko123 · 28.07.2016, 21:19 **[ТС]**

Ширину указывал блока в пикселях, а вот в самом скрипте не совсем понимаю в чем указано.
Я так понял тоже пиксели только умножаются ?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
    pageSearch_h = innerHeight / 979;
                pageSearch_w = innerWidth / 1920;
                if (innerWidth / innerHeight > 16) {
                    sizeDeo_w = pageSearch_w * 150 * 1.86464646464;
                    sizeDeo_H = pageSearch_w * 198 * 1.86464646464;
                } else if (innerWidth / innerHeight < 2) {
                    sizeDeo_w = pageSearch_h * 391/ 1.86464646464;
                    sizeDeo_H = pageSearch_h * 391;
                } else {
                    sizeDeo_w = pageSearch_w * 150;
                    sizeDeo_H = pageSearch_h * 391;
                }

Здесь оптимальные значения на 1920px ,если экран уже, тогда просто слайдами матает.
В данном скрипте на самом сайте указаны такие значения

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
pageSearch_h =page_h / 979;
pageSearch_w =page_w / 1920;
if (page_w / page_h > 2 ){
    if (page_h == 643){
        sizeDeo_w =  pageSearch_w * 198 * 1.96464646464;
        sizeDeo_H =  pageSearch_w * 198 * 1.96464646464;
    }else if (page_h<660){
        sizeDeo_w =  pageSearch_w * 198 * 1.96004646464;
        sizeDeo_H =  pageSearch_w * 198 * 1.96004646464;
    }else{
        sizeDeo_w =  pageSearch_w * 198 * 1.96464646464;
        sizeDeo_H =  pageSearch_w * 198 * 1.96464646464;
    }
}else if (page_w / page_h < 1.9 ){
    sizeDeo_w =  pageSearch_h * 389 / 1.96464646464;
    sizeDeo_H =  pageSearch_h * 389;
}else {
    sizeDeo_w =  pageSearch_w * 198;
    sizeDeo_H =  pageSearch_h * 389;
}

строка

JavaScript
1
    }else if (page_h<660){

Я так понял отвечает за высоту экрана ?

@BANO · 29.07.2016, 11:31

Проблема в том, что эти if по идее должны быть для адаптивности, а вот нифига они для адаптивности не используются...
В общем то да, переменная отвечает за высоту, только не экрана, а видимой области. Так что вы это учтите при подборе констант

@Rikko123 · 21.08.2016, 12:33 **[ТС]**

Все никак не выходит настроить

Проблема в том , что при смене высоты он начинает мерцать . В ширину работает корректно до экрана 1075.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
          var sizeDeo_w = innerWidth,
        sizeDeo_H = innerHeight;
        pageSearch_h = innerHeight / 1080;
        pageSearch_w = innerWidth / 1075;
        if (innerWidth / innerHeight > 16) {
          sizeDeo_w = pageSearch_w * 150 * 2.99994646464;
          sizeDeo_H = pageSearch_w * 198 * 2.99994646464;
        } else if (innerWidth / innerHeight < 2) {
          sizeDeo_w = pageSearch_h * 391/ 2.99994646464;
          sizeDeo_H = pageSearch_h * 391;
        } else {
          sizeDeo_w = pageSearch_w * 150;
          sizeDeo_H = pageSearch_h * 391;
        }
        var deoScroll = 0;
        var refreshIntervalId = setInterval(function() {
          if (deoScroll < sizeDeo_H / 1.98464646464 * 26) {
            deoScroll = deoScroll + sizeDeo_H / 1.78299999999;  //строка которая регулирует мерцание на разной высоте
            $('.deo').css({
              'background-position': '-' + deoScroll + 'px 0'
            })
          } else {
            $('.deo').css({
              'background-position': 0 + 'px 0px'
            })
            clearInterval(refreshIntervalId);
          }
        }, 28)

JavaScript
1
2
        pageSearch_h = innerHeight / 1080;
        pageSearch_w = innerWidth / 1075;

Данные 2 строки отвечают за высоту экрана .
Когда меняем расширение экрана в ширину. Дезодорант работает нормально.
Когда меняем высоту экрана . Дезодорант начинает мерцать.

JavaScript
1
deoScroll = deoScroll + sizeDeo_H / 1.78299999999;

Данная строка отвечает за регулирование дезодоранта по высоте.
Проблема в том, что дезодорант можно настроить только для конкретной высоты экрана.
А мне необходимо до минимальной 600px.

Пытался указать максимальную ширину, видны проблемы.

JavaScript
1
2
        pageSearch_h = innerHeight / 1080; // максимальная высота 
        pageSearch_w = innerWidth / 1075;

Пытался указать минимальную ширину, тоже видны проблемы.

JavaScript
1
2
        pageSearch_h = innerHeight / 600; // минимальная высота 
        pageSearch_w = innerWidth / 1075;

Как сделать так, чтобы высота не влияла на его работу?

@Rikko123 · 24.08.2016, 11:43 **[ТС]**

Решение.
Нужно было прописать высоту деленную на ширину)

@Rikko123 · 31.08.2016, 12:39 **[ТС]**

Хотел бы уточнить .
По какому принципу данный дезодорант останавливается на перед последнем экране ?
сайт ( http://crystalfresh.com.ua )

@BANO · 31.08.2016, 14:04

Он просто улетает вверх вместе с этим "экраном".

@Rikko123 · 31.08.2016, 14:53 **[ТС]**

Это реализовано скриптом насколько я понял ?.
Могу ли я организовать такое на плагине fullpage.js
Как его можно зафиксировать в момент посещения секции.

JavaScript
1
$('.deo').css('position', 'absolute');

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

@BANO · 31.08.2016, 15:21

Есть там такой листнер, onLeave, и если это будет предпоследняя страница и направление вниз, то нужно будет анимировать поднятие этого дезодоранта.

@Rikko123 · 31.08.2016, 17:44 **[ТС]**

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
var doFullpage = document.documentElement.clientWidth;
             if (doFullpage > 1040) {
                $('#fullpage').fullpage({
                    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
                    anchors: ['firstPage', 'secondPage', '4rdPage', '5rdPage','6rdPage','7rdPage', '8rdPage'],
                    menu: '#menu',
                    loopTop: true,
                    loopBottom: true,
                    controlArrows: true,
 
            
       
 
 
        
 
 
 
 
     
 
 
 
 
      onLeave: function(index, nextIndex, direction){
 
 
          
 
 
                        function getWindowWidth() {
                       return window.innerWidth || document.body.clientWidth;
                      }
 
                      if (getWindowWidth() >= 1380) {
                         var sizeDeo_w = innerWidth,
        sizeDeo_h = 955;
        pageSearch_h = 955 / 1080;
        pageSearch_w = innerWidth / 1075;
        if (innerWidth / 955 > 16) {
          sizeDeo_w = pageSearch_w * 150 * 2.99994646464;
          sizeDeo_h = pageSearch_w * 198 * 2.99994646464;
        } else if (innerWidth / 955 < 2) {
          sizeDeo_w = pageSearch_h * 391/ 2.99994646464;
          sizeDeo_h = pageSearch_h * 391;
        } else {
          sizeDeo_w = pageSearch_w * 150;
          sizeDeo_h = pageSearch_h * 391;
        }
        var deoScroll = 0;
        var refreshIntervalId = setInterval(function() {
          if (deoScroll < sizeDeo_h / 1.78299999999 * 26) {
            deoScroll = deoScroll + sizeDeo_h / 1.78299999999;  
            $('.deo').css({
              'background-position': '-' + deoScroll + 'px 0'
            })
          } else {
            $('.deo').css({
              'background-position': 0 + 'px 0px'
            })
            clearInterval(refreshIntervalId);
          }
        }, 28)
       }
             if (getWindowWidth() <= 1379) {
                         var sizeDeo_w = innerWidth,
        sizeDeo_h = 955;
        pageSearch_h = 955 / 1080;
        pageSearch_w = innerWidth / 1075;
        if (innerWidth / 955 > 16) {
          sizeDeo_w = pageSearch_w * 150 * 2.99994646464;
          sizeDeo_h = pageSearch_w * 198 * 2.99994646464;
        } else if (innerWidth / 955 < 2) {
          sizeDeo_w = pageSearch_h * 391/ 2.99994646464;
          sizeDeo_h = pageSearch_h * 391;
        } else {
          sizeDeo_w = pageSearch_w * 150;
          sizeDeo_h = pageSearch_h * 391;
        }
        var deoScroll = 0;
        var refreshIntervalId = setInterval(function() {
          if (deoScroll < sizeDeo_h / 2.11642211111 * 26) {
            deoScroll = deoScroll + sizeDeo_h / 2.11642211111;  
            $('.deo').css({
              'background-position': '-' + deoScroll + 'px 0'
            })
          } else {
            $('.deo').css({
              'background-position': 0 + 'px 0px'
            })
            clearInterval(refreshIntervalId);
          }
        }, 28)
       }
 
 
 
           
 
                 
 
                 
 
 
 
                if(nextIndex == 8){
                    return false;
                }
 
            }
 
        });
 
             };

Это мой файл у меня уже указана данная функция

JavaScript
1
onLeave

Возможно это мне поможет ?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
 onLeave: function(index, nextIndex, direction){
            var leavingSection = $(this);
 
            //after leaving section 2
            if(index == 2 && direction =='down'){
                alert("Going to section 3!");
            }
 
            else if(index == 2 && direction == 'up'){
                alert("Going to section 1!");
            }
        }

Данный код я нашел на git https://github.com/alvarotrigo/fullPage.js/ .
Как анимировать поднятие дезодоранта, при скроле секции в низ ?

Добавлено через 2 часа 11 минут
Вернее как привязать анимацию поднятия дезодорант к секции ?

@Rikko123 · 04.09.2016, 14:25 **[ТС]**

Решение было реализовано таким способом.

JavaScript
1
2
3
4
5
6
7
8
9
10
var leavingSection = $(this);
 
            //after leaving section 2
            if(index == 2 && direction =='down'){
                alert("Going to section 3!");
            }
 
            else if(index == 2 && direction == 'up'){
                alert("Going to section 1!");
            }

Использовал данное решение.
На определенном экране он был скрыт. А для того чтобы он остался , была создана маска появления элемента.

Новые блоги и статьи Все статьи Все блоги /
[golang] Угол между стрелками часов alhaos 12.05.2026 По заданным значениям часа и минуты необходимо определить значение меньшего угла между стрелками аналогового циферблата часов. import "math" func angleClock(hour int, minutes int) float64 { . . .	Debian 13: Установка Lazarus QT5 ВитГо 09.05.2026 Эта инструкция моя компиляция инструкций volvo https:/ / www. cyberforum. ru/ blogs/ 203668/ 10753. html и его же старой инструкции по установке Lazarus с gtk2. . .	Нейросеть на алгоритме "эстафета хвоста" как перспектива. Hrethgir 06.05.2026 На десерт, когда запущу сервер. Статья тут https:/ / habr. com/ ru/ articles/ 1030914/ . Автор я сам, нейросеть только помогает в вопросах которые мне не известны - не знаю людей которые знали-бы. . .	Асинхронный приём данных из COM-порта Argus19 01.05.2026 Асинхронный приём данных из COM-порта Купил на aliexpress термопринтер QR701. Он оказался странным. Поключил к Arduino Nano. Был очень удивлён. Наотрез отказывается печатать русские буквы. Чтобы. . .
попытка написать игровой сервер на C++ pyirrlicht 29.04.2026 попытка написать игровой сервер на плюсах с открытым бесконечным миром. возможно получится прикрутить интерпретатор питон для кастомизации игровой логики. что есть на текущий момент:. . .	Контроль уникальности выбранного документа-основания при изменении реквизита Maks 28.04.2026 Алгоритм из решения ниже разработан на примере нетипового документа "ЗаявкаНаРемонтСпецтехники", разработанного в КА2. Задача: уведомлять пользователя, если указанная заявка (документ-основание). . .	Благородство как наказание Maks 24.04.2026 У хорошего человека отношения с женщинами всегда складываются трудно. А я человек хороший. Заявляю без тени смущения, потому что гордиться тут нечем. От хорошего человека ждут соответствующего. . .	Валидация и контроль данных табличной части документа перед записью Maks 22.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	26.07.2016, 14:24
	Вы туда фулпейдж плагин не положили... 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	26.07.2016, 22:17
	Rikko123, да я не поленился скачать и подстроить пути... Я думаю почему не работает... Скорее всего из-за того, что фулпейдж вызывает `event.preventDefault()`. Думается мне, что у фулпейдж должно быть какое-то событие. Посмотрите там в документации, должно быть что-то типа "pageChange". 0

@Rikko123 0 / 0 / 2 Регистрация: 04.02.2015 Сообщений: 54
	26.07.2016, 22:57 [ТС]
	Я б с удовольствием, но знания по js оставляют желать лучшего( я не понимаю что делать. Если найду это событие то как мне его исправить? 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	26.07.2016, 23:03
	Сообщение было отмечено Rikko123 как решение Решение Я уже нашёл, `onLeave` называется, в него просто перенести весь код анимации. 1

@Rikko123 0 / 0 / 2 Регистрация: 04.02.2015 Сообщений: 54
	27.07.2016, 02:30 [ТС]
	Нифига себе , ты просто гений !!! Заработало, ща буду експерементировать с настройками , чтобы как-то поефектней крутилось , но оно работает при скроле , это просто шедеврально. Ты самый настящий гений , спасибо тебе. 0

@Rikko123 0 / 0 / 2 Регистрация: 04.02.2015 Сообщений: 54
	28.07.2016, 16:02 [ТС]
	При смене экрана на адаптивной версии появился косяк, когда дезодорант начинает скролить пробелами. От чего это может быть, может ли это быть связано с изменением размеров экрана и позиционирование данного изображения? Миниатюры 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	28.07.2016, 19:44
	Это из-за того, что изначально анимация не рассчитана на телефоны. Она рассчитана на десктопы. А ещё мне кажется, что у вас у этого блока ширина не в пикселях, а в каких-нибудь процентах. 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	29.07.2016, 11:31
	Проблема в том, что эти if по идее должны быть для адаптивности, а вот нифига они для адаптивности не используются... В общем то да, переменная отвечает за высоту, только не экрана, а видимой области. Так что вы это учтите при подборе констант 0

@Rikko123 0 / 0 / 2 Регистрация: 04.02.2015 Сообщений: 54
	24.08.2016, 11:43 [ТС]
	Решение. Нужно было прописать высоту деленную на ширину) 0

@Rikko123 0 / 0 / 2 Регистрация: 04.02.2015 Сообщений: 54
	31.08.2016, 12:39 [ТС]
	Хотел бы уточнить . По какому принципу данный дезодорант останавливается на перед последнем экране ? сайт ( http://crystalfresh.com.ua ) 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	31.08.2016, 14:04
	Он просто улетает вверх вместе с этим "экраном". 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	31.08.2016, 15:21
	Есть там такой листнер, onLeave, и если это будет предпоследняя страница и направление вниз, то нужно будет анимировать поднятие этого дезодоранта. 0