Problème de transition AjaxLoad
Résolu
Sparkflo
Messages postés
32
Statut
Membre
-
Sparkflo Messages postés 32 Statut Membre -
Sparkflo Messages postés 32 Statut Membre -
Salut ! J'ai téléchargé mon site web sur un hébergeur payant et, j'ai réalisé que les transitions entre les pages ne fonctionnaient pas comme d'habitude. Je pense que l'actualisation de la page n'est pas faite correctement et crée une collision avec le z-index. Je ne sais pas assez en js pour résoudre le problème seul ..
Site bugé : https://heysen.fr
Site qui lui, est fonctionnel : http://flusha.000webhostapp.com/
Mon hébergeur : https://www.ionos.fr/
Côté JS (Attention aux yeux) :
Pour l'html ça donne ça tout simplement :
Ps : Je ne sais pas exactement si c'est bien Ajax qui fait bug les transitions, je peux fournir tous le script s'il faut :)
Site bugé : https://heysen.fr
Site qui lui, est fonctionnel : http://flusha.000webhostapp.com/
Mon hébergeur : https://www.ionos.fr/
Côté JS (Attention aux yeux) :
/*--------------------------------------------------
Function Ajax Load
---------------------------------------------------*/
function AjaxLoad() {
jQuery(document).ready(function(){
var isAnimating = false,
newLocation = '';
firstLoad = false;
//trigger smooth transition from the actual page to the new one
$('main').on('click', '[data-type="page-transition"]', function(event){
event.preventDefault();
//detect which page has been selected
var newPage = $(this).attr('href');
//if the page is not already being animated - trigger animation
if( !isAnimating ) changePage(newPage, true);
firstLoad = true;
});
//detect the 'popstate' event - e.g. user clicking the back button
$(window).on('popstate', function() {
if( firstLoad ) {
/*
Safari emits a popstate event on page load - check if firstLoad is true before animating
if it's false - the page has just been loaded
- / var newPageArray = location.pathname.split('/'), //this is the url of the page to be loaded newPage = newPageArray[newPageArray.length - 1]; if( !isAnimating && newLocation != newPage ) changePage(newPage, false); } firstLoad = true; }); function changePage(url, bool) { isAnimating = true; // trigger page animation $('body').addClass('page-is-changing'); $('.cd-cover-layer').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ loadNewContent(url, bool); newLocation = url; $('.cd-cover-layer').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend'); }); //if browser doesn't support CSS transitions if( !transitionsSupported() ) { loadNewContent(url, bool); newLocation = url; } } function loadNewContent(url, bool) { url = ('' == url) ? 'index.html' : url; var section = $('<div class="cd-main-content "></div>'); section.load(url+' .cd-main-content > *', function(event){ // load new content and replace <main> content with the new one FullPageDestroy(); $('main').html(section); var clapat_title = event.match(/<title[^>]*>([^<]+)<\/title>/)[1]; $('head title').html( clapat_title ); //if browser doesn't support CSS transitions - dont wait for the end of transitions var delay = ( transitionsSupported() ) ? 30 : 0; setTimeout(function(){ $('body').removeClass('page-is-changing'); $('.cd-cover-layer').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ isAnimating = false; $('.cd-cover-layer').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend'); }); ga('set', 'page', '/' + url); ga('send', 'pageview'); FirstLoad(); HeroSection(); FullPage(); LazyLoad(); MasonryPortfolio(); NextProject(); Sliders(); FooterAppear(); Lightbox(); AppearIteam(); BackToTop(); ContactForm(); CollagePlus(); PageShare(); ContactMap(); if( !transitionsSupported() ) isAnimating = false; }, delay); if(url!=window.location && bool){ window.history.pushState({path: url},'',url); } }); } function transitionsSupported() { return $('html').hasClass('csstransitions'); } }); }// End Ajax Load
Pour l'html ça donne ça tout simplement :
<a class="ajax-link" data-type="page-transition" href="index.html">
Ps : Je ne sais pas exactement si c'est bien Ajax qui fait bug les transitions, je peux fournir tous le script s'il faut :)
A voir également:
- Problème de transition AjaxLoad
- Transition imovie télécharger - Télécharger - TV & Vidéo
- Transition capcut - Télécharger - Montage & Édition
- Logiciel transition musique automatique ✓ - Forum Enregistrement / Traitement audio
- Télécharger transition morphose powerpoint gratuit - Forum Powerpoint
- Recherche logiciel audio fondu enchainé - Forum Audio
Merci beaucoup haha !