CODEWITHSUNDEEP
jqueryhtmlcsscss-transitionstransition
Warren Breedlove
Warren Breedlove

Reputation: 55

Scrolling website where background remains stationary and content transitions on click or scroll

Im looking for a template or a place that teaches how to create a website like these for example:

http://www.refletcommunication.com/en https://www.artistsweb.com/work

Where the page basically stays the same but you can kinda scroll through and the content changes. Or click links and the content changes. but background stay neutral.

I hope this is a valid question. I've designed a portfolio site for myself which would have this effect just not sure what its called so i can learn how to code it. It would have content on the main page with links on the right hand side. and if you scroll or click a link the content will transition to the new content. while the background remains stationary.

hope that makes sense! Thanks

Upvotes: 0

Views: 489

Answers (1)

Tomáš Kudláč
Tomáš Kudláč

Reputation: 99

If I understand your question correctly then the one way which I use is to stack divs with position: absolute at top of each other and then just switch the active class which will indicate which element is currently visible and this class will have z-index: 100 or 1000 or any number which you want but it has to be higher than number of stacked elements. In HTML you will add the class active to the element which will be visible after loading the page. Then with JS you will change the element which has the class active. In JS I use:

jQuery: https://jquery.com/download/
jQuery Mouse Wheel Plugin: https://github.com/jquery/jquery-mousewheel

HTML: 

<div class="container">
    <div class="vertically-stacked active"> //first visible bannner
        <h1>Hello</h1>
    </div>
    <div class="vertically-stacked">  //visible only if class active is added
        <h1>World</h1>
    </div>
</div>

You may have infinite number of vertically-stacked elements.

CSS:

.container    //container of vertically stacked elements
{
    position: relative    //or absolute but not static 
}

.vertically-stacked
{
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all .25s;   //time which takes to switch the active element
    -moz-transition: all .25s;
    -o-transition: all .25s;
    -webkit-transition: all .25s;
}

.vertically-stacked.active
{
    opacity: 1;
    z-index: 100;
}

JS:

$(document).on('mousewheel', function (e)
{
    var $verticallyStacked = $('.vertically-stacked'),
        oldActive = $verticallyStacked.index($('.vertically-stacked.active')),
        newActive;

    $verticallyStacked.eq(oldActive).removeClass('active');
    if (e.deltaY < 0) //scroll down
    {       
        newActive = oldActive + 1;
    }
    else //scroll up
    {
        newActive = oldActive - 1;
    }
    $verticallyStacked.eq(newActive).addClass('active');
});

Upvotes: 1

Related Questions