Rotating Text (no Javascript)
Rotate text in a fixed area. Fade in and out various texts. All CSS, no Javascript. Text changes every 15 seconds. 5 text phrases will rotate in this example.
1) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies pellentesque felis, bibendum sollicitudin lacus tristique quis. Praesent consectetur tincidunt quam sit amet tristique. Praesent et est in dui condimentum malesuada. Nullam non lorem ante. Vestibulum nec ornare lectus, ut ullamcorper metus. Morbi non nisl lorem. Aenean non laoreet massa, at commodo enim. Etiam ac nulla felis. Morbi fringilla felis nec interdum lobortis. Fusce porta enim est, et congue quam viverra ac. Sed eleifend enim tellus, eu interdum nisl vehicula ac. Cras efficitur metus suscipit magna finibus mollis.
2) Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent arcu odio, efficitur pulvinar diam a, cursus euismod dolor. Suspendisse dapibus ipsum tellus, at venenatis eros condimentum nec. Integer tempor eros at ultricies laoreet. Suspendisse aliquam lorem sit amet leo tempus venenatis. Phasellus a augue convallis, gravida quam vel, tempus sem. In rutrum nisl et ipsum iaculis, in luctus risus ultricies. Ut auctor leo at gravida viverra. Phasellus eget ullamcorper urna, ac eleifend mi. Sed eget molestie lectus, at lacinia metus. Curabitur tempus metus et lacus fermentum, nec ornare leo ultricies. Pellentesque semper ante vel justo rhoncus lobortis. Proin nec commodo enim, ac varius lorem.
3) Phasellus molestie diam nec massa ullamcorper venenatis. Aenean felis massa, facilisis ac egestas non, varius non massa. In hac habitasse platea dictumst. Vestibulum vitae tempus tellus, et molestie arcu. Phasellus at dignissim felis. Nam luctus eleifend eros venenatis semper. Donec eget venenatis libero.
4) Pellentesque pretium consectetur eleifend. Donec id vestibulum nulla. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi orci diam, consequat quis lacus sed, accumsan egestas nunc. Aenean pulvinar euismod nibh. Quisque justo justo, blandit a vestibulum a, finibus sed augue. Donec eleifend ante et urna porttitor, et aliquet magna semper. Aliquam leo velit, interdum at lobortis non, dictum vel mi. Morbi ornare turpis sit amet accumsan tristique.
5) Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur lobortis nec ligula a pulvinar. Nam venenatis erat magna, sed interdum lectus feugiat non. In nunc justo, tempor eget semper eu, ultrices ut urna. Duis et gravida dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum blandit facilisis lacus, ut malesuada justo tristique auctor. Sed quis sem a nibh porttitor elementum.
Modification Notes
- Determine the maximum time needed for the user to read the longest text (ex 15 seconds).
- Multiply by the number of text phrases to determine the total time (5 * 15 = 75 seconds).
- Replace the @keysrame %s and animation amounts.
- Add (or remove) ".rotating-text > p:nth-child(?) {...} rules for each additional text phrase, replace "?" with the text phrase number.