Animated scroll timeline

Developer
David A.
Size
5,222 Kb
Views
34,408
  1. Animated scroll timeline Previews
  2. Animated scroll timeline HTML Codes
  3. Animated scroll timeline CSS Codes
  4. Animated scroll timeline JS Codes

How do I make an animated scroll timeline?

What is a animated scroll timeline? How do you make a animated scroll timeline? This script and codes were developed by David A. on 28 November 2022, Monday.

Animated scroll timeline Previews
IQ Test

Animated scroll timeline - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>animated scroll timeline</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="content"> <article> <h1>A day in my life</h1> <h3>Typical day in David's life</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis lacinia vulputate. Maecenas eget egestas sem, quis pellentesque mi. Duis ac maximus nunc. Integer cursus orci placerat purus luctus, sit amet blandit nisl consequat. Suspendisse lobortis a neque ut facilisis. Fusce venenatis ex pulvinar iaculis gravida. Phasellus non vestibulum risus. Maecenas a fringilla mi. Aliquam tempor hendrerit velit, nec molestie dui rhoncus id. Donec feugiat consectetur auctor.</p> </article> <h1 class="timeline-title">Timeline</h1> <section class="timeline"> <div class="watch"> <div class="watch__minute js-watch-minute"></div> <div class="watch__hour js-watch-hour"></div> </div> <section class="events"> <div class="event" data-time="4"> <h3>Öppis komischs tröimt</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis lacinia vulputate. Maecenas eget egestas sem. Quis pellentesque mi. Duis ac maximus nunc. Integer cursus orci placerat purus luctus.</p> </div> <div class="event" data-time="7"> <h3>Gügürügü und müesli</h3> <p>Quis pellentesque mi. Duis ac maximus nunc. Integer cursus orci placerat purus luctus. Sit amet blandit nisl consequat.</p> </div> <div class="event" data-time="10"> <h3>Kaffi-Pousä</h3> <p>Sit amet blandit nisl consequat. Suspendisse lobortis a neque ut facilisis. Fusce venenatis ex pulvinar iaculis gravida.</p> </div> <div class="event" data-time="12"> <h3>Zmittag</h3> <p>Suspendisse lobortis a neque ut facilisis. Fusce venenatis ex pulvinar iaculis gravida. Aliquam tempor hendrerit velit, nec molestie dui rhoncus id. Donec feugiat consectetur auctor.</p> </div> <div class="event" data-time="16"> <h3>Z fieri isch parat</h3> <p>Aliquam tempor hendrerit velit, nec molestie dui rhoncus id. Donec feugiat consectetur auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis lacinia vulputate. Maecenas eget egestas sem.</p> </div> <div class="event" data-time="19"> <h3>Znacht!</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis lacinia vulputate. Maecenas eget egestas sem.</p> </div> <div class="event" data-time="21"> <h3>Guetnacht gschichtli</h3> <p>Quis pellentesque mi. Duis ac maximus nunc. Integer cursus orci placerat purus luctus. Sit amet blandit nisl consequat.</p> </div> <div class="event" data-time="22"> <h3>Schlaf guet</h3> <p>Suspendisse lobortis a neque ut facilisis. Fusce venenatis ex pulvinar iaculis gravida. Quis pellentesque mi. Duis ac maximus nunc. Integer cursus orci placerat purus luctus. Sit amet blandit nisl consequat.</p> </div> <div class="event" data-time="4"> <h3>Öppis komischs tröimt</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis lacinia vulputate. Maecenas eget egestas sem. Quis pellentesque mi. Duis ac maximus nunc. Integer cursus orci placerat purus luctus.</p> </div> <div class="event" data-time="7"> <h3>Gügürügü und müesli</h3> <p>Quis pellentesque mi. Duis ac maximus nunc. Integer cursus orci placerat purus luctus. Sit amet blandit nisl consequat.</p> </div> <div class="event" data-time="10"> <h3>Kaffi-Pousä</h3> <p>Sit amet blandit nisl consequat. Suspendisse lobortis a neque ut facilisis. Fusce venenatis ex pulvinar iaculis gravida.</p> </div> <div class="event" data-time="12"> <h3>Zmittag</h3> <p>Suspendisse lobortis a neque ut facilisis. Fusce venenatis ex pulvinar iaculis gravida. Aliquam tempor hendrerit velit, nec molestie dui rhoncus id. Donec feugiat consectetur auctor.</p> </div> <div class="event" data-time="16"> <h3>Z fieri isch parat</h3> <p>Aliquam tempor hendrerit velit, nec molestie dui rhoncus id. Donec feugiat consectetur auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis lacinia vulputate. Maecenas eget egestas sem.</p> </div> <div class="event" data-time="19"> <h3>Znacht!</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis lacinia vulputate. Maecenas eget egestas sem.</p> </div> <div class="event" data-time="21"> <h3>Guetnacht gschichtli</h3> <p>Quis pellentesque mi. Duis ac maximus nunc. Integer cursus orci placerat purus luctus. Sit amet blandit nisl consequat.</p> </div> <div class="event" data-time="22"> <h3>Schlaf guet</h3> <p>Suspendisse lobortis a neque ut facilisis. Fusce venenatis ex pulvinar iaculis gravida. Quis pellentesque mi. Duis ac maximus nunc. Integer cursus orci placerat purus luctus. Sit amet blandit nisl consequat.</p> </div> </section> </section>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animated scroll timeline - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto);
body { font-family: 'Roboto', sans-serif; background: #fff; color: #212121;
}
.content { max-width: 700px; margin: 0 auto;
}
.timeline { position: relative; padding: 0 0 0 162px; margin-top: 6rem; margin-bottom: 18rem;
}
.timeline:before { opacity: .75; position: absolute; top: 8px; bottom: 8px; left: 61px; content: ''; width: 4px; margin-left: -2px; border-radius: 2px; background: #ae1946;
}
.timeline-title { margin-top: 4rem;
}
.watch { z-index: 2; position: absolute; left: 0; top: 0; background: #f7f7f7; -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
.watch, .watch:after { position: absolute; border-radius: 50%; width: 122px; height: 122px;
}
.watch:after { content: ''; box-shadow: 0 0 0 3.05px #ae1946, 0 0 3.05px 3.05px rgba(0, 0, 0, 0.25), inset 0 0 0 1.525px rgba(0, 0, 0, 0.15);
}
.watch__hour, .watch__minute { top: 9.15px; bottom: 9.15px; margin-left: -1.525px; left: 50%; width: 3.05px;
}
.watch__hour, .watch__hour:after, .watch__hour:before, .watch__minute, .watch__minute:after, .watch__minute:before { position: absolute;
}
.watch__hour:after, .watch__hour:before, .watch__minute:after, .watch__minute:before { background: #3b3b3b; box-shadow: 0 0 0.915px rgba(0, 0, 0, 0.25); -webkit-transform: translateZ(0); transform: translateZ(0);
}
.watch__hour:before, .watch__minute:before { content: ''; width: 100%; top: 0; left: 0; border-radius: 1.525px;
}
.watch__hour:before { top: 15%; bottom: 40%;
}
.watch__hour:after { content: ''; top: 50%; left: 50%; background: #000; width: 9.15px; height: 9.15px; border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.watch__minute:before { bottom: 40%;
}
.event { margin-bottom: 100px; position: relative; /*&:before { content: ''; position: absolute; left: -$watch-radius * 2 + 5px; height: 10px; width: 10px; top: 2px; background: #ae1946; border-radius: 50%; }*/
}

Animated scroll timeline - Script Codes JS Codes

var fractionToTime = function(fraction){ var hours = fraction * 24; var minutes = (hours - Math.floor(hours)) * 60; return {h: hours, m: minutes}
}
var timeToFranction = function(fraction){ var hours = fraction * 24; var minutes = (hours - Math.floor(hours)) * 60; return {h: hours, m: minutes}
}
var getEvents = function(){ var times = {}; var $events = $('*[data-time]'); $events.each(function(){ times[$(this).data('time')] = $(this); }); return times;
}
var $events = $('.event');
var events = getEvents();
var times = Object.keys(events);
var $h, $m;
$h = $('.js-watch-hour');
$m = $('.js-watch-minute');
var i = 0;
var time;
var currentEventsTime = 0;
var iG = 0;
var $body = $('html');
var scrollHeight = $body[0].scrollHeight;
var scrollTop = 0;
var scrolledInPercent = 0;
var bodHeight = $body.height();
var $win = $(window);
var winHeight = $win[0].innerHeight;
var $timeline = $('.timeline');
var timelinetop = $timeline[0].getBoundingClientRect().top;
var timelineheight = $timeline[0].getBoundingClientRect().height;
var $watch = $('.watch');
var wH = $watch.height();
var correctedScrollTop = 0;
$win.on('scroll', function(){ var scrollTop = $win.scrollTop(); scrolledInPercent = scrollTop / (scrollHeight - winHeight); iG = ((scrollTop + (winHeight * scrolledInPercent)) - timelinetop)/timelineheight; iG = Math.min(Math.max(iG, 0),1);
});
var loop = function(){ i += (iG - i) * 0.075; //i = i % 1; $watch.css('transform', 'translate3d(0,' + ( (timelineheight * iG) - (wH * .5) ) + 'px,0)') time = fractionToTime(i); $h.css('transform', 'rotate(' + i * 720 + 'deg) translateZ(0)'); $m.css('transform', 'rotate(' + (i * 360) * 4 + 'deg) translateZ(0)'); // fake the minutes so it looks better /*times.forEach(function(h){ var hInt = parseInt(h); if( currentEventsTime != hInt && hInt <= time.h) { currentEventsTime = hInt; $events.hide(); events[h].show(); } });*/ requestAnimationFrame(loop);
}
loop();
Animated scroll timeline - Script Codes
Animated scroll timeline - Script Codes
Home Page Home
Developer David A.
Username meodai
Uploaded November 28, 2022
Rating 3
Size 5,222 Kb
Views 34,408
Do you need developer help for Animated scroll timeline?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

David A. (meodai) Script Codes
Name
Cymk logo generator
Pijama ninja falling
Textmask over random clouds animation
Color palette distribution for different color spaces
All the 16k color names from the color-name-list API
Pseudo 3d css clouds
Color Watch
Better Grrif Player
We Simplify animation
DOM explosions
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!