Показывать элемент после прокрутки экрана [дубликат]
В Internet Explorer 7, 8 и amp; 9, это работает:
function getZoom() {
var screen;
screen = document.frames.screen;
return ((screen.deviceXDPI / screen.systemXDPI) * 100 + 0.9).toFixed();
}
Добавлен «+0.9», чтобы предотвратить ошибки округления (в противном случае вы получите 104% и 109%, если масштаб браузера установлен на 105% и 110% соответственно ).
В IE6 масштабирования не существует, поэтому нет необходимости проверять масштаб.
1 ответ
Вам нужно будет использовать JS или jQuery для запуска вашего перехода / анимации CSS3, когда элемент находится в видовом окне **.
jsFiddle demo - Использование плагина inViewport
прослушивает события load, resize и scroll, чтобы получить , если элемент вошел в Viewport . Вы можете использовать небольшой плагин jQuery, который я создал: ( https://stackoverflow.com/a/26831113/383904 )
Предположим, у вас есть коробки, которые оживляют:
<div class="box rotate"></div>
<div class="box scale"></div>
<div class="box translate"></div>
, чем в вашем CSS:
.box{
width:300px;
height:300px;
margin:500px 50px;
background:red;
transition: 1.5s; /* THE DURATION */
}
.rotate.triggeredCSS3 {transform : rotate(360deg); }
.scale.triggeredCSS3 {transform : scale(1.6); }
.translate.triggeredCSS3 {transform : translate3d(400px,0,0); }
, где плагин .triggeredCSS3 будет динамически назначаться плагином:
$(".box").inViewport(function(px){
if(px) $(this).addClass("triggeredCSS3") ;
});
-
1Извините, я создал файл .js с плагином выше - & gt; Добавил его к моему index.html - & gt; Отредактировал мой .css-файл, добавив .triggeredCSS3 в .example_animations - & gt; НО теперь ни одна из анимаций не работает! @Roko C. Buljan – Ajith 13 December 2014 в 20:17
-
2@Ajith вы включили плагин jQuery в начале вашей страницы? – Roko C. Buljan 13 December 2014 в 20:20
-
3– Ajith 13 December 2014 в 20:21
-
4Извините, это не работает! – Ajith 13 December 2014 в 20:21
-
5Это отлично поработало для меня. Благодаря! – probablybest 17 February 2015 в 14:52