Transitions between pages

  • Hi everyone, a newbie here with a rather silly question. I love video editing and I’m about to start making my first website. I want to create a sort of a fade-in/fade-out transition from one page to another, so when a link button is clicked, the whole page gradually deeps to black. How do I do that in the WP editor?

    • This topic was modified 2 years, 6 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic
Viewing 3 replies - 1 through 3 (of 3 total)
  • <script>
(function($){
    $(function(){
        $("a").on("click", function(e){
			var href = $(this).attr("href");
			e.preventDefault();
			$("html").css({"background-color":"#000"});
			$("body").fadeTo("2000", 0, function(){
				window.location.href = href;
			});
		});
    });
})(jQuery)
</script>

    simple but does what you want.

    click a link. capture the href value. prevent default behavior. give you html tag a black background. fade the entire body tag and it’s contents to 0 opacity over 2 seconds. redirect user to the above link href.

    Thread Starter melba11

    (@melba11)

    Thanks a lot! May I ask where on the page should I put this? My knowledge of coding is pretty basic so far ??

    @melba11 Not sure how you go about adding JS to your site. If you add it to a global JS file that’ll work.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Transitions between pages’ is closed to new replies.