Creating a "Splash Screen Div" for a loading page involves waiting until everything is loaded and then hiding or moving the div off screen. Below is an example:
index.html
<div id="loading-Div">
<div id="bear-Logo">
<div id="target">
<div id="target2">
<div id="bearloop"></div>
</div>
</div>
</div>
</div>
loading.css
Use a class called 'fallback' to move the absolutely positioned div offscreen.
loading.js
$(window).load(function(){
$( '#loading-Div' ).addClass( 'fallback' );
});
This method works well when clicking a link and displaying the div while the page loads. However, there's a desire to show the div immediately upon clicking the link and keep it visible until the destination page is fully loaded.
Workflow:
Key Points:
Implementing this feature may require a browser plugin because:
- The link doesn't lead to another anchor within the same page.
- Since the link directs to a different .html page, the content being displayed would halt during the transition.
Note:
- This functionality is limited to intra-site usage only.
- No concern for compatibility with IE.
- This is not associated with any academic assignment or client project. It's solely for learning web development and experimenting with creative page transitions.
Exploring options without using animations and callbacks for outgoing links to display the div smoothly can be challenging. Balancing coherence with file size becomes an important consideration. Any suggestions on how to tackle this issue are welcome!