A Pen by Rob

Developer
Rob
Size
1,972 Kb
Views
38,456
  1. A Pen by Rob Previews
  2. A Pen by Rob HTML Codes
  3. A Pen by Rob CSS Codes
  4. A Pen by Rob JS Codes

How do I make an a pen by rob?

Really annoying css animation. What is a a pen by rob? How do you make a a pen by rob? This script and codes were developed by Rob on 30 August 2022, Tuesday.

A Pen by Rob Previews
IQ Test

A Pen by Rob - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Rob</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="marquee-backing"> <a href="#" class="marquee-text">click me click me click me</a>
</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>

A Pen by Rob - Script Codes CSS Codes

body { overflow-x: hidden;
}
.hidden { opacity: 0;
}
.fadein { -webkit-animation: fadein 400ms;
}
@-webkit-keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; }
}
.marquee-backing { width: 100%; height: 80px; margin-top: 10px;
}
.marquee-text { width: 100%; margin-left: 20px; -webkit-animation: marquee 6s 1; -webkit-animation-timing-function: linear; -webkit-animation-delay: 1s;
}
.sizing { -webkit-animation: resizing .3s 4; -webkit-animation-direction: alternate;
}
@-webkit-keyframes marquee { 0% { margin-left: 100%; padding-top: 2px; } 70% { margin-left: -100%; padding-top: 2px; } 71% { margin-left: -100%; padding-top: 12px; } 97% { margin-left: 20px; padding-top: 12px; } 100% { margin-left: 20px; padding-top: 0px; }
}
@-webkit-keyframes resizing { 0% { font-size: 14px; } 100% { font-size: 52px; }
}

A Pen by Rob - Script Codes JS Codes

$('.marquee-backing a').on('click', function(event){ event.preventDefault(); $(this).toggleClass('sizing');
});
A Pen by Rob - Script Codes
A Pen by Rob - Script Codes
Home Page Home
Developer Rob
Username rowinf
Uploaded August 30, 2022
Rating 3
Size 1,972 Kb
Views 38,456
Do you need developer help for A Pen by Rob?

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!

Rob (rowinf) Script Codes
Name
Table filters
Jquery form
Nav Menu with Chevron
Get combo box item value
D3 test
Bootstrap test
Site Layout
A Pen by Rob
Html5 form validation
Responsive Calendar
Create amazing sales emails 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!