Before asking this question I searched a lot for this functionality but did'nt find any clue so that's why posting a new question.
So actually I have a placeholder text inside an html text field like this
<input type="text" class="timepicker" placeholder="Placeholder Text..." >
So what I want is to make this placeholder blink. So is it possible in html or by using jquery or javascript.
You can do this with simple CSS animations. Not sure, how much cross-browser compatible this is though. Works fine with Chrome and Firefox.
HTML:
<input type="text" placeholder="Enter Text Here" class="textbox">
CSS:
input[class="textbox"]::-webkit-input-placeholder {
color:blue;
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
input[class="textbox"]::-moz-placeholder {
color:blue;
-moz-animation-name: blinker;
-moz-animation-duration: 1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
}
#-moz-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
Fiddle: http://jsfiddle.net/rkwa19se/6/
Here's a jQuery-only way to do this:
function blinker() {
if ($('input[type=text]').attr('placeholder')) {
// get the placeholder text
$('input[type=text]').attr('placeholder', '');
} else {
$('input[type=text]').attr('placeholder', 'Placeholder Text...');
}
setTimeout(blinker, 1000);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload="blinker()">
<input type="text" onclick="blinker()" class="timepicker" placeholder="Placeholder Text...">
</body>
Related
I have a text with two emojis 🥳🤪
I want to flip one emogi with another using css.
When the first emogi is shown I want to the second emoji to be hidden. So they kinda indefinitely replacing each other.
I found here a great example how to make text blink
.blink {
animation: blinker 1s step-start infinite;
}
#keyframes blinker {
50% {
opacity: 0;
}
}
<div class="blink">🥳</div>
So how would you show the second emogi while the first one is hidden?
You can use a pseudo-element:
.blink::before {
content: "🥳";
animation: blinker 1s linear infinite alternate;
}
#keyframes blinker {
0% {
content: "🥳";
}
50% {
opacity: 0%;
}
100% {
content: "🤪";
}
}
<div class="blink"></div>
.emoji-cont {
position: relative;
}
.blink, .blink-2 {
position: absolute;
}
.blink {
animation: blinker 1s infinite;
}
.blink-2 {
animation: blinker 1s .5s infinite;
}
#keyframes blinker {
50% {
opacity: 0;
}
}
<div class="emoji-cont">
<div class="blink">🥳</div>
<div class="blink-2">🤪</div>
</div>
I want to create simple text animation. When i click a button, text shifts from fully transparent to fully visible and reverts to transparent. I wrote code that does the animation but only once. The animation doesn't work anymore every time when i click the button:
function animation() {
$("span").removeClass("opacity-effect");
$("span").addClass("opacity-effect");
}
span{
opacity: 0;
}
.opacity-effect {
animation-name: animate-opacity-effect;
animation-duration: 1400ms;
animation-fill-mode: forwards;
opacity: 0;
}
#keyframes animate-opacity-effect {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>Hello World!</span>
<button onClick="animation()">
Start animation
</button>
The animation does not repeat, because for animation to start CSS requires a frame when there was no class.
So, to solve this, you should delay adding class to the next frame
function animation() {
$("span").removeClass("opacity-effect");
requestAnimationFrame(()=>{
$("span").addClass("opacity-effect");
});
}
You need to reset the animation. There is a good and correct way to do this, using event animationend. In this event, you need to put the removal of the class opacity-effect.
function animation() {
$("span").addClass("opacity-effect");
$("span").on("animationend", function() {
$(this).removeClass("opacity-effect");
});
}
span {
opacity: 0;
}
.opacity-effect {
animation-name: animate-opacity-effect;
animation-duration: 1400ms;
animation-fill-mode: forwards;
opacity: 0;
}
#keyframes animate-opacity-effect {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>Hello World!</span>
<button onClick="animation()">
Start animation
</button>
You need to add a small delay between the removeClass and the addClass. This can be done in two ways:
With a setTimeout
function animation() {
$("span").removeClass("opacity-effect")
setTimeout(() => {
$("span").addClass("opacity-effect");
}, 0);
}
span{
opacity: 0;
}
.opacity-effect {
animation-name: animate-opacity-effect;
animation-duration: 1400ms;
animation-fill-mode: forwards;
}
#keyframes animate-opacity-effect {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>Hello World!</span>
<button onClick="animation()">
Start animation
</button>
With a cloning
function animation() {
const newEl = $("span").removeClass("opacity-effect").clone(true);
$("span").before(newEl);
$("span:last").remove();
newEl.addClass("opacity-effect");
}
span{
opacity: 0;
}
.opacity-effect {
animation-name: animate-opacity-effect;
animation-duration: 1400ms;
animation-fill-mode: forwards;
}
#keyframes animate-opacity-effect {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>Hello World!</span>
<button onClick="animation()">
Start animation
</button>
$('span').addClass('opacity-effect');
setTimeout(function(){
$('span').removeClass('opacity-effect');
}, 1400);
Try this
1400 is your animation duration time
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dropdown value from database</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
span{
opacity: 0;
}
.opacity-effect {
opacity: 0;
-webkit-animation: animate-opacity-effect 1400ms infinite;
-moz-animation: animate-opacity-effect 1400ms infinite;
-o-animation: animate-opacity-effect 1400ms infinite;
animation: animate-opacity-effect 1400ms infinite;
}
#keyframes animate-opacity-effect {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-o-keyframes animate-opacity-effect {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-moz-keyframes animate-opacity-effect {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-webkit-keyframes animate-opacity-effect {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
</style>
</head>
<body>
<span>Hello World!</span>
<button onClick="animation()">
Start animation
</button>
<script>
function animation() {
$("span").removeClass("opacity-effect");
$("span").addClass("opacity-effect");
}
</script>
</body>
</html>
I am trying to reset the animation of an object to it's initial point, so that I can restart it from the beginning.
function swap_animation(node, from, to) {
let t = node.style.animationDuration;
node.style.animationDuration = "0s";
node.style.animationPlayState = "initial";
setTimeout(function(){
node.style.animationDuration = t;
node.classList.remove(from);
node.classList.add(to);
}, 10);
}
function grow() {
let node = document.getElementById("item");
swap_animation(node, "shrink", "grow");
}
function shrink() {
let node = document.getElementById("item");
swap_animation(node, "grow", "shrink");
}
.grow {
animation-name: title-min;
animation-duration: 10s;
animation-timing-function: linear;
animation-fill-mode: forwards;
transform-origin: 0% 100% 0;
}
.shrink {
animation-name: title-min;
animation-duration: 10s;
animation-timing-function: linear;
animation-direction: reverse;
animation-fill-mode: forwards;
transform-origin: 0% 100% 0;
}
#keyframes title-min
{
from { transform: scale(0.5); }
to { transform: scale(1.0); }
}
<body>
<button onclick="grow()">Eat me! 🍰</button>
<button onclick="shrink()">Drink me! 🍹</button>
<h1 id="item">Alice 💃</h1>
</body>
The sample shows that if you click between Eat me! and Drink me!, Alice grows and shrinks in the course of 10 seconds. However, if you toggle between the two, you will note that the animation is continuing on from where it was before switching.
I think I read somewhere that one way to do this is to clone the object and replace the old one with a new one. That seems really overkill and I would think could cause performance problems, more so if the object is large, and would also be bad as it can cause memory fragmentation.
There must be some way to keep the object and modify it's properties to fix this, isn't there?
Ok, well I found a answer. It is to trigger a reflow. Got the answer from this site. Not exactly sure what the void is doing there though.
function swap_animation(node, from, to) {
node.classList.remove(from);
void node.offsetWidth;
node.classList.add(to);
}
function grow() {
let node = document.getElementById("item");
swap_animation(node, "shrink", "grow");
}
function shrink() {
let node = document.getElementById("item");
swap_animation(node, "grow", "shrink");
}
.grow {
animation-name: title-min;
animation-duration: 10s;
animation-timing-function: linear;
animation-fill-mode: forwards;
transform-origin: 0% 100% 0;
}
.shrink {
animation-name: title-min;
animation-duration: 10s;
animation-timing-function: linear;
animation-direction: reverse;
animation-fill-mode: forwards;
transform-origin: 0% 100% 0;
}
#keyframes title-min
{
from { transform: scale(0.5); }
to { transform: scale(1.0); }
}
<body>
<button onclick="grow()">Eat me! 🍰</button>
<button onclick="shrink()">Drink me! 🍹</button>
<h1 id="item">Alice 💃</h1>
</body>
So I have got different animations made in CSS, though the problem is that they start right away when the page loads (ofcourse). I do not want this though. Is there a way in Vanilla JavaScript to get the animation to fire up only when it is in the viewport?
I have searched in a lot of places, but I either find a plugin I need to use or jQuery.
HTML:
<div class="introduction">
<h1>I can do the following for you:</h1>
<ul>
<li>Create a custommade, new website.</li>
<li>Code a PSD template into a working website.</li>
<li>Rework an outdated website.</li>
<li>Clean up messy code of a website.</li>
</ul>
</div>
CSS:
#keyframes showOnLoad {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.introduction li {
list-style-type: none;
margin-bottom: 5px;
text-align: center;
opacity: 0;
-webkit-animation: showOnLoad;
animation: showOnLoad;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.introduction li:nth-child(2) {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.introduction li:nth-child(3) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.introduction li:nth-child(4) {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
This is the code you need.
window.addEventListener("scroll", onScroll);
function onScroll() {
for (var item of document.querySelectorAll(".introduction li")) {
elementVisible(item);
}
}
function elementVisible(el) {
let top = el.offsetTop;
let height = el.offsetHeight;
let bottom = top + height;
let IsOverBottom = top > (window.pageYOffset + window.innerHeight);
let IsBeforeTop = bottom < window.pageYOffset;
if (!IsOverBottom && !IsBeforeTop) {
el.classList.add("show");
}
}
And a bit of CSS
#keyframes slideIn {
0% {
opacity: 0;
transform: translateX(100%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
.show {
animation: slideIn 5s ease-in-out;
}
This is a basic implementation but it gets you closer.
http://jsbin.com/hetapaj/1/edit?css,js,output
I have a CSS animation which is quite complex, ie. it's layered, or brings in two images, one a background image, then an <img> tag inside that, to overlay the original.
Demo is here: http://wdb.blazeoven.co.uk/
HTML:
<div class="container">
<a href="services.php">
<div class="col-sm-3 home-circle" id="one">
<img class="bottom" id="five" src="/assets/img/prop-consultants.png" alt="residential block in grounds">
</div>
</a>
<a href="services.php">
<div class="col-sm-3 home-circle" id="two">
<img class="bottom" id="six" src="/assets/img/chartered-surveyors.png" alt="old residential house doorways">
</div>
</a>
<a href="services.php">
<div class="col-sm-3 home-circle" id="three">
<img class="bottom" id="seven" src="/assets/img/managing-agents.png"
alt="row of shops">
</div>
</a>
<a href="services.php">
<div class="col-sm-3 home-circle" id="four">
<img class="bottom" id="eight" src="/assets/img/city-central.png" alt="City shop premises">
</div>
</a>
CSS:
#-webkit-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
#-moz-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
#keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.home-banner .container a .col-sm-3 {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.home-banner #one {
background:url('/assets/img/propcons.svg') center no-repeat;
background-size: 100%;
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.home-banner #two {
background:url('/assets/img/charsurv.svg') center no-repeat;
background-size: 100%;
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.home-banner #three {
background:url('/assets/img/manage.svg') center no-repeat;
background-size: 100%;
-webkit-animation-delay: 1.4s;
-moz-animation-delay: 1.4s;
animation-delay: 1.4s;
}
.home-banner #four {
background:url('/assets/img/citycen.svg') center no-repeat;
background-size: 100%;
-webkit-animation-delay: 1.8s;
-moz-animation-delay: 1.8s;
animation-delay: 1.8s;
}
.grey-banner img.bottom {
opacity:1;
-webkit-animation:fadeOut ease-in 1;
-moz-animation:fadeOut ease-in 1;
animation:fadeOut ease-in 1;
// -webkit-animation-direction: alternate;
// -moz-animation-direction: alternate;
// animation-direction: alternate;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.grey-banner img#five {
-webkit-animation-delay: 6.8s;
-moz-animation-delay: 6.8s;
animation-delay: 6.8s;
}
.grey-banner img#six {
-webkit-animation-delay: 7.4s;
-moz-animation-delay: 7.4s;
animation-delay: 7.4s;
}
.grey-banner img#seven {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
animation-delay: 8s;
}
.grey-banner img#eight {
-webkit-animation-delay: 8.6s;
-moz-animation-delay: 8.6s;
animation-delay: 8.6s;
}
Trouble is, the client is requesting that it repeats again. That is, it plays in reverse, then starts again.
I have tried unsuccessfully to do this with CSS, is there a succinct way to do it with Javascript?
Thanks in advance for your comments.
Ben
You can repeat the animation using animation-iteration-count:
-moz-animation-iteration-count: 3; /* Firefox 5 -> 15 */
-webkit-animation-iteration-count: 3; /* Chrome, Safari, Opera */
animation-iteration-count: 3; /* Firefox 16, IE 10 */
Not supported in IE 9 and earlier.
You can also use the value infinite to repeat over and over.
Edit:
As I commented you can try with cubic-bezier:
Use no delay, and animation-duration:10s. You can try with these cubic-bezier values on the animation-timing-function for the four images:
animation-timing-function: cubic-bezier(0.2, 0.0, 0.0, 1.5);
animation-timing-function: cubic-bezier(0.4,-0.7, 0.4, 1.8);
animation-timing-function: cubic-bezier(0.7,-1.7, 0.7, 1.8);
animation-timing-function: cubic-bezier(0.9,-1.6, 0.8, 0.8);
I have not tried this myself, and I am not sure how well it works with the values that are < 0 and > 1 (which is not standard).
If you want to play around with how the cubic-bezier is set up, you can use the tool at http://cubic-bezier.com to help finding useful values.
You said the your client just wanted the animation to play normally, then play in reverse and then repeat.
It so happens that there is a CSS property called animation-direction. This property states whether the animation plays normally or in reverse. Use animation-direction: alternate; to – as the property value indicates – alternate between playing normally and in reverse.
Read more here: MDN: animation-direction
Hope this helps :)