Revolving Text Landing Page Trial

Developer
Tim Ruby
Size
2,976 Kb
Views
68,816
  1. Revolving Text Landing Page Trial Previews
  2. Revolving Text Landing Page Trial HTML Codes
  3. Revolving Text Landing Page Trial CSS Codes
  4. Revolving Text Landing Page Trial JS Codes

How do I make an revolving text landing page trial?

Brainstorming for some features I'd like to use on a new landing page to an upcoming site. Not entirely what I wanted to achieve, but still alright never the less.. What is a revolving text landing page trial? How do you make a revolving text landing page trial? This script and codes were developed by Tim Ruby on 03 July 2022, Sunday.

Revolving Text Landing Page Trial Previews
IQ Test

Revolving Text Landing Page Trial - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Revolving Text Landing Page Trial</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="text"> <div class="social"> <h4>We should probably be friends.</h4> <a href="#" class="entypo-dribbble"></a> <a href="#" class="entypo-twitter"></a> <a href="#" class="entypo-facebook"></a> <a href="#" class="entypo-gplus"></a> <a href="#" class="entypo-linkedin"></a> <a href="#" class="entypo-paper-plane"></a> </div> <h2 class="rw-sentence"> <span>The new site is &hellip; </span> <div class="rw-words rw-words-1"> <span>easy on the eyes</span> <span>super clean</span> <span>taking forever</span> <span>a labor of <i class="entypo-heart"></i></span> <span>coming soon</span> </div> </h2>
</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>

Revolving Text Landing Page Trial - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Rokkitt:400,700|Roboto:400,300);@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before { font-family: 'entypo', sans-serif;
}
html, body { margin: 0; padding: 0; background-color: #2C3E50; font-family: 'Rokkitt', serif;
}
.abs-center { margin: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
}
.social { margin: 20px auto; padding-left: 10px; width: 400px;
}
.social h4 { margin: 20px 0; color: #233140; font-size: 30px; text-align: center; text-shadow: -1px 0px 0 #374D63; filter: dropshadow(color=#374D63, offx=0, offy=1);
}
.social a { margin-right: 30px; text-align: center; color: #233140; text-decoration: none; font-family: 'Roboto', sans-serif; font-size: 40px; font-weight: 300; text-shadow: -2px 0px 0 #374D63; filter: dropshadow(color=#374D63, offx=1, offy=1);
}
.social a:last-child { margin: 0;
}
.text { margin: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 700px; height: 60px;
}
h2 { position: relative; font-size: 48px; padding-left: 30px; height: 60px; color: #FFF; width: auto; font-weight: 400;
}
/* Animated Text Effect */
.rw-words{	display: inline;
}
.rw-words-1 span i { color: #FC4349; font-size: 38px;
}
.rw-words-1 span{	position: absolute;	opacity: 0;	margin-left: 10px; overflow: hidden;	-webkit-animation: rotateWord 15s linear 0s;	-moz-animation: rotateWord 15s linear 0s;	-o-animation: rotateWord 15s linear 0s;	-ms-animation: rotateWord 15s linear 0s;	animation: rotateWord 15s linear 0s;
}
.rw-words-1 span:nth-child(2) { -webkit-animation-delay: 2s;	-moz-animation-delay: 2s;	-o-animation-delay: 2s;	-ms-animation-delay: 2s;	animation-delay: 2s;	color: #6DBCDB;
}
.rw-words-1 span:nth-child(3) { -webkit-animation-delay: 4s;	-moz-animation-delay: 4s;	-o-animation-delay: 4s;	-ms-animation-delay: 4s;	animation-delay: 4s;	color: #FC4349;
}
.rw-words-1 span:nth-child(4) { -webkit-animation-delay: 6s;	-moz-animation-delay: 6s;	-o-animation-delay: 6s;	-ms-animation-delay: 6s;	animation-delay: 6s;
}
.rw-words-1 span:nth-child(5) { -webkit-animation-delay: 8s;	-moz-animation-delay: 8s;	-o-animation-delay: 8s;	-ms-animation-delay: 8s;	animation-delay: 8s;
}
@-webkit-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -webkit-transform: translateY(-30px); }	5% { opacity: 1; -webkit-transform: translateY(0px);} 17% { opacity: 1; -webkit-transform: translateY(0px); }	20% { opacity: 0; -webkit-transform: translateY(30px); }	80% { opacity: 0; } 100% { opacity: 0; }
}
@-moz-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -moz-transform: translateY(-30px); }	5% { opacity: 1; -moz-transform: translateY(0px);} 17% { opacity: 1; -moz-transform: translateY(0px); }	20% { opacity: 0; -moz-transform: translateY(30px); }	80% { opacity: 0; } 100% { opacity: 0; }
}
@-o-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -o-transform: translateY(-30px); }	5% { opacity: 1; -o-transform: translateY(0px);} 17% { opacity: 1; -o-transform: translateY(0px); }	20% { opacity: 0; -o-transform: translateY(30px); }	80% { opacity: 0; } 100% { opacity: 0; }
}
@-ms-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -ms-transform: translateY(-30px); }	5% { opacity: 1; -ms-transform: translateY(0px);} 17% { opacity: 1; -ms-transform: translateY(0px); }	20% { opacity: 0; -ms-transform: translateY(30px); }	80% { opacity: 0; } 100% { opacity: 0; }
}
@keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; transform: translateY(-30px); }	5% { opacity: 1; transform: translateY(0px);} 17% { opacity: 1; transform: translateY(0px); }	20% { opacity: 0; transform: translateY(30px); }	80% { opacity: 0; } 100% { opacity: 0; }
}
/*@media screen and (max-width: 768px){	.rw-sentence { font-size: 18px; }
}
@media screen and (max-width: 320px){	.rw-sentence { font-size: 9px; }
}*/

Revolving Text Landing Page Trial - Script Codes JS Codes

$('.social').hide(function() { $(this).delay(12000).fadeIn(800);
});
$('.rw-sentence') .delay(10000) .fadeOut(400);
Revolving Text Landing Page Trial - Script Codes
Revolving Text Landing Page Trial - Script Codes
Home Page Home
Developer Tim Ruby
Username TimRuby
Uploaded July 03, 2022
Rating 4.5
Size 2,976 Kb
Views 68,816
Do you need developer help for Revolving Text Landing Page Trial?

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!

Tim Ruby (TimRuby) Script Codes
Name
Slide In Info Panel
Connect The Dots
Editable Event Calendar Widget
Quick Launch Checklist
CSS ONLY TABLET WITH RESPONSIVE GRID Animaton
Toggle Content with Select Menu
SVG Circle Documentation
CSS Only 3D Bar Graph
V-Card WIP
Flyout Contact Modal
Create amazing marketing copy 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!