Word Slider Demo

Developer
Jordan Checkman
Size
2,387 Kb
Views
2,024
  1. Word Slider Demo Previews
  2. Word Slider Demo HTML Codes
  3. Word Slider Demo CSS Codes

How do I make an word slider demo?

Toying around with a landing page for my new site.. What is a word slider demo? How do you make a word slider demo? This script and codes were developed by Jordan Checkman on 21 January 2023, Saturday.

Word Slider Demo Previews
IQ Test

Word Slider Demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Word Slider Demo</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE html>
<html>	<head>	<meta charset="utf-8">	<link rel="stylesheet" type="text/css" href="fonts.css">	<link rel="stylesheet" type="text/css" href="main.css">	</head>
<!--[if lt IE 7]>	<body class="ie6">	<![endif]-->
<!--[if IE 7]>	<body class="ie7">	<![endif]-->
<!--[if IE 8]>	<body class="ie8">	<![endif]-->
<!--[if IE 9]>	<body class="ie9">	<![endif]-->
<!--[if gt IE 9]>	<body class="ie10+">	<![endif]-->
<!--[if !IE]><!-->	<body>	<!--<![endif]-->	<section class="hero flexbox-container-center">	<article class="flexbox-item-center">	<h1 class="hero-intro">Hey There! I'm Jordan.<br>And</h1>	<div class="inline-block group">	<h1 class="hero-tagline">I Make</h1>	<ul class="word-slider">	<li>Engaging</li>	<li>Delightful</li>	<li>Friendly</li>	<li>Engaging</li>	</ul>	<h1 class="hero-tagline">Websites</h1>	</div>	</article>	</section>	<footer>	<span class="to-top">To the Top!</span>	</footer>	</body>
</html>
</body>
</html>

Word Slider Demo - Script Codes CSS Codes

*{	margin: 0;	padding: 0;	font-size: 100%;	zoom: 1;
}
html,body{	height: 100%;
}
body{	font-family: 'Proxima Nova', sans-serif;
}
.hero{	height: 100%;	width: 100%;	font-size: 2em;	background: rgb(255, 255, 251);
}	.hero-tagline{	float: left;	}	.hero-intro{	text-align: center;	}	.word-slider{	height: 1em;	position: relative;	line-height: 1em;	margin: 0 .5em;	overflow: hidden;	float: left;	list-style-type: none;	}	.word-slider>li{	text-align: center;	-webkit-animation: word-slider 8s ease-in-out infinite;	-moz-animation: word-slider 8s ease-in-out infinite;	-o-animation: word-slider 8s ease-in-out infinite;	animation: word-slider 8s ease-in-out infinite;	}	@-webkit-keyframes word-slider{	0%{	-webkit-transform: translate3D(0,0,0);	}	33%{	-webkit-transform: translate3D(0,-100%,0);	}	66%{	-webkit-transform: translate3D(0,-200%,0);	}	100%{	-webkit-transform: translate3D(0,-300%,0);	}	}	@-moz-keyframes word-slider{	0%{	-moz-transform: translate3D(0,0,0);	}	33%{	-moz-transform: translate3D(0,-100%,0);	}	66%{	-moz-transform: translate3D(0,-200%,0);	}	100%{	-moz-transform: translate3D(0,-300%,0);	}	}	@-o-keyframes word-slider{	0%{	-o-transform: translateY(0);	}	33%{	-o-transform: translateY(-100%);	}	66%{	-o-transform: translateY(-200%);	}	100%{	-o-transform: translateY(-300%);	}	}	@keyframes word-slider{	0%{	transform: translate3D(0,0,0);	}	33%{	transform: translate3D(0,-100%,0);	}	66%{	transform: translate3D(0,-200%,0);	}	100%{	transform: translate3D(0,-300%,0);	}	}
footer{	width: 100%;	height: 5em;
}	.to-top{	display: block;	height: 50%;	margin: 1.25em auto;	text-align: center;	line-height: 2.5em;	cursor: pointer;	}
/*Utility Classes*/
.flexbox-container-center{	display: -webkit-box;	display: -moz-box;	display: box;	-webkit-box-align: center;	-moz-box-align: center;	box-align: center;	-webkit-box-pack: center;	-moz-box-pack: center;	box-pack: center;
}
.flexbox-item-center{	-webkit-box-flex: 0;	-moz-box-flex: 0;	box-flex: 0;
}
.ie9 .flexbox-container-center{	display: table;
}
.ie9 .flexbox-item-center{	display: table-cell;	vertical-align: middle;	text-align: center;
}
.inline-block{	display: inline-block;
}
.group:after { content: ""; display: table; clear: both;
}
Word Slider Demo - Script Codes
Word Slider Demo - Script Codes
Home Page Home
Developer Jordan Checkman
Username JordanC
Uploaded January 21, 2023
Rating 3
Size 2,387 Kb
Views 2,024
Do you need developer help for Word Slider Demo?

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!

Jordan Checkman (JordanC) Script Codes
Name
Fancy Menu
RSW
Pretty
Print Button
Awesome Reports
A Pen by Jordan Checkman
Contenteditable Test
Carl Philippe Effect
Create amazing captions 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!