纵向鱼骨图风格的时间线网页模板

时间轴向下滚动时，该时间点的描述内容从两边渐变滑入。

模板，教程

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2149
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html>
<html lang="en">

<body>
    <div class="container">
        <h1>Lateral On-Scroll Sliding with jQuery</h1>
        <h2 class="ss-subtitle">Codrops Timeline</h2>
        <div id="ss-links" class="ss-links">
            <a href="#november">Nov</a>
            <a href="#october">Oct</a>
            <a href="#september">Sep</a>
            <a href="#august">Aug</a>
            <a href="#july">Jul</a>
            <a href="#june">Jun</a>
        </div>
        <div id="ss-container" class="ss-container">
            <div class="ss-row">
                <div class="ss-left">
                    <h2 id="november">November</h2>
                </div>
                <div class="ss-right">
                    <h2>2011</h2>
                </div>
            </div>
            <div class="ss-row ss-medium">
                <div class="ss-left">
                    <a href="#" class="ss-circle ss-circle-1">Typography Effects with CSS3 and jQuery</a>
                </div>
                <div class="ss-right">
                    <h3>
                            <span>November 28, 2011</span>
                            <a href="#">Typography Effects with CSS3 and jQuery</a>
                        </h3>
                </div>
            </div>
            <div class="ss-row ss-large">
                <div class="ss-left">
                    <h3>
                            <span>November 22, 2011</span>
                            <a href="#">Hover and Click Trigger for Circular Elements with jQuery</a>
                        </h3>
                </div>
                <div class="ss-right">
                    <a href="#" class="ss-circle ss-circle-2">Hover and Click Trigger for Circular Elements with jQuery</a>
                </div>
            </div>
            <div class="ss-row ss-small">
                <div class="ss-left">
                    <a href="#" class="ss-circle ss-circle-3">Elastic Image Slideshow with Thumbnail Preview</a>
                </div>
                <div class="ss-right">
                    <h3>
                            <span>November 21, 2011</span>
                            <a href="#">Elastic Image Slideshow with Thumbnail Preview</a>
                        </h3>
                </div>
            </div>
            <div class="ss-row ss-medium">
                <div class="ss-left">
                    <h3>
                            <span>November 18, 2011</span>
                            <a href="#">Fullscreen Image Blur Effect with HTML5</a>
                        </h3>
                </div>
                <div class="ss-right">
                    <a href="#" class="ss-circle ss-circle-4">Fullscreen Image Blur Effect with HTML5</a>
                </div>
            </div>
            <div class="ss-row ss-large">
                <div class="ss-left">
                    <a href="#" class="ss-circle ss-circle-5">Interactive Typography Effects with HTML5</a>
                </div>
                <div class="ss-right">
                    <h3>
                            <span>November 9, 2011</span>
                            <a href="#">Interactive Typography Effects with HTML5</a>
                        </h3>
                </div>
            </div>
            <div class="ss-row ss-small">
                <div class="ss-left">
                    <a href="#" class="ss-circle ss-circle-6">Animated Buttons with CSS3</a>
                </div>
                <div class="ss-right">
                    <h3>
                            <span>November 7, 2011</span>
                            <a href="#">Animated Buttons with CSS3</a>
                        </h3>
                </div>
            </div>
            <div class="ss-row ss-medium">
                <div class="ss-left">
                    <h3>
                            <span>November 2, 2011</span>
                            <a href="#">Original Hover Effects with CSS3</a>
                        </h3>
                </div>
                <div class="ss-right">
                    <a href="#" class="ss-circle ss-circle-7">Original Hover Effects with CSS3</a>
                </div>
            </div>
            <div class="ss-row">
                <div class="ss-left">
                    <h2 id="october">October</h2>
                </div>
                <div class="ss-right">
                    <h2>2011</h2>
                </div>
            </div>
            <div class="ss-row ss-small">
                <div class="ss-left">
                    <h3>
                            <span>October 31, 2011</span>
                            <a href="#">Fullscreen Image 3D Effect with CSS3 and jQuery</a>
                        </h3>
                </div>
                <div class="ss-right">
                    <a href="#" class="ss-circle ss-circle-8">Fullscreen Image 3D Effect with CSS3 and jQuery</a>
                </div>
            </div>
            <div class="ss-row ss-large">
                <div class="ss-left">
                    <a href="#" class="ss-circle ss-circle-9">Creative CSS3 Animation Menus</a>
                </div>
                <div class="ss-right">
                    <h3>
                            <span>October 24, 2011</span>
                            <a href="#">Creative CSS3 Animation Menus</a>
                        </h3>
                </div>
            </div>
            <div class="ss-row ss-medium">
                <div class="ss-left">
                    <a href="#" class="ss-circle ss-circle-10">Blur Menu with CSS3 Transitions</a>
                </div>
                <div class="ss-right">
                    <h3>
                            <span>October 19, 2011</span>
                            <a href="#">Blur Menu with CSS3 Transitions</a>
                        </h3>
                </div>
            </div>
            <div class="ss-row ss-large">
                <div class="ss-left">
                    <h3>
                            <span>October 17, 2011</span>
                            <a href="#">Wave Display Effect with jQuery</a>
                        </h3>
                </div>
                <div class="ss-right">
                    <a href="#" class="ss-circle ss-circle-11">Wave Display Effect with jQuery</a>
                </div>
            </div>
            <div class="ss-row ss-small">
                <div class="ss-left">
                    <a href="#" class="ss-circle ss-circle-12">Flexible Slide-to-top Accordion</a>
                </div>
                <div class="ss-right">
                    <h3>
                            <span>October 12, 2011</span>
                            <a href="#">Flexible Slide-to-top Accordion</a>
                        </h3>
                </div>
            </div>
            <div class="ss-row ss-medium">
                <div class="ss-left">
                    <h3>
                            <span>October 10, 2011</span>
                            <a href="#">Circle Navigation Effect with CSS3</a>
                        </h3>
                </div>
                <div class="ss-right">
                    <a href="#" class="ss-circle ss-circle-13">Circle Navigation Effect with CSS3</a>
                </div>
            </div>
            <div class="ss-row ss-large">
                <div class="ss-left">
                    <a href="#" class="ss-circle ss-circle-14">Draggable Image Boxes Grid</a>
                </div>
                <div class="ss-right">
                    <h3>
                            <span>October 7, 2011</span>
                            <a href="#">Draggable Image Boxes Grid</a>
                        </h3>
                </div>
            </div>
            <div class="ss-row">
                <div class="ss-left">
                    <h2 id="september">September</h2>
                </div>
                <div class="ss-right">
                    <h2>2011</h2>
                </div>
            </div>
            <div class="ss-row ss-small">
                <div class="ss-left">
                    <h3>
                            <span>September 30, 2011</span>
                            <a href="#">Scrollbar Visibility with jScrollPane</a>
                        </h3>
                </div>
                <div class="ss-right">
                    <a href="#" class="ss-circle ss-circle-15">Scrollbar Visibility with jScrollPane</a>
                </div>
            </div>
            <div class="ss-row ss-medium">
                <div class="ss-left">
                    <a href="#" class="ss-circle ss-circle-16">Multi-level Photo Map</a>
                </div>
                <div class="ss-right">
                    <h3>
                            <span>September 27, 2011</span>
                            <a href="#">Multi-level Photo Map</a>
                        </h3>
                </div>
            </div>
            <div class="ss-row ss-large">
                <div class="ss-left">
                    <a href="#" class="ss-circle ss-circle-17">Responsive Image Gallery with Thumbnail Carousel</a>
                </div>
                <div class="ss-right">
                    <h3>
                            <span>September 20, 2011</span>
                            <a href="#">Responsive Image Gallery with Thumbnail Carousel</a>
                        </h3>
                </div>
            </div>
            <div class="ss-row ss-small">
                <div class="ss-left">
                    <h3>
                            <span>September 12, 2011</span>
                            <a href="#">Elastislide - A Responsive jQuery Carousel Plugin</a>
                        </h3>
                </div>
                <div class="ss-right">
                    <a href="#" class="ss-circle ss-circle-18">Elastislide - A Responsive jQuery Carousel Plugin</a>
                </div>
            </div>
            <div class="ss-row ss-medium">
                <div class="ss-left">
                    <a href="#" class="ss-circle ss-circle-19">Slicebox - A fresh 3D image slider with graceful fallback </a>
                </div>
                <div class="ss-right">
                    <h3>
                            <span>September 5, 2011</span>
                            <a href="#">Slicebox - A fresh 3D image slider with graceful fallback </a>
                        </h3>
                </div>
            </div>
            <div class="ss-row">
                <div class="ss-left">
                    <h2 id="august">August</h2>
                </div>
                <div class="ss-right">
                    <h2>2011</h2>
                </div>
            </div>
            <div class="ss-row ss-large">
                <div class="ss-left">
                    <h3>
                            <span>August 30, 2011</span>
                            <a href="#">Automatic Image Montage with jQuery</a>
                        </h3>
                </div>
                <div class="ss-right">
                    <a href="#" class="ss-circle ss-circle-20">Automatic Image Montage with jQuery</a>
                </div>
            </div>
            <div class="ss-row ss-medium">
                <div class="ss-left">
                    <a href="#" class="ss-circle ss-circle-21">Image Zoom Tour with jQuery</a>
                </div>
                <div class="ss-right">
                    <h3>
                            <span>August 23, 2011</span>
                            <a href="#">Image Zoom Tour with jQuery</a>
                        </h3>
                </div>
            </div>
            <div class="ss-row ss-small">
                <div class="ss-left">
                    <h3>
                            <span>August 16, 2011</span>
                            <a href="#">Circular Content Carousel with jQuery</a>
                        </h3>
                </div>
                <div class="ss-right">
                    <a href="#" class="ss-circle ss-circle-22">Circular Content Carousel with jQuery</a>
                </div>
            </div>
            <div class="ss-row ss-large">
                <div class="ss-left">
                    <a href="#" class="ss-circle ss-circle-23">Portfolio Image Navigation with jQuery</a>
                </div>
                <div class="ss-right">
                    <h3>
                            <span>August 9, 2011</span>
                            <a href="#">Portfolio Image Navigation with jQuery</a>
                        </h3>
                </div>
            </div>
            <div class="ss-row ss-medium">
                <div class="ss-left">
                    <h3>
                            <span>August 4, 2011</span>
                            <a href="#">Expanding Fullscreen Grid Portfolio</a>
                        </h3>
                </div>
                <div class="ss-right">
                    <a href="#" class="ss-circle ss-circle-24">Expanding Fullscreen Grid Portfolio</a>
                </div>
            </div>
            <div class="ss-row">
                <div class="ss-left">
                    <h2 id="july">July</h2>
                </div>
                <div class="ss-right">
                    <h2>2011</h2>
                </div>
            </div>
            <div class="ss-row ss-small">
                <div class="ss-left">
                    <a href="#" class="ss-circle ss-circle-25">Content Rotator with jQuery</a>
                </div>
                <div class="ss-right">
                    <h3>
                            <span>July 29, 2011</span>
                            <a href="#">Content Rotator with jQuery</a>
                        </h3>
                </div>
            </div>
            <div class="ss-row ss-large">
                <div class="ss-left">
                    <h3>
                            <span>July 22, 2011</span>
                            <a href="#">Vertical Sliding Accordion with jQuery</a>
                        </h3>
                </div>
                <div class="ss-right">
                    <a href="#" class="ss-circle ss-circle-26">Vertical Sliding Accordion with jQuery</a>
                </div>
            </div>
            <div class="ss-row ss-medium">
                <div class="ss-left">
                    <a href="#" class="ss-circle ss-circle-27">Animated Text and Icon Menu with jQuery</a>
                </div>
                <div class="ss-right">
                    <h3>
                            <span>July 12, 2011</span>
                            <a href="#">Animated Text and Icon Menu with jQuery</a>
                        </h3>
                </div>
            </div>
            <div class="ss-row ss-small">
                <div class="ss-left">
                    <h3>
                            <span>July 5, 2011</span>
                            <a href="#">Fullscreen Slideshow with HTML5 Audio and jQuery</a>
                        </h3>
                </div>
                <div class="ss-right">
                    <a href="#" class="ss-circle ss-circle-30">Fullscreen Slideshow with HTML5 Audio and jQuery</a>
                </div>
            </div>
            <div class="ss-row ss-large">
                <div class="ss-left">
                    <a href="#" class="ss-circle ss-circle-28">Sliding Background Image Menu with jQuery</a>
                </div>
                <div class="ss-right">
                    <h3>
                            <span>July 3, 2011</span>
                            <a href="#">Sliding Background Image Menu with jQuery</a>
                        </h3>
                </div>
            </div>
            <div class="ss-row">
                <div class="ss-left">
                    <h2 id="june">June</h2>
                </div>
                <div class="ss-right">
                    <h2>2011</h2>
                </div>
            </div>
            <div class="ss-row ss-small">
                <div class="ss-left">
                    <h3>
                            <span>June 9, 2011</span>
                            <a href="#">Grid Navigation Effects with jQuery</a>
                        </h3>
                </div>
                <div class="ss-right">
                    <a href="#" class="ss-circle ss-circle-29">Grid Navigation Effects with jQuery</a>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="/uploads/160101/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="https://tympanus.net/Tutorials/LateralOnScrollSliding/js/jquery.easing.1.3.js"></script>
    <script type="text/javascript">
        $(function() {

var $sidescroll = (function() {

// the row elements
                var $rows = $('#ss-container > div.ss-row'),
                    // we will cache the inviewport rows and the outside viewport rows
                    $rowsViewport, $rowsOutViewport,
                    // navigation menu links
                    $links = $('#ss-links > a'),
                    // the window element
                    $win = $(window),
                    // we will store the window sizes here
                    winSize = {},
                    // used in the scroll setTimeout function
                    anim = false,
                    // page scroll speed
                    scollPageSpeed = 2000,
                    // page scroll easing
                    scollPageEasing = 'easeInOutExpo',
                    // perspective?
                    hasPerspective = false,

perspective = hasPerspective && Modernizr.csstransforms3d,
                    // initialize function
                    init = function() {

// get window sizes
                        getWinSize();
                        // initialize events
                        initEvents();
                        // define the inviewport selector
                        defineViewport();
                        // gets the elements that match the previous selector
                        setViewportRows();
                        // if perspective add css
                        if (perspective) {
                            $rows.css({
                                '-webkit-perspective': 600,
                                '-webkit-perspective-origin': '50% 0%'
                            });
                        }
                        // show the pointers for the inviewport rows
                        $rowsViewport.find('a.ss-circle').addClass('ss-circle-deco');
                        // set positions for each row
                        placeRows();

},
                    // defines a selector that gathers the row elems that are initially visible.
                    // the element is visible if its top is less than the window's height.
                    // these elements will not be affected when scrolling the page.
                    defineViewport = function() {

$.extend($.expr[':'], {

inviewport: function(el) {
                                if ($(el).offset().top < winSize.height) {
                                    return true;
                                }
                                return false;
                            }

});

},
                    // checks which rows are initially visible 
                    setViewportRows = function() {

$rowsViewport = $rows.filter(':inviewport');
                        $rowsOutViewport = $rows.not($rowsViewport)

},
                    // get window sizes
                    getWinSize = function() {

winSize.width = $win.width();
                        winSize.height = $win.height();

},
                    // initialize some events
                    initEvents = function() {

// navigation menu links.
                        // scroll to the respective section.
                        $links.on('click.Scrolling', function(event) {

// scroll to the element that has id = menu's href
                            $('html, body').stop().animate({
                                scrollTop: $($(this).attr('href')).offset().top
                            }, scollPageSpeed, scollPageEasing);

return false;

});

$(window).on({
                            // on window resize we need to redefine which rows are initially visible (this ones we will not animate).
                            'resize.Scrolling': function(event) {

// get the window sizes again
                                getWinSize();
                                // redefine which rows are initially visible (:inviewport)
                                setViewportRows();
                                // remove pointers for every row
                                $rows.find('a.ss-circle').removeClass('ss-circle-deco');
                                // show inviewport rows and respective pointers
                                $rowsViewport.each(function() {

$(this).find('div.ss-left')
                                        .css({
                                            left: '0%'
                                        })
                                        .end()
                                        .find('div.ss-right')
                                        .css({
                                            right: '0%'
                                        })
                                        .end()
                                        .find('a.ss-circle')
                                        .addClass('ss-circle-deco');

});

},
                            // when scrolling the page change the position of each row  
                            'scroll.Scrolling': function(event) {

// set a timeout to avoid that the 
                                // placeRows function gets called on every scroll trigger
                                if (anim) return false;
                                anim = true;
                                setTimeout(function() {

placeRows();
                                    anim = false;

}, 10);

}
                        });

},
                    // sets the position of the rows (left and right row elements).
                    // Both of these elements will start with -50% for the left/right (not visible)
                    // and this value should be 0% (final position) when the element is on the
                    // center of the window.
                    placeRows = function() {

// how much we scrolled so far
                        var winscroll = $win.scrollTop(),
                            // the y value for the center of the screen
                            winCenter = winSize.height / 2 + winscroll;

// for every row that is not inviewport
                        $rowsOutViewport.each(function(i) {

var $row = $(this),
                                // the left side element
                                $rowL = $row.find('div.ss-left'),
                                // the right side element
                                $rowR = $row.find('div.ss-right'),
                                // top value
                                rowT = $row.offset().top;

// hide the row if it is under the viewport
                            if (rowT > winSize.height + winscroll) {

if (perspective) {

$rowL.css({
                                        '-webkit-transform': 'translate3d(-75%, 0, 0) rotateY(-90deg) translate3d(-75%, 0, 0)',
                                        'opacity': 0
                                    });
                                    $rowR.css({
                                        '-webkit-transform': 'translate3d(75%, 0, 0) rotateY(90deg) translate3d(75%, 0, 0)',
                                        'opacity': 0
                                    });

} else {

$rowL.css({
                                        left: '-50%'
                                    });
                                    $rowR.css({
                                        right: '-50%'
                                    });

}

}
                            // if not, the row should become visible (0% of left/right) as it gets closer to the center of the screen.
                            else {

// row's height
                                var rowH = $row.height(),
                                    // the value on each scrolling step will be proporcional to the distance from the center of the screen to its height
                                    factor = (((rowT + rowH / 2) - winCenter) / (winSize.height / 2 + rowH / 2)),
                                    // value for the left / right of each side of the row.
                                    // 0% is the limit
                                    val = Math.max(factor * 50, 0);

if (val <= 0) {

// when 0% is reached show the pointer for that row
                                    if (!$row.data('pointer')) {

$row.data('pointer', true);
                                        $row.find('.ss-circle').addClass('ss-circle-deco');

}

} else {

// the pointer should not be shown
                                    if ($row.data('pointer')) {

$row.data('pointer', false);
                                        $row.find('.ss-circle').removeClass('ss-circle-deco');

}

// set calculated values
                                if (perspective) {

var t = Math.max(factor * 75, 0),
                                        r = Math.max(factor * 90, 0),
                                        o = Math.min(Math.abs(factor - 1), 1);

$rowL.css({
                                        '-webkit-transform': 'translate3d(-' + t + '%, 0, 0) rotateY(-' + r + 'deg) translate3d(-' + t + '%, 0, 0)',
                                        'opacity': o
                                    });
                                    $rowR.css({
                                        '-webkit-transform': 'translate3d(' + t + '%, 0, 0) rotateY(' + r + 'deg) translate3d(' + t + '%, 0, 0)',
                                        'opacity': o
                                    });

} else {

$rowL.css({
                                        left: -val + '%'
                                    });
                                    $rowR.css({
                                        right: -val + '%'
                                    });

}

});

};

return {
                    init: init
                };

})();

$sidescroll.init();

});
    </script>
</body>

</html>

时间轴向下滚动时，该时间点的描述内容从两边渐变滑入。

模板，教程

编辑器支持Emmet

快捷键

时间轴向下滚动时，该时间点的描述内容从两边渐变滑入。

模板，教程

很棒的可滑动三分视图布局页面模板

使用CSS3实现切片风格的图片滑动面板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：