CODEWITHSUNDEEP
htmlcss
patrickstarpants
patrickstarpants

Reputation: 69

CSS Transition between nearly identical pages

I have two pages, index.html and about.html, both using the same CSS styling.

On my website, two of the links are About and Home. The only difference between these two pages is the paragraph text displayed (the nav and footer are identical).

How would I create a transition for the page/text when the about link is clicked from the home page or vice versa?

A default ease transition is what I'm looking for, and let's say I gave the paragraphs an id = "target"

In my css file, would I do something like

#target {
    transition: 1s;
}

I have no idea what css property I would need to specify.

Upvotes: 0

Views: 145

Answers (1)

Elliott Quick
Elliott Quick

Reputation: 316

It will require some JavaScript or JQuery.

HTML

<a id="homeLink">Home</a>
<a id="aboutLink">About</a>

<p id="targetHome">This is the home Paragraph...</p>
<p id="targetAbout" class="hidden">This is the about Paragraph...</p>

JS

$(document).on("click", "#aboutLink", function(e){
    e.preventDefault(); //Prevent the <a> element from redirecting
    $("#targetHome:visible").hide("fade", 300, function(){
       $("#targetAbout:hidden").show("fade", 300); //Show About Paragraph if hidden
    });
});

$(document).on("click", "#homeLink", function(e){
    e.preventDefault(); //Prevent the <a> element from redirecting
    $("#targetAbout:visible").hide("fade", 300, function(){
       $("#targetHome:hidden").show("fade", 300); //Show Home Paragraph if hidden
    });
});

Upvotes: 1

Related Questions