logo DevAnswer - Developers Answer

Long Timeline with More Button

16th February

Preview


Source Code
                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&display=swap");

@-webkit-keyframes fadeIn {
    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    100% {
        opacity: 1;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
    color: inherit;
    list-style: none;
}

html,
body {
    margin: 0;
    padding: 0;
}

main {
    display: block;
}

img {
    width: 100%;
    vertical-align: middle;
}

a {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    line-height: 1.5;
}

html {
    font-family: "Noto Sans TC", sans-serif;
    font-size: 10px;
}

#timeline {
    padding: 50px 50px 200px;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    background-color: #f7f7f7;
}

    #timeline h1 {
        font-size: 2.5rem;
        text-align: center;
        font-weight: 500;
    }

    #timeline ul {
        padding: 0;
        margin: 50px 0;
        display: flex;
        flex-wrap: wrap;
        position: relative;
    }

        #timeline ul::before {
            content: "";
            width: 12px;
            height: 12px;
            background-color: #ffcc00;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-60%);
        }

@media (max-width: 768px) {
    #timeline ul::before {
        display: none;
    }
}

#timeline ul::after {
    content: "";
    width: 0px;
    height: 100%;
    border: 1px dashed #ffcc00;
    position: absolute;
    top: 0;
    right: 50%;
    display: none;
    z-index: 1;
}

@media (max-width: 768px) {
    #timeline ul::after {
        display: block;
    }
}

#timeline ul li {
    position: relative;
    flex-basis: 50%;
    padding-bottom: 30px;
    z-index: 2;
}

@media (max-width: 768px) {
    #timeline ul li {
        flex-basis: 100%;
        padding-bottom: 40px;
    }
}

#timeline ul li:nth-child(odd) {
    padding-right: 80px;
}

@media (max-width: 768px) {
    #timeline ul li:nth-child(odd) {
        padding-right: 0px;
    }
}

#timeline ul li:nth-child(odd)::after {
    content: "";
    width: 0px;
    height: 100%;
    border: 1px dashed #ffcc00;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

@media (max-width: 768px) {
    #timeline ul li:nth-child(odd)::after {
        display: none;
    }
}

#timeline ul li:nth-child(odd) .pic::after {
    right: -5px;
}

@media (max-width: 768px) {
    #timeline ul li:nth-child(odd) .pic::after {
        right: 50%;
        top: auto;
        bottom: 12px;
        transform: translate(5px, 0);
    }
}

#timeline ul li:nth-child(odd) .line {
    right: 0;
}

#timeline ul li:nth-child(even) {
    padding-left: 80px;
    transform: translateY(50%);
}

@media (max-width: 768px) {
    #timeline ul li:nth-child(even) {
        padding-left: 0px;
        transform: translateY(0);
    }
}

#timeline ul li:nth-child(even) .pic::after {
    left: -7px;
}

@media (max-width: 768px) {
    #timeline ul li:nth-child(even) .pic::after {
        left: 50%;
        top: auto;
        bottom: 12px;
        transform: translate(-7px, 0);
    }
}

#timeline ul li:nth-child(even) .line {
    left: 0;
}

#timeline ul li:last-child::after {
    height: 50%;
}

@media (max-width: 768px) {
    #timeline ul li:last-child .pic::after {
        bottom: 0;
    }
}

#timeline ul li a {
    display: block;
    padding: 10px;
    border-radius: 10px;
    background-color: #fff;
    opacity: 0;
    -webkit-animation: fadeIn linear 0.5s 1s forwards;
    animation: fadeIn linear 0.5s 1s forwards;
}

@media (max-width: 768px) {
    #timeline ul li a {
        display: flex;
    }

        #timeline ul li a .pic {
            margin-right: 20px;
            flex-basis: 50%;
            padding-bottom: 0;
        }

        #timeline ul li a .txt {
            flex-basis: 50%;
            padding-bottom: 0;
            overflow-wrap: break-word;
        }
}

@media (max-width: 480px) {
    #timeline ul li a .pic {
        flex-basis: 70%;
    }

    #timeline ul li a .txt {
        flex-basis: 30%;
        align-self: flex-end;
    }

        #timeline ul li a .txt h3 {
            text-align: right;
            font-size: 1.6rem;
        }

        #timeline ul li a .txt p {
            display: none;
        }
}

#timeline ul li a:hover .pic img {
    transform: scale(1.2);
}

#timeline ul li .pic {
    padding-bottom: 10px;
    overflow: hidden;
}

    #timeline ul li .pic::after {
        content: "";
        width: 12px;
        height: 12px;
        background-color: #ffcc00;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    #timeline ul li .pic img {
        transition: transform 0.5s;
    }

#timeline ul li .txt {
    color: #333;
}

    #timeline ul li .txt h3 {
        font-size: 2rem;
    }

    #timeline ul li .txt p {
        font-size: 1.6rem;
    }

#timeline ul li .line {
    width: 100%;
    height: 0;
    border: 1px dashed #ffcc00;
    position: absolute;
    top: 50%;
    z-index: -1;
    opacity: 0;
    -webkit-animation: fadeIn linear 0.5s 1s forwards;
    animation: fadeIn linear 0.5s 1s forwards;
}

#timeline button {
    display: block;
    margin: 20% auto 0;
    padding: 10px 40px;
    color: #ffcc00;
    font-weight: 900;
    background-color: #fff;
    border: 1px solid #ffcc00;
    border-radius: 30px;
    cursor: pointer;
    outline: none;
    transition: background-color 0.5s, color 1s;
}

@media (max-width: 768px) {
    #timeline button {
        margin: 10% auto 0;
    }
}

#timeline button:hover {
    background-color: #ffcc00;
    color: #fff;
}
</style>

</head>
<body>
<div id="timeline">
    <h1>Date & Time</h1>
    <ul></ul>
    <button type="button">MORE</button>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
'use strict'
    ; (function () {
        let timelineList = document.querySelector('#timeline ul')
        let moreBtn = document.querySelector('#timeline button')
        let initIndex = 6
        let count = 4
        let data = [
            {
                url: 'javascript:;',
                src: 'http://devanswer.com/codes/files/computer.jpg',
                date: '2021.01',
                content: '2021 abstract',
            },
            {
                url: 'javascript:;',
                src: 'http://devanswer.com/codes/files/computer.jpg',
                date: '2020.12',
                content: 'Brief description of events in December 2020',
            },
            {
                url: 'javascript:;',
                src: 'http://devanswer.com/codes/files/computer.jpg',
                date: '2020.11',
                content: 'Brief description of events in November 2020',
            },
            {
                url: 'javascript:;',
                src: 'http://devanswer.com/codes/files/computer.jpg',
                date: '2020.10',
                content: 'Brief description of events in November 2020',
            },
            {
                url: 'javascript:;',
                src: 'http://devanswer.com/codes/files/computer.jpg',
                date: '2020.09',
                content: 'Brief description of events in November 2020',
            },
            {
                url: 'javascript:;',
                src: 'http://devanswer.com/codes/files/computer.jpg',
                date: '2020.08',
                content: 'Brief description of events in November 2020',
            },
            {
                url: 'javascript:;',
                src: 'http://devanswer.com/codes/files/computer.jpg',
                date: '2020.07',
                content: 'Brief description of events in November 2020',
            },
            {
                url: 'javascript:;',
                src: 'http://devanswer.com/codes/files/computer.jpg',
                date: '2020.06',
                content: 'Brief description of events in November 2020',
            },
            {
                url: 'javascript:;',
                src: 'http://devanswer.com/codes/files/computer.jpg',
                date: '2020.05',
                content: 'Brief description of events in November 2020',
            },
            {
                url: 'javascript:;',
                src: 'http://devanswer.com/codes/files/computer.jpg',
                date: '2020.04',
                content: 'Brief description of events in November 2020',
            },
            {
                url: 'javascript:;',
                src: 'http://devanswer.com/codes/files/computer.jpg',
                date: '2020.03',
                content: 'Brief description of events in November 2020',
            },
            {
                url: 'javascript:;',
                src: 'http://devanswer.com/codes/files/computer.jpg',
                date: '2020.02',
                content: 'Brief description of events in November 2020',
            },
            {
                url: 'javascript:;',
                src: 'http://devanswer.com/codes/files/computer.jpg',
                date: '2020.01',
                content: 'Brief description of events in November 2020',
            },
            {
                url: 'javascript:;',
                src: 'http://devanswer.com/codes/files/computer.jpg',
                date: '2019.12',
                content: '2019 年 12 月份大事紀簡要說明',
            },
            {
                url: 'javascript:;',
                src: 'http://devanswer.com/codes/files/computer.jpg',
                date: '2019.11',
                content: 'Brief description of events in November 2020',
            },
            {
                url: 'javascript:;',
                src: 'http://devanswer.com/codes/files/computer.jpg',
                date: '2019.10',
                content: 'Brief description of events in November 2020',
            },
            {
                url: 'javascript:;',
                src: 'http://devanswer.com/codes/files/computer.jpg',
                date: '2019.09',
                content: 'Brief description of events in November 2020',
            },
            {
                url: 'javascript:;',
                src: 'http://devanswer.com/codes/files/computer.jpg',
                date: '2019.08',
                content: 'Brief description of events in November 2020',
            },
            {
                url: 'javascript:;',
                src: 'http://devanswer.com/codes/files/computer.jpg',
                date: '2019.07',
                content: 'Brief description of events in November 2020',
            },
            {
                url: 'javascript:;',
                src: 'http://devanswer.com/codes/files/computer.jpg',
                date: '2019.06',
                content: 'Brief description of events in November 2020',
            },
            {
                url: 'javascript:;',
                src: 'http://devanswer.com/codes/files/computer.jpg',
                date: '2019.05',
                content: 'Brief description of events in November 2020',
            },
            {
                url: 'javascript:;',
                src: 'http://devanswer.com/codes/files/computer.jpg',
                date: '2019.04',
                content: 'Brief description of events in November 2020',
            },
            {
                url: 'javascript:;',
                src: 'http://devanswer.com/codes/files/computer.jpg',
                date: '2019.03',
                content: 'Brief description of events in November 2020',
            },
            {
                url: 'javascript:;',
                src: 'http://devanswer.com/codes/files/computer.jpg',
                date: '2019.02',
                content: 'Brief description of events in November 2020',
            },
            {
                url: 'javascript:;',
                src: 'http://devanswer.com/codes/files/computer.jpg',
                date: '2019.01',
                content: 'Brief description of events in November 2020 ',
            },
        ]

        function setTimeLineItem(target, obj, index) {
            let li = document.createElement('li')
            let template = `
            <a
                href="${obj.url}"
                style="animation-delay:${index * 0.5}s;">
                <div class="pic">
                    <img
                        src="${obj.src}"
                        alt=""
                    />
                </div>
                <div class="txt">
                    <h3>${obj.date}</h3>
                    <p>
                        ${obj.content}
                    </p>
                </div>
            </a>
            <div
                class="line"
                style="animation-delay:${index * 0.5}s;">
            </div>`
            li.innerHTML = template
            target.append(li)
        }
        function clickMore() {
            let ary = data.slice(initIndex, initIndex + count)
            ary.forEach((obj, index) => {
                setTimeLineItem(timelineList, obj, index + 1)
            })
            initIndex = initIndex + count
            if (initIndex > data.length) {
                this.style.display = 'none'
            }
        }

        data.slice(0, initIndex).forEach((obj, index) => {
            setTimeLineItem(timelineList, obj, index + 1)
        })
        moreBtn.addEventListener('click', clickMore)
    })()
</script>

</body>
</html>



Other Codes

Timeline with Title Effect on Hover


Timeline with Title Effect on Hover

A vertical timeline in which the title of the timeline turns blue in animation mode.
Horizontal Timeline with Event Popups


Horizontal Timeline with Event Popups

A horizontal timeline in which the text of each timeline is animated by clicking on that timeline.
Timeline Animation on Scroll


Timeline Animation on Scroll

A vertical timeline for text that when we scroll the text, the timeline moves downwards animated.
Colored HTML Timeline with Images


Colored HTML Timeline with Images

In this code, we have a timeline where the lines and the text box in each item can have a different color. Photos can also be included in each item.