CODEWITHSUNDEEP
javascriptjqueryhtmlcsstransition
user3236223
user3236223

Reputation: 11

Transition between web pages

I have 4 different html web pages. Each contains only a background photo. I want to make a site with the following:

However, I need the browser view to slide horizontally upon navigation to the next page. How can I do this?

Additionally, all my images are 1280x800, and I am worried about them fitting inside browser windows with low resolutions, since I do not want to have a scroll bar.

Upvotes: 0

Views: 3419

Answers (3)

Josh Powell
Josh Powell

Reputation: 6297

Updated answer with a script!

I made this a while ago and figure it could help you out greatly and give you an idea.

What I am doing is fading in and out the main divs based on which nav link is clicked. It acts as if it was a multi-page website but in reality it is just fading one in and the other out.

Here is how the html structure should look:

<nav>
    <ul class="mainNav">
        <li class="active"><a href="#" id="home">Home</a></li>
        <li><a href="#" id="about">About Us</a></li>
        <li><a href="#" id="port">Portfolio</a></li>
        <li><a href="#" id="contact">Contact</a></li>
    </ul>
</nav>
<div id="wrapper-home" class="body active">
    <p>Here is some content!</p>
</div>
<!-- Etc, etc, etc -->

Now the script that makes this happen, with the use of css:

$('ul.mainNav li a').on('click', function() {
    $('ul.mainNav li a').parent().removeClass('active');
    $(this).parent().addClass('active');
    var id = $(this).attr('id');
    var wrapper = $('#wrapper-' + id);

    $('.body').removeClass('active');
    $(wrapper).addClass('active');
});

finally, a fiddle: Demo

-1. You can set the image as a background-image. Then in your css you can add the follow:

background-image: url("yourImageUrl.jpg");
background-size: cover;
background-position: center center;

That will allow the image to fit the entire page and keep the images proportions.

-2. The best option, in my eyes, is to make everything on one page. Then you hide and show the divs that contain the info while adding a transition effect.

Upvotes: 1

Mark
Mark

Reputation: 3272

Nr 1. Place a background using CSS and set background-size to cover.

Nr 2. Make an onclick on a span. And style it as a button.

<span onclick="goToPage('home.html')">Home</span>

Javascript:

function goToPage(page){
 $(document).ready(function(){
  $('body').fadeOut(2000, function(){
   window.location=page;
  });
 });
}

Upvotes: 0

S..
S..

Reputation: 5758

You could remove the href target of your links and replace with a javascript function which performs a transition and then page change

Old link:

<a href="page.html">link to next page</a>

New link:

<a href="javascript:transitionTo('page.html');">link to next page</a>

Then with some javascript:

function transitionToPage(sNewPage){
    // insert your transition out fade effect code here
    window.location = sNewPage;
}

If you also want to handle transitioning into a page, then I recommend having a default blank type look for the page, then onload transition from that to the content

$(document).ready(function(){
    // insert your transition code from blank page or whatever default to desired look
});

This will however only be JS compatable, and not work in ~1.5% of browsers. So I recommend actually using a lazy link load technique:

<a class="lazy_load_link" href="page.html">link to next page</a>
$(document).ready(function(){
    var sTarget = $(".lazy_load_link").attr("href");
    $(".lazy_load_link").attr("javascript:transitionToPage('"+sTarget+"');');
});

Upvotes: 0

Related Questions