Home/ Questions/Q 6864335
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T02:53:55+00:00

I’m trying to do smooth scroll between parts of my page. Basicly my aim

  • 0

I’m trying to do smooth scroll between parts of my page. Basicly my aim is to have similar effect like here: http://diablomedia.com/
So far: I have the menu, different backgrounds, i’m able to navigate, got smooth scroll from here: http://css-tricks.com/snippets/jquery/smooth-scrolling/ but the background is problem… it’s just… not smooth, I can’t explaint it more clearly so I just paste some of my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxx</title>

<style type="text/css">
html {
    background: #1d1d1d;
}

body {
    margin: 0;
    padding: 0;
    font: 10px normal Verdana, Arial, Helvetica, sans-serif;
    background: #1d1d1d;
}

h1 {
    font: 4.7em normal Georgia, 'Times New Roman', Times, serif;
    color: #fff;
    margin: 0;
    text-align: center;
    padding: 5px 0;
}

h1 small {
    font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.4em;
    display: block;
    color: #ccc;
}

.container {
    width: 100%;
    height: 80px;
    position: fixed;
    margin: 0 0 0 0;
    overflow: hidden;
    top: 0px;
    background: rgba(29, 29, 29, 0.85);
    z-index: 100;
}

.main_content1 {
    width: 100%;
    height: 1200px;
    display: block;
    position: relative;
    background:
        url("http://www.mega-tapety.info/resize/sztuka-tapety3d-1600-1200-3422.jpg")
        no-repeat fixed 50% 0 #FFFFFF;
    position: relative;
    display: block;
}

.main_content2 {
    width: 100%;
    height: 1200px;
    display: block;
    position: relative;
    background:
        url("http://www.tapety.nja.pl/images/wallpapers/26335506/Widoki/Niebo/17.jpg")
        no-repeat fixed 50% 0 #FFFFFF;
    position: relative;
}

.main_content3 {
    width: 100%;
    height: 1200px;
    display: block;
    position: relative;
    background:
        url("http://i.pinger.pl/pgr496/a03b8c70001f8f5d490da42f/pobrano-z-tapety.pinger.pl-29.jpg")
        no-repeat fixed 50% 0 #FFFFFF;
    position: relative;
}

.main_content4 {
    width: 100%;
    height: 1200px;
    display: block;
    position: relative;
    background:
        url("http://www.mega-tapety.info/wallpapers/krajobrazy/morzairzeki/390_4500_3.jpg")
        no-repeat fixed 50% 0 #FFFFFF;
    position: relative;
}

.main_content5 {
    width: 100%;
    height: 1200px;
    display: block;
    position: relative;
    background:
        url("http://i.pinger.pl/pgr448/ca9845940015a295490d848a/pobrano-z-tapety.pinger.pl-1D.jpg")
        no-repeat fixed 50% 0 #FFFFFF;
    position: relative;
}

.main_content6 {
    width: 100%;
    height: 1200px;
    display: block;
    position: relative;
    background:
        url("http://i.pinger.pl/pgr188/5b715190002669eb490d8488/pobrano-z-tapety.pinger.pl-1C.jpg")
        no-repeat fixed 50% 0 #FFFFFF;
    position: relative;
}

.main_content7 {
    width: 100%;
    height: 1200px;
    display: block;
    position: relative;
    background: url("http://skkf.net/pulpity/7tapeta.jpg") no-repeat fixed
        50% 0 #FFFFFF;
    position: relative;
}

.main_content8 {
    width: 100%;
    height: 1200px;
    display: block;
    position: relative;
    background:
        url("http://zdjecia-fotografia.com/wp-content/uploads/2011/01/tapety-na-pulpit-samochody3.jpg")
        no-repeat fixed 50% 0 #FFFFFF;
}

.text_container {
    width: 80%;
    position: absolute;
    margin-left: 10%;
    margin-top: 80px;
}

img {
    border: none;
}

ul#topnav {
    margin: 0 0 0 18%;
    padding: 0;
    list-style: none;
    font-size: 1.1em;
    clear: both;
    float: left;
    width: 60%;
    padding: 0;
}

ul#topnav li {
    margin: 0;
    padding: 0;
    overflow: hidden;
    float: left;
    height: 40px;
}

ul#topnav a,ul#topnav span {
    padding: 10px 20px;
    float: left;
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    clear: both;
    height: 20px;
    line-height: 20px;
}

ul#topnav a {
    color: #7bc441;
}

ul#topnav span {
    display: none;
}
</style>
<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document)
            .ready(
                    function() {

                        $("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag

                        $("#topnav li").each(function() { //For each list item...
                            var linkText = $(this).find("a").html(); //Find the text inside of the a tag
                            $(this).find("span").show().html(linkText); //Add the text in the span tag
                        });

                        $("#topnav li").hover(function() { //On hover...
                            $(this).find("span").stop().animate({
                                marginTop : "-40" //Find the span tag and move it up 40 pixels
                            }, 250);
                        }, function() { //On hover out...
                            $(this).find("span").stop().animate({
                                marginTop : "0" //Move the span back to its original state (0px)
                            }, 250);
                        });

                        function filterPath(string) {
                            return string.replace(/^\//, '').replace(
                                    /(index|default).[a-zA-Z]{3,4}$/, '')
                                    .replace(/\/$/, '');
                        }
                        var locationPath = filterPath(location.pathname);
                        var scrollElem = scrollableElement('html', 'body');

                        $('a[href*=#]')
                                .each(
                                        function() {
                                            var thisPath = filterPath(this.pathname)
                                                    || locationPath;
                                            if (locationPath == thisPath
                                                    && (location.hostname == this.hostname || !this.hostname)
                                                    && this.hash.replace(/#/,
                                                            '')) {
                                                var $target = $(this.hash), target = this.hash;
                                                if (target) {
                                                    var targetOffset = $target
                                                            .offset().top;
                                                    $(this)
                                                            .click(
                                                                    function(
                                                                            event) {
                                                                        event
                                                                                .preventDefault();
                                                                        $(
                                                                                scrollElem)
                                                                                .animate(
                                                                                        {
                                                                                            scrollTop : targetOffset
                                                                                        },
                                                                                        1000,
                                                                                        function() {
                                                                                            location.hash = target;
                                                                                        });
                                                                    });
                                                }
                                            }
                                        });

                        // use the first element that is "scrollable"
                        function scrollableElement(els) {
                            for ( var i = 0, argLength = arguments.length; i < argLength; i++) {
                                var el = arguments[i], $scrollElement = $(el);
                                if ($scrollElement.scrollTop() > 0) {
                                    return el;
                                } else {
                                    $scrollElement.scrollTop(1);
                                    var isScrollable = $scrollElement
                                            .scrollTop() > 0;
                                    $scrollElement.scrollTop(0);
                                    if (isScrollable) {
                                        return el;
                                    }
                                }
                            }
                            return [];
                        }
                    });
</script>
</head>

<body>

    <div class="container">
        <h1>
            <small>Navatar.pl</small>
        </h1>
        <br />
        <ul id="topnav">
            <li><a href="#1">Dojedź szybciej</a>
            </li>
            <li><a href="#2">mCB</a>
            </li>
            <li><a href="#3">Pogadaj ze znajomymi</a>
            </li>
            <li><a href="#4">Check-in</a>
            </li>
            <li><a href="#5">Xplore</a>
            </li>
            <li><a href="#6">About</a>
            </li>
            <li><a href="#7">Cos</a>
            </li>
            <li><a href="#8">Jeszcze</a>
            </li>
        </ul>
    </div>
    <div class="main_content1" id="1"></div>
    <div class="main_content2" id="2"></div>
    <div class="main_content3" id="3"></div>
    <div class="main_content4" id="4"></div>
    <div class="main_content5" id="5"></div>
    <div class="main_content6" id="6"></div>
    <div class="main_content7" id="7"></div>
    <div class="main_content8" id="8"></div>
</body>
</html>

I know it looks awful but I’m still learning 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    well the thing is: open my page, and diablo media page… when you
    scroll down mine, one background is covered with another, while on
    their site one background, let say, moves up insted of being covered

    This is because diablomedia.com is using a parallax scrolling effect which allows the different backgrounds to scroll at different speeds, giving it the illusion you are talking about.

    Here is a link to a tutorial and more information about this parallax scrolling technique: One page website, vertical parallax

    I hope this is more of what you were looking for.

    • 0