• Почему тормозит css анимация при загрузки конента во фрейме?

    @IoannGrozny
    Front-end разработчик
    попробуйте добавить к анимированному блоку следующее свойство:
    transform: translatez(0);
    Это свойство принудительно включает аппаратное ускорение графики. Но не уверен, что это панацея.
    Ответ написан
    Комментировать
  • Как сделать в FullPage.js прокрутку через один блок?

    @lolzqq
    HTML,CSS,JS,PHP
    Если вызывать какие-либо прокрутки слайдов/секций в событии onLeave - мы вызываем бесконечный цикл рекурсий (fullpage там что-то внутри себя бесконечно пытается сделать и не может выйти из цикла). Обходим это через глобальный флаг. В коде всё закомментировал, можете почитать-изучить

    <!doctype html>
    <html lang="ru">
    <head>
      <meta charset="utf-8" />
      <title></title>
      <link rel="stylesheet" type="text/css" href="/fullpage/fullpage.css" />
            <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    	<script src="/fullpage/vendors/easings.min.js"></script>
    	<script type="text/javascript" src="/fullpage/vendors/scrolloverflow.min.js"></script>
    	<script type="text/javascript" src="/fullpage/fullpage.js"></script>
    </head>
    <body>
    	<div id="fullpage">
    	<div class="section" id="slide1">1</div>
    	<div class="section" id="slide2">2</div>
    	<div class="section" id="slide3">3</div>
    	<div class="section" id="slide4">4</div>
    	</div>
    
    	<script>
    	// этой переменной будем отмечать готовность fullpage крутить на третью секцию
    	window.scrollto3=false; 
    	// создаём таймер, который каждые 100мс будет отслеживать window.scrollto3==true;
    	// который по-готовности делает прокрутку с первой секции сразу до третьей
    	let timer=setInterval(function(){ 
    		if(window.scrollto3==true){
    			// пользуемся fullpage_api для прокрутки на нужную секцию
    			fullpage_api.moveTo(3);
    			// возвращаем маркер готовности прокрутки до третьей секции в исходное состояние
    			window.scrollto3=false;
    		}
    	},100);
    	
    	$(document).ready(function(){
    		$('#fullpage').fullpage({
    
    				navigationPosition: 'left',
    				navigation:true,
    				navigationTooltips: ['Дальний', 'Ближний', 'Воздух', 'Земля'],
    				showActiveTooltip: false,
    				menu: '#menu',
    				scrollingSpeed: 1000,
    
    				onLeave: function(origin, destination, direction) {
    							// если сейчас юзер пытается уйти вниз с 0-ой (первой) секции 
    							if(origin.index == 0 && direction =='down'){
    								// если пункт назначения - вторая секция
    								if(destination.index == 1){
    									// ставим маркер готовности к прокрутке до третьего слайда
    									window.scrollto3=true;
    									// запрещаем прокрутку до следующего слайда, которая делается по-умолчанию
    									return false;
    								}
    							}
    				}
    		})
    		
    	})
    	</script>
    </body>
    </html>
    Ответ написан
    4 комментария