JQuery时间轴timeline插件的学习-Lateral On-Scroll Sliding with jQuery+technotarek / timeliner

忘是亡心i 2021-12-22 08:59 259阅读 0赞

**一、Lateral On-Scroll Sliding with jQuery的使用**

![LateralOnScrollSliding][]

[View demo][]      [Download source][]

1. HTML结构

<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">Some title</a>
            </div>
            <div class="ss-right">
                <h3>
                    <span>November 28, 2011</span>
                    <a href="#">Some Title</a>
                </h3>
            </div>
        </div>
        <div class="ss-row ss-large"> // ss-row ss-small
        ...
        </div>
        
    </div>

![Image 1][]

2. CSS

.ss-container{
        
        width: 100%;   position: relative;  text-align: left;  float: left;
        overflow: hidden;    // don’t show scrollbar on the page
        padding-bottom: 500px;
    }
    /*create the middle line throughout the container */
    .ss-container:before{
        
        position: absolute;
        width: 4px;
        background: rgba(17,17,22,0.8);
        top: 0px;
        left: 50%;     // position in the middle of the container
        margin-left: -2px;
        content: '';
        height: 100%;
    }
    .ss-row{
         width: 100%;clear: both; float: left; position: relative; padding: 30px 0;}
    .ss-left, .ss-right{
          float: left;  width: 48%;  position: relative;}
    .ss-right{
         padding-left: 2%;}
    .ss-left{
         text-align: right;   float: left;  padding-right: 2%;}
    .ss-container h2{
         font-size: 40px; text-transform: uppercase; color: rgba(78,84,123,0.2); text-shadow: 0px 1px 1px #fff; padding: 20px 0px;}
    .ss-container h3{
         margin-top: 34px;padding: 10px 15px;background: rgba(26, 27, 33, 0.6); text-shadow: 1px 1px 1px rgba(26, 27, 33, 0.8)}
    
    /* create a circle, set the border radius of the anchor to 50% and add some neat box shadow*/
    .ss-circle{
        
        border-radius: 50%;
        overflow: hidden;
        display: block;
        text-indent: -9000px;
        text-align: left;
        box-shadow:
            0px 2px 5px rgba(0,0,0,0.7) inset,
            0px 0px 0px 12px rgba(61,64,85,0.3);
        background-size: cover;
        background-color: #f0f0f0;
        background-repeat: no-repeat;
        background-position: center center;
    }
    /*three different circle sizes*/
    .ss-small .ss-circle{
         width: 100px; height: 100px;}
    .ss-medium .ss-circle{
         width: 200px; height: 200px;}
    .ss-large .ss-circle{
         width: 300px;height: 300px;}
    .ss-left .ss-circle{
         float: right; margin-right: 30%;}
    .ss-right .ss-circle{
         float: left; margin-left: 30%;}
    
    /*the line and the arrow that will point to the middle line*/
    .ss-circle-deco:before{
        
        width: 29%;
        height: 0px;
        border-bottom: 5px dotted #ddd;
        border-bottom: 5px dotted rgba(17, 17, 22, 0.3);
        box-shadow: 0px 1px 1px #fff;
        position: absolute;
        top: 50%;
        content: '';
        margin-top: -3px;
    }
    .ss-left .ss-circle-deco:before{
         right: 2%;  }
    .ss-right .ss-circle-deco:before{
         left: 2%;  }
    /* little arrow will be created by the border style and depending on if it’s a child of the left or right side*/
    .ss-circle-deco:after{
        
        width: 0px;
        height: 0px;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        content: '';
        position: absolute;
        top: 50%;
        margin-top: -10px;
    }
    .ss-left .ss-circle-deco:after{
         right: 0; border-right: 10px solid rgba(17,17,22,0.8);}
    .ss-right .ss-circle-deco:after{
         left: 0;border-left: 10px solid rgba(17,17,22,0.8);}
    /*adjust the position of the headings on the other side according to circle sizes*/
    .ss-container .ss-medium h3{
         margin-top: 82px;}
    .ss-container .ss-large h3{
         margin-top: 133px;}
    .ss-container .ss-left h3{
         border-right: 5px solid rgba(164,166,181,0.8);}
    .ss-container .ss-right h3{
         border-left: 5px solid rgba(164,166,181,0.8);}
    
    /*others*/
    .ss-container h3 span{
         color: rgba(255,255,255,0.8); font-size: 13px;display: block; padding-bottom: 5px;}
    .ss-container h3 a{
         font-size: 28px; color: rgba(255,255,255,0.9);display: block;}
    .ss-container h3 a:hover{
          color: rgba(255,255,255,1);}
    /*Each circle is going to have a different background image*/
    .ss-circle-1{
         background-image:url(../images/1.jpg);}
    .ss-circle-2{
         background-image: url(../images/2.jpg);}
    .ss-circle-3{
         background-image: url(../images/3.jpg);}
    /* and so on... */

3. JQuery

3.1 变量定义

// 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 = true,
        perspective = hasPerspective && Modernizr.csstransforms3d,

3.2 初始化

// 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();   
    },

3.3 function部分

/*defines a selector that gathers the row elements that are initially visible. An 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 )     
    },
    /*gets the window width and height*/
    getWinSize = function() { 
        winSize.width   = $win.width();
        winSize.height  = $win.height(); 
    },

3.4 初始化event

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 );         
            }
        }); 
    },

3.5 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). This value should be 0% (final position) when the element is in 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 };

**二、 Technotarek - timeliner**

项目地址： [https://github.com/technotarek/timeliner][https_github.com_technotarek_timeliner]

应用网站：

*  [http://www.investigatingpower.org/timelines/mccarthyism/][http_www.investigatingpower.org_timelines_mccarthyism]
 *  [http://www.ncld-youth.info/index.php?id=61][http_www.ncld-youth.info_index.php_id_61]

1、HTML结构

<div id="timelineContainer" class="timelineContainer">
        <div class="timelineMajor">
            <h2 class="timelineMajorMarker">Major Marker</h2>
    <dl class="timelineMinor"> 
    
                <dt id="event01"><a>Event</a></dt>
                <dd class="timelineEvent" id="event01EX" style="display: none; ">
                    <p>Content about the event goes here.</p>
                </dd>
            </dl>
            <dl class="timelineMinor">
                <dt id="event02"><a>Another Event</a></dt>
                <dd class="timelineEvent" id="event02EX" style="display: none; ">
                    <p>Content about the other event.</p>
                </dd>
            </dl>
        </div>
    </div>

1.  引人screen.css和timeliner.js (or timeliner.min.js). `div id="timelineContainer" class="timelineContainer"> ... </div>`
2.  `内容<div class="timelineMajor">`
3.  将event包裹在DT和A标签中，并赋予唯一的id号： `<dt id="19540517"><a>Brown vs Board of Education</a></dt>`
4.  每个event包裹在隐藏（display为'none'）的DD标签中，其类名为 'timeline', id以EX结尾
    
        <dd class="timelineEvent" id="19540517EX" style="display: none;">  ...  </dd>
5.  实例化:   `$.timeliner();`
6.  实例化多个timeline:
    
        $.timeliner({timelineContainer: '#timelineContainer_1'}); $.timeliner({timelineContainer: '#timelineContainer_2'});
7.  实例化参数:
    
        $.timeliner({
            timelineContainer: '#timelineContainer', // value: selector of the main element holding the timeline's content, default to #timelineContainer
            startState: 'closed', // value: closed | open, default to closed; determines whether the timeline is initially collapsed or fully expanded
            startOpen: [], // value: array of IDs of single timelineEvents, default to empty; determines the minor event that you want to display open by default on page load
            baseSpeed: 200, // value: any integer, default to 200; determines the base speed, some animations are a multiple (4x) of the base speed
            speed: 4, // value: numeric, defalut to 4; a multiplier applied to the base speed that sets the speed at which an event's conents are displayed and hidden
            fontOpen: '1.2em', // value: any valid CSS font-size value, defaults to 1em; sets the font size of an event after it is opened
            fontClosed: '1em', // value: any valid CSS font-size value, defaults to 1em; sets the font size of an event after it is closed
            expandAllText: '+ expand all', // value: string; defaults to '+ expand all'
            collapseAllText: '- collapse all' // value: string; defaults to '- collapse all'
        });
8.   id以Ex结尾，如\['\#event01EX'\] 或\['\#event01EX','\#event02EX'\]， 表明该timeline event默认是打开状态，见 http://www.technotarek.com/timeliner/timeliner.htm
9.  加入expandAll选项:   `<div class="timelineToggle"><p><a class="expandAll">+ expand all</a></p></div>`

转载于:https://www.cnblogs.com/JoannaQ/p/3555174.html

[LateralOnScrollSliding]: http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2011/12/LateralOnScrollSliding.jpg
[View demo]: http://tympanus.net/Tutorials/LateralOnScrollSliding/
[Download source]: http://tympanus.net/Tutorials/LateralOnScrollSliding/LateralOnScrollSliding.zip
[Image 1]: 
[https_github.com_technotarek_timeliner]: https://github.com/technotarek/timeliner
[http_www.investigatingpower.org_timelines_mccarthyism]: http://www.investigatingpower.org/timelines/mccarthyism/
[http_www.ncld-youth.info_index.php_id_61]: http://www.ncld-youth.info/index.php?id=61