로딩 이미지 애니메이션이 포함 된 html 페이지 간 원활한 전환

이것은 찾고있는 excatly입니다. http://hoverstud.io . 나는 이와 같은 것을 찾고 있지 않다 ->http://bit.ly/11jdunO, 너무 많은 이슈와 버그가있다.로딩 이미지 애니메이션이 포함 된 html 페이지 간 원활한 전환

튜토리얼이나 링크를 찾을 수 있습니까?

출처

2013-06-06 Rahul

사용중인 언어 및 환경은 무엇입니까? –

HTML과 CSS를 사용하는 단순한 페이지 – Rahul

링크를 클릭 할 때 '본문'을 페이드 아웃 한 다음 리디렉션 한 다음 새 페이지의 '본문'을 페이드 인 할 수 있습니다. 너가 원하는게 그거야 ? – Brewal

난 당신이 정확하게 원하는 것을 잘 모르겠어요하지만 당신은 같은 코드를 사용할 수

$(document).ready(function(){ 
    // to fade in on page load 
    $("body").css("display", "none"); 
    $("body").fadeIn(400); 
    // to fade out before redirect 
    $('a').click(function(e){ 
     redirect = $(this).attr('href'); 
     e.preventDefault(); 
     $('body').fadeOut(400, function(){ 
      document.location.href = redirect 
     }); 
    }); 
})

그것은 전체 페이지를 사라질 것이다. 페이지의 일부만 페이드하고 싶다면 body을 원하는대로 변경하십시오.

출처

2013-06-06 10:04:51 Brewal

거의 해결책을 얻었다. 그것을 여기에서 공유하는 것> http://blog.cergis.com/posts/11/html5-history-api – Rahul

저는 이것을 위해 몇 가지 새롭고 더 깨끗한 도구를 사용할 것입니다. 요즘에는 CSS 전환을 사용하여이를 수행 할 수 있습니다.

<html> 
    <head> 
    <style> 
     .container { 
     opacity: 0; 
     transition: opacity 1s; 
     } 

     .container-loaded { 
     opacity: 1; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="container"> 
     <!-- All the content you want to fade-in here. --> 
    </div> 
    <script> 
     $(document).ready(function() { 
     $('.container').addClass('container-loaded'); 
     }); 
    </script> 
    </body> 
</html>

내가 페이지를 다시로드되면 container-loaded 클래스가 사라되도록 페이지 사이의 전환, 전체 페이지를 다시로드 것을 여기에 있으리라 믿고있어 :

여기 아주 간단한 예입니다.

그러나 널리 사용되는 프레임 워크 인 Turbolinks 또는 그와 비슷한 것을 사용하여 한 페이지 웹 앱에 대해이를 구현하는 것은 거의 쉽지 않습니다.

더 가지주의해야 할 :

당신은 페이지의 이미지뿐만 아니라로드 될 때까지 대기 할 경우 document.onload 대신 $(document).ready() 사용할 수 있습니다.
document.querySelector 및 classLists을 사용할 수있는 경우 jQuery를 사용하지 않으면 구현하기가 거의 쉬울 것입니다.

출처

2014-09-13 02:22:37 GeReV

이것은 내가 찾고 있었던 정확하게 그 정보를위한 TYVM이었다. –

작업 예제를 붙여주세요. 나는 시도했다 : http://wklej.org/id/1635681/ 다른 웹 사이트에 갈 때 아무 일도 일어나지 않는다. – Yoda

지나치게 길게 지연되는 것을 핑계로한다면, 여기에 실습 데모가 있습니다. http://jsfiddle.net/n0b7w5bq/ – GeReV

나는 이와 비슷한 것을 만들었습니다. 이

<div id="preloader"></div>

같은 사업부에 HTML에 #preloader 당신이, 당신이에 내부에있는 GIF를 배치 할 수 있습니다하려면

첫번째 장소.

그런 설정 일부 CSS :

#preloader { 
     background: #FFF; 
     bottom: 0; 
     left: 0; 
     position: fixed; 
     right: 0; 
     top: 0; 
     z-index: 9999; 
    }

지금이 같은 일부 스크립트합니다

$(window).load(function() { 
    $('#preloader').delay(350).fadeOut('slow'); 
}); 

$('a').click(function(e){ 
    e.preventDefault(); 
    t = $(this).attr('href'); 
    $('#preloader').delay(350).fadeIn('slow',function(){ 
      window.location.href = t; 
    }); 
});

을 그리고 당신은

첫 번째 부분이 프리 로더 때 나타날 수 있도록하는 것입니다 :) 완료 창이로드되고 fadeOut입니다.

두 번째는 프리 로더의 클릭을 바인딩하여 프리 로더를 페이드 인하 고 아서의 href로 리디렉션하는 것입니다.

출처

2015-06-13 01:19:56

로딩 이미지 애니메이션이 포함 된 html 페이지 간 원활한 전환

답변

관련 문제