Отключить анимацию в зависимости от размера экрана
Я использую waypoints.js для анимации, и у меня есть следующие возможности для работы
$(document).ready(function(){
"use strict";
$('.slogan').waypoint(function(direction) {
$('.onelogo').toggleClass('hide', direction === 'down');
});
});
Но единственная проблема с вышесказанным заключается в том, что анимация все еще воспроизводится на мобильном телефоне, поэтому после прочтения я попытался реализовать следующее
$(document).ready(function(){
$(window).resize(function () {
width=$(window).width();
if (width > 950){
var waypoints = document.querySelectorAll('.slogan');
for (var i = waypoints.length - 1; i >= 0; i--) {
var waypoint = new Waypoint({
element: waypoints[i],
handler: function(direction) {
this.element.classList.toggle('.hide');
},
offset: '60%',
});
}
} else {
// less then 950 px.
if ($(".onelogo").hasClass(".hide")) {
$(".onelogo").removeClass(".hide");
}
}
});
});
Но при этом анимация вообще не воспроизводится
html
<div class = "slogan">
<img class = "onelogo" src = "http://via.placeholder.com/350x150">
</div>
css
.slogan {
display: block;
position: absolute;
right: 10%;
top: 40%;
line-height: 34px;
color: #949494;
z-index: 10;
}
.onelogo {
display: block;
height: 110px;
width: auto;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.hide {
opacity: 0;
margin-top: -29vh;
}
Можете ли вы также опубликовать свой html / css? возможно рабочий пример?
В приведенном выше коде есть синтаксическая ошибка в конструкторе путевой точки. Удалите запятую после свойства смещения. Также removeClass и toggle принимают имя класса («скрыть»), а не селектор класса («.name»).
Ответы 3
Я не знаком с путевыми точками, но вы можете попытаться обернуть свою логику в функцию, а затем вызвать ее как на $(document).ready, так и на $(window).resize:
function toggleAnimation(){
width=$(window).width();
if (width > 950){
var waypoints = document.querySelectorAll('.slogan');
for (var i = waypoints.length - 1; i >= 0; i--) {
var waypoint = new Waypoint({
element: waypoints[i],
handler: function(direction) {
this.element.classList.toggle('.hide');
},
offset: '60%',
});
}
} else {
// less then 950 px.
if ($(".onelogo").hasClass(".hide")) {
$(".onelogo").removeClass(".hide");
}
}
}
и звони ...
$(document).ready(function(){
toggleAnimation();
$(window).resize(function(){
toggleAnimation();
});
})
Вам нравится останавливать анимацию, когда размер экрана меньше 950 пикселей? Не знаю, но думаю, можно попробовать вот что:
var waypoints = null;
$(document).ready(function() {
$(window).resize(function () {
width=$(window).width();
if (width > 950) {
...
} else if (waypoints != null) {
waypoints.disable() //or waypoints.destroy() if new instance
}
});
});
Самый простой способ сделать это - добавить путевую точку на $(document).ready() и вызвать путевую точку включить / запрещать в зависимости от размера окна.
<script>
var waypoint;
function handleWayPoint() {
var $width = $(window).width();
console.info($width);
if ($width > 950) {
waypoint[0].enable();
}
else {
waypoint[0].disable();
}
}
$(document).ready(function(){
"use strict";
waypoint= $('.slogan').waypoint(function(direction) {
$('.onelogo').toggleClass('hide', direction === 'down');
});
handleWayPoint();
$(window).resize(function() {
handleWayPoint();
});
});
</script>
В дополнение к ошибкам, которые я упомянул в своих комментариях, основная проблема с другим вашим кодом заключается в этой строке: this.element.classList.toggle('.hide');this в JavaScript работает совершенно иначе, чем на других языках (например, Java, C++). Обычно this в JavaScript устанавливается в объект слева от оператора точки (хотя есть исключения). В этом посте более подробно.
Я знаю, как использовать медиа-запросы, но медиа-запросы не будут делать то, что мне нужно, класс hide не скрывает, он прокручивается вверх и скрывает это, не показывать его вообще
Ну тогда вы можете опубликовать свой html / css?
Поскольку ваша функция изменяет размер, при первой загрузке страницы ничего не произойдет. Я не знаком с waypoints.js, поэтому я не могу дать слишком много конкретных советов, но первое, что нужно попробовать, - это добавить функцию для запуска события изменения размера в самом конце вашей функции, после самой функции изменения размера . Просто выполните
$(window).resize()внутри$(document).ready, чтобы запустить функцию, которую вы только что выполнили при загрузке страницы.