Support » Fixing WordPress » Transitions between pages

  • melba11

    (@melba11)


    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 1 week, 6 days 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 🙂

    tugbucket

    (@tugbucket)

    @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)
  • You must be logged in to reply to this topic.