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!");
            }

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

Новые блоги и статьи Все статьи Все блоги /
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main(). . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/

@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