Having a navigation bar onclick/href execute animation on a circle element then loading a new page - How?
Question
I have a circle class element .circle and a navigation bar on a demo homepage home.html . I need clicking on one of the navigation's elements href to resume.html) to do an animation (growing its dimension) to have it matched in size to a similar element .circleRe on the linked page (resume.html) and only then move to that page. So, how to delay loading the second page while doing the animation?
PS The circle also response to hovering (and slightly enlarging it to have a text.)
I've tried using JavaScript and had partial success, but it seems that the href cancels the animation effect. @keyframes does not seem to be the right solution
nav { overflow: hidden; background-color: #333; position: fixed; z-index: 10 } nav a { font-family: DoubleBass; font-weight: normal; float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } nav a:hover { background-color: #ddd; color: black; } .circle { background: #D73309; opacity: 0.7; width: 37.5vmin; height: 37.5vmin; border-radius: 50%; margin: 0 auto; position: fixed; z-index: 1; top: -100px; right: -70px; -webkit-transition: width 1.2s, height 1.2s, box-shadow 1.2s; /* Safari */ transition: width 1.2s, height 1.2s, box-shadow 1.2s; } .quotes { opacity: 0; font-size: .9em; line-height: 120%; padding: 70px 0px 0px 20px; } .circle:hover { width: 60vmin; height: 60vmin; opacity: 1; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .circle:hover .quotes { opacity: 1; -webkit-transition: opacity 1.2s; transition: opacity 1.2s; } .circleRe { background: #D73309; opacity: 1; width: 140vmax; height: 140vmax; border-radius: 50%; margin: 0 auto; position: absolute; z-index: 1; top: -500px; right: -400px; }
<header> <nav> <a href="home.html">Home</a> <a href="resume.html">Resume</a> <a href="archive.html">Archive</a> <a href="films.html">Films</a> </nav> </header> <body> <div class="circle"> <p class="quotes"></p> </div> </body>
1 answers
solution1
0 2019-10-16 13:08:27
$('.links').click(function(e) { e.preventDefault(); //Show the UI Loader here $('.loaders').show(); setTimeout(function() { //Hide the UI Loader after 5 seconds $('.loaders').hide(); }, 5000); });
nav { overflow: hidden; background-color: #333; position: fixed; z-index: 10 } nav a { font-family: DoubleBass; font-weight: normal; float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } nav a:hover { background-color: #ddd; color: black; } .circle { background: #D73309; width: 37.5vmin; height: 37.5vmin; border-radius: 50%; margin: 0 auto; position: fixed; z-index: 100; top: -100px; right: -70px; -webkit-transition: width 1.2s, height 1.2s, box-shadow 1.2s; /* Safari */ transition: width 1.2s, height 1.2s, box-shadow 1.2s; } .quotes { opacity: 0; font-size: .9em; line-height: 120%; padding: 70px 0px 0px 20px; } .loaders { border: 16px solid #f3f3f3; border-top: 16px solid #3498db; border-radius: 50%; animation: spin 2s linear infinite; position: fixed; width: 100%; height: 100%; z-index: 1000; top: 0px; left: 0px; opacity: .5; /* in FireFox */ filter: alpha(opacity=50); /* in IE */ } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <header> <nav> <a id='lnkHome' class='links' href="JavaScript:void(0);">Home</a> <a id='lnkResume' class='links' href="JavaScript:void(0);">Resume</a> <a id='lnkArchieve' class='links' href="JavaScript:void(0);">Archive</a> <a id='lnkFilms' class='links' href="JavaScript:void(0);">Films</a> </nav> </header> <body> <div class="circle"> <p class="quotes"> </p> </div> <div class="loaders" style="display:none;"></div> </body>
Note:- Show loader on click and after some times, you can hide that loader. so the user will not be able to interact with DOM(UI).
Hope this helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.