How to create custom CSS3 loading circle?

How to create custom CSS3 loading circle? - javascript

I want to create CSS3 loading circle like this one:
the inner circle will grow using timer.
the problem what is the technique that I can use to grow the inner circle like this way?
I have this CSS code:
.circle {
width:100px;
height:100px;
border-radius:50px;
background:#fff;
}
.circle is just a div
the outer circle can be used as background image because it will be static. it will never change, only the inner one will change according to timer.

HTML
In this first example, create only two div and thanks to the border-radius property, they will take the circle shape.
<div class="ball"></div>
<div class="ball1"></div>
CSS
For the CSS style is very simple, just play with the parameters for the graphic you want, as regards the animation simply use the transform:rotateproperty.
.ball {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-top: 5px solid rgba(0,0,0,0);
border-left: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 35px #2187e7;
width: 50px;
height: 50px;
margin: 0 auto;
-moz-animation: spin .5s infinite linear;
-webkit-animation: spin .5s infinite linear;
}
.ball1 {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-top: 5px solid rgba(0,0,0,0);
border-left: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 15px #2187e7;
width: 30px;
height: 30px;
margin: 0 auto;
position: relative;
top: -50px;
-moz-animation: spinoff .5s infinite linear;
-webkit-animation: spinoff .5s infinite linear;
}
#-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
};
}
#-moz-keyframes spinoff {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(-360deg);
};
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
};
}
#-webkit-keyframes spinoff {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
};
}
Second Example CSS3 Loading Animation Loop
HTML
The second example is the same as the precedent for the markup, the main difference you'll find it in the CSS.
<div class="circle"></div>
<div class="circle1"></div>
CSS
Simply in this example we are going to act on the rotation, and more we insert an animation that will allow us to have an pulse effect.
This effect will be active only in the first circle.
.circle {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-right: 5px solid rgba(0,0,0,0);
border-left: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 35px #2187e7;
width: 50px;
height: 50px;
margin: 0 auto;
-moz-animation: spinPulse 1s infinite ease-in-out;
-webkit-animation: spinPulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-left: 5px solid rgba(0,0,0,0);
border-right: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 15px #2187e7;
width: 30px;
height: 30px;
margin: 0 auto;
position: relative;
top: -50px;
-moz-animation: spinoffPulse 1s infinite linear;
-webkit-animation: spinoffPulse 1s infinite linear;
}
#-moz-keyframes spinPulse {
0% {
-moz-transform: rotate(160deg);
opacity: 0;
box-shadow: 0 0 1px #2187e7;
}
50% {
-moz-transform: rotate(145deg);
opacity: 1;
}
100% {
-moz-transform: rotate(-320deg);
opacity: 0;
};
}
#-moz-keyframes spinoffPulse {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
};
}
#-webkit-keyframes spinPulse {
0% {
-webkit-transform: rotate(160deg);
opacity: 0;
box-shadow: 0 0 1px #2187e7;
}
50% {
-webkit-transform: rotate(145deg);
opacity: 1;
}
100% {
-webkit-transform: rotate(-320deg);
opacity: 0;
};
}
#-webkit-keyframes spinoffPulse {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
};
}
Third Example CSS3 Loading Animation Loop
HTML
In this latest example we find a simple loop that is animated thanks to the transform:scale property.
The markup is longer than its predecessors, but this can vary according to the blocks you want to insert.
<div id="block_1" class="barlittle"></div>
<div id="block_2" class="barlittle"></div>
<div id="block_3" class="barlittle"></div>
<div id="block_4" class="barlittle"></div>
<div id="block_5" class="barlittle"></div>
CSS
Here the style is much easier to handle since we're going to take to apply the effect to animation:delay property of each block.
.barlittle {
background-color: #2187e7;
background-image: -moz-linear-gradient(45deg, #2187e7 25%, #a0eaff);
background-image: -webkit-linear-gradient(45deg, #2187e7 25%, #a0eaff);
border-left: 1px solid #111;
border-top: 1px solid #111;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
width: 10px;
height: 10px;
float: left;
margin-left: 5px;
opacity: 0.1;
-moz-transform: scale(0.7);
-webkit-transform: scale(0.7);
-moz-animation: move 1s infinite linear;
-webkit-animation: move 1s infinite linear;
}
#block_1 {
-moz-animation-delay: .4s;
-webkit-animation-delay: .4s;
}
#block_2 {
-moz-animation-delay: .3s;
-webkit-animation-delay: .3s;
}
#block_3 {
-moz-animation-delay: .2s;
-webkit-animation-delay: .2s;
}
#block_4 {
-moz-animation-delay: .3s;
-webkit-animation-delay: .3s;
}
#block_5 {
-moz-animation-delay: .4s;
-webkit-animation-delay: .4s;
}
#-moz-keyframes move {
0% {
-moz-transform: scale(1.2);
opacity: 1;
}
100% {
-moz-transform: scale(0.7);
opacity: 0.1;
};
}
#-webkit-keyframes move {
0% {
-webkit-transform: scale(1.2);
opacity: 1;
}
100% {
-webkit-transform: scale(0.7);
opacity: 0.1;
};
}
Conclusion
I hope that with this tutorial you learned how to create simple animations loop using only the CSS3 properties.

<style>
#floatingCirclesG{
position:relative;
width:128px;
height:128px;
-moz-transform:scale(0.6);
-webkit-transform:scale(0.6);
-ms-transform:scale(0.6);
-o-transform:scale(0.6);
transform:scale(0.6);
}
.f_circleG{
position:absolute;
background-color:#FFFFFF;
height:23px;
width:23px;
-moz-border-radius:12px;
-moz-animation-name:f_fadeG;
-moz-animation-duration:1.04s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:12px;
-webkit-animation-name:f_fadeG;
-webkit-animation-duration:1.04s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:12px;
-ms-animation-name:f_fadeG;
-ms-animation-duration:1.04s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:12px;
-o-animation-name:f_fadeG;
-o-animation-duration:1.04s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:12px;
animation-name:f_fadeG;
animation-duration:1.04s;
animation-iteration-count:infinite;
animation-direction:linear;
}
#frotateG_01{
left:0;
top:52px;
-moz-animation-delay:0.39s;
-webkit-animation-delay:0.39s;
-ms-animation-delay:0.39s;
-o-animation-delay:0.39s;
animation-delay:0.39s;
}
#frotateG_02{
left:15px;
top:15px;
-moz-animation-delay:0.52s;
-webkit-animation-delay:0.52s;
-ms-animation-delay:0.52s;
-o-animation-delay:0.52s;
animation-delay:0.52s;
}
#frotateG_03{
left:52px;
top:0;
-moz-animation-delay:0.65s;
-webkit-animation-delay:0.65s;
-ms-animation-delay:0.65s;
-o-animation-delay:0.65s;
animation-delay:0.65s;
}
#frotateG_04{
right:15px;
top:15px;
-moz-animation-delay:0.78s;
-webkit-animation-delay:0.78s;
-ms-animation-delay:0.78s;
-o-animation-delay:0.78s;
animation-delay:0.78s;
}
#frotateG_05{
right:0;
top:52px;
-moz-animation-delay:0.91s;
-webkit-animation-delay:0.91s;
-ms-animation-delay:0.91s;
-o-animation-delay:0.91s;
animation-delay:0.91s;
}
#frotateG_06{
right:15px;
bottom:15px;
-moz-animation-delay:1.04s;
-webkit-animation-delay:1.04s;
-ms-animation-delay:1.04s;
-o-animation-delay:1.04s;
animation-delay:1.04s;
}
#frotateG_07{
left:52px;
bottom:0;
-moz-animation-delay:1.17s;
-webkit-animation-delay:1.17s;
-ms-animation-delay:1.17s;
-o-animation-delay:1.17s;
animation-delay:1.17s;
}
#frotateG_08{
left:15px;
bottom:15px;
-moz-animation-delay:1.3s;
-webkit-animation-delay:1.3s;
-ms-animation-delay:1.3s;
-o-animation-delay:1.3s;
animation-delay:1.3s;
}
#-moz-keyframes f_fadeG{
0%{
background-color:#000000}
100%{
background-color:#FFFFFF}
}
#-webkit-keyframes f_fadeG{
0%{
background-color:#000000}
100%{
background-color:#FFFFFF}
}
#-ms-keyframes f_fadeG{
0%{
background-color:#000000}
100%{
background-color:#FFFFFF}
}
#-o-keyframes f_fadeG{
0%{
background-color:#000000}
100%{
background-color:#FFFFFF}
}
#keyframes f_fadeG{
0%{
background-color:#000000}
100%{
background-color:#FFFFFF}
}
</style>
<div id="floatingCirclesG">
<div class="f_circleG" id="frotateG_01">
</div>
<div class="f_circleG" id="frotateG_02">
</div>
<div class="f_circleG" id="frotateG_03">
</div>
<div class="f_circleG" id="frotateG_04">
</div>
<div class="f_circleG" id="frotateG_05">
</div>
<div class="f_circleG" id="frotateG_06">
</div>
<div class="f_circleG" id="frotateG_07">
</div>
<div class="f_circleG" id="frotateG_08">
</div>
</div>
To create such Loader, you may try http://cssload.net/

Related

How do I target the new string to a specific span?

I'm using the 'success' event from Clipboard.JS to change the button text after some one have click it to provide a feedback that the text is successfully copied.
There are multiple span inside the button element, the feedback/new string (Copied!) will replace the original text (Take Me There) and be applied to the first span when the function is invoked.
If the feedback/new string apply to the first span, then the original text (Take Me There) will not be replaced instead the feedback will be appear on top since it applied to the first span.
How do I make the new string to the span that include the original text(the last span)? Please try to run the code for clearer illustration.
Below is my code:
var clipboard = new ClipboardJS('.copyElement')
clipboard.on('success', function(e) {
let span = e.trigger.querySelector('span')
let oldtext = span.textContent
span.textContent = 'Copied!'
setTimeout(() => span.textContent = oldtext, 2000)
});
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 330px;
background-color: #000;
}
.Big {
width: 257px;
padding: 33px 0 30px 0;
font-size: 21px;
}
.RedPhotonEffect {
color: rgba(239, 71, 111, 1);
overflow: hidden;
position: relative;
border: none;
background-color: rgba(239, 71, 111, 0.12);
cursor: pointer;
}
.RedPhotonEffect span:nth-child(1){
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(to right, #000, #ef476f);
animation: animate1 3s linear infinite;
animation-delay: 1.5s;
}
#keyframes animate1 {
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(100%);
}
}
.RedPhotonEffect span:nth-child(2){
position:absolute;
top: 0;
right: 0;
width: 3px;
height: 100%;
background: linear-gradient(to bottom, #000, #ef476f);
animation: animate2 3s linear infinite;
}
#keyframes animate2 {
0%{
transform: translateY(-100%);
}
100%{
transform: translateY(100%);
}
}
.RedPhotonEffect span:nth-child(3){
position:absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(to left, #000, #ef476f);
animation: animate3 3s linear infinite;
animation-delay: 1.5s;
}
#keyframes animate3 {
0%{
transform: translateX(100%);
}
100%{
transform: translateX(-100%);
}
}
.RedPhotonEffect span:nth-child(4){
position:absolute;
bottom: 0;
left: 0;
width: 3px;
height: 100%;
background: linear-gradient(to top, #000, #ef476f);
animation: animate4 3s linear infinite;
}
#keyframes animate4 {
0%{
transform: translateY(100%);
}
100%{
transform: translateY(-100%);
}
}
<button
class="copyElement RedPhotonEffect Big"
data-clipboard-text="123"
>
<span></span>
<span></span>
<span></span>
<span></span>
<span>Take Me There</span>
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

Then try using a class instead
var clipboard = new ClipboardJS('.copyElement')
clipboard.on('success', function(e) {
let span = e.trigger.querySelector('.label')
let oldtext = span.textContent
span.textContent = 'Copied!'
setTimeout(() => span.textContent = oldtext, 2000)
});
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 330px;
background-color: #000;
}
.Big {
width: 257px;
padding: 33px 0 30px 0;
font-size: 21px;
}
.RedPhotonEffect {
color: rgba(239, 71, 111, 1);
overflow: hidden;
position: relative;
border: none;
background-color: rgba(239, 71, 111, 0.12);
cursor: pointer;
}
.RedPhotonEffect span:nth-child(1){
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(to right, #000, #ef476f);
animation: animate1 3s linear infinite;
animation-delay: 1.5s;
}
#keyframes animate1 {
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(100%);
}
}
.RedPhotonEffect span:nth-child(2){
position:absolute;
top: 0;
right: 0;
width: 3px;
height: 100%;
background: linear-gradient(to bottom, #000, #ef476f);
animation: animate2 3s linear infinite;
}
#keyframes animate2 {
0%{
transform: translateY(-100%);
}
100%{
transform: translateY(100%);
}
}
.RedPhotonEffect span:nth-child(3){
position:absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(to left, #000, #ef476f);
animation: animate3 3s linear infinite;
animation-delay: 1.5s;
}
#keyframes animate3 {
0%{
transform: translateX(100%);
}
100%{
transform: translateX(-100%);
}
}
.RedPhotonEffect span:nth-child(4){
position:absolute;
bottom: 0;
left: 0;
width: 3px;
height: 100%;
background: linear-gradient(to top, #000, #ef476f);
animation: animate4 3s linear infinite;
}
#keyframes animate4 {
0%{
transform: translateY(100%);
}
100%{
transform: translateY(-100%);
}
}
<button
class="copyElement RedPhotonEffect Big"
data-clipboard-text="123"
>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="label">Take Me There</span>
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

Repeating the whole css sequence in loop

I have a piece of a code which animates text within a div. I want this whole animation to repeat in loop. It's important to keep all files internal as it's going to be a GoogleAds advert and they don't accept external links. Ideally if that can be done using CSS or plain javascript (not jquery)
Here is the code:
* {
font-family: 'Comfortaa'
}
.ad {
margin: 0 auto;
overflow: hidden;
position: relative;
color: #3a3a3a;
background: #0E6AAD;
width: 300px;
height: 250px;
background-size: 300px 250px;
}
.h1-background {
color: white;
text-align: center;
}
h1 {
font-family: 'Baloo';
position: relative;
padding: 10px;
padding-bottom: 0;
font-size: 24px;
font-weight: normal;
margin: 0;
z-index: 1;
}
h2 {
position: relative;
padding: 0 10px;
font-size: 16px;
z-index: 1;
}
<div class="ad">
<div class="h1-background">
<h1 class="slide-up-fade-in">Title
<h1>
<h2 class="slide-up-fade-in delay-2">subtitle subtitle subtitle</h2>
</div>
<button id="cta" class="slide-up-fade-in delay-1">
read more
</button>
</div>
jfiddle here
Thank you for help.

I hope this is what you are expecting.
setInterval(function(){
document.getElementById("cta").classList.remove("slide-up-fade-in");
document.getElementById("cta").classList.remove("delay-1");
document.getElementById("subtitle").classList.remove("slide-up-fade-in");
document.getElementById("subtitle").classList.remove("delay-2");
document.getElementById("title").classList.remove("slide-up-fade-in");
}, 2900);
setInterval(function(){
document.getElementById("title").classList.add("slide-up-fade-in");
document.getElementById("subtitle").classList.add("slide-up-fade-in");
document.getElementById("subtitle").classList.add("delay-2");
document.getElementById("cta").classList.add("slide-up-fade-in");
document.getElementById("cta").classList.add("delay-1");
}, 3000);
* {
font-family:'Comfortaa'
}
.ad{
margin:0 auto;
overflow:hidden;
position:relative;
color:#3a3a3a;
background: #0E6AAD;
width:300px; height:250px;
background-size: 300px 250px;
}
.h1-background{
color:white;
text-align:center;
}
h1{
font-family:'Baloo';
position:relative;
padding:10px;
padding-bottom:0;
font-size:24px;
font-weight:normal;
margin:0;
z-index:1;
}
h2{
position:relative;
padding:0 10px;
font-size:16px;
z-index:1;
}
button{
padding:10px 20px;
font-size:12px;
background-color:#4285f4;
border:none;
color:white;
position:fixed;
cursor:pointer;
border-radius:50px;
width:180px;
left: 50%;
margin-left: -90px; /*half the width*/
z-index:9999;
top:210px;
}
.slide-up-fade-in{
animation: slide-up-fade-in ease 0.5s infinite;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards; /*when the spec is finished*/
-webkit-animation: slide-up-fade-in ease 0.5s infinite;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
-moz-animation: slide-up-fade-in ease 0.5s infinite;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode:forwards; /*FF 5+*/
-o-animation: slide-up-fade-in ease 0.5s infinite;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode:forwards; /*Not implemented yet*/
-ms-animation: slide-up-fade-in ease 0.5s infinite;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode:forwards; /*IE 10+*/
opacity:0;
opacity: 1\9;
}
.delay-1{animation-delay: 0.25s;}
.delay-2{animation-delay: 0.5s;}
#keyframes slide-up-fade-in{
0% {
opacity:0;
transform: translate(0px,60px) ;
}
100% {
opacity:1;
transform: translate(0px,0px) ;
}
}
#-moz-keyframes slide-up-fade-in{
0% {
opacity:0;
-moz-transform: translate(0px,60px) ;
}
100% {
opacity:1;
-moz-transform: translate(0px,0px) ;
}
}
#-webkit-keyframes slide-up-fade-in {
0% {
opacity:0;
-webkit-transform: translate(0px,60px) ;
}
100% {
opacity:1;
-webkit-transform: translate(0px,0px) ;
}
}
#-o-keyframes slide-up-fade-in {
0% {
opacity:0;
-o-transform: translate(0px,60px) ;
}
100% {
opacity:1;
-o-transform: translate(0px,0px) ;
}
}
#-ms-keyframes slide-up-fade-in {
0% {
opacity:0;
-ms-transform: translate(0px,60px) ;
}
100% {
opacity:1;
-ms-transform: translate(0px,0px) ;
}
}
<div class="ad">
<div class="h1-background">
<h1 id="title" class="slide-up-fade-in">Title<h1>
<h2 id="subtitle" class="slide-up-fade-in delay-2">subtitle subtitle subtitle</h2>
</div>
<button id="cta" class="slide-up-fade-in delay-1">
read more
</button>
</div>
or in jsfidle : https://jsfiddle.net/hbw1uetr/22/
EDIT
If you want to loop n times you need to specify when you want to destroy the setInterval function. Tou can find the updated jsfiddle https://jsfiddle.net/hbw1uetr/59/
function setIntervalX(callback, delay, repetitions) {
var x = 0;
var intervalID = window.setInterval(function () {
callback();
if (++x === repetitions) {
window.clearInterval(intervalID);
}
}, delay);
}
setIntervalX(function () {
document.getElementById("cta").classList.remove("slide-up-fade-in");
document.getElementById("cta").classList.remove("delay-1");
document.getElementById("subtitle").classList.remove("slide-up-fade-in");
document.getElementById("subtitle").classList.remove("delay-2");
document.getElementById("title").classList.remove("slide-up-fade-in");
}, 2900, 2);
setIntervalX(function () {
document.getElementById("title").classList.add("slide-up-fade-in");
document.getElementById("subtitle").classList.add("slide-up-fade-in");
document.getElementById("subtitle").classList.add("delay-2");
document.getElementById("cta").classList.add("slide-up-fade-in");
document.getElementById("cta").classList.add("delay-1");
}, 3000, 2); //2 is the number of repition
* {
font-family:'Comfortaa'
}
.ad{
margin:0 auto;
overflow:hidden;
position:relative;
color:#3a3a3a;
background: #0E6AAD;
width:300px; height:250px;
background-size: 300px 250px;
}
.h1-background{
color:white;
text-align:center;
}
h1{
font-family:'Baloo';
position:relative;
padding:10px;
padding-bottom:0;
font-size:24px;
font-weight:normal;
margin:0;
z-index:1;
}
h2{
position:relative;
padding:0 10px;
font-size:16px;
z-index:1;
}
button{
padding:10px 20px;
font-size:12px;
background-color:#4285f4;
border:none;
color:white;
position:fixed;
cursor:pointer;
border-radius:50px;
width:180px;
left: 50%;
margin-left: -90px; /*half the width*/
z-index:9999;
top:210px;
}
.slide-up-fade-in{
animation: slide-up-fade-in ease 0.5s infinite;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards; /*when the spec is finished*/
-webkit-animation: slide-up-fade-in ease 0.5s infinite;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
-moz-animation: slide-up-fade-in ease 0.5s infinite;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode:forwards; /*FF 5+*/
-o-animation: slide-up-fade-in ease 0.5s infinite;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode:forwards; /*Not implemented yet*/
-ms-animation: slide-up-fade-in ease 0.5s infinite;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode:forwards; /*IE 10+*/
opacity:0;
opacity: 1\9;
}
.delay-1{animation-delay: 0.25s;}
.delay-2{animation-delay: 0.5s;}
#keyframes slide-up-fade-in{
0% {
opacity:0;
transform: translate(0px,60px) ;
}
100% {
opacity:1;
transform: translate(0px,0px) ;
}
}
#-moz-keyframes slide-up-fade-in{
0% {
opacity:0;
-moz-transform: translate(0px,60px) ;
}
100% {
opacity:1;
-moz-transform: translate(0px,0px) ;
}
}
#-webkit-keyframes slide-up-fade-in {
0% {
opacity:0;
-webkit-transform: translate(0px,60px) ;
}
100% {
opacity:1;
-webkit-transform: translate(0px,0px) ;
}
}
#-o-keyframes slide-up-fade-in {
0% {
opacity:0;
-o-transform: translate(0px,60px) ;
}
100% {
opacity:1;
-o-transform: translate(0px,0px) ;
}
}
#-ms-keyframes slide-up-fade-in {
0% {
opacity:0;
-ms-transform: translate(0px,60px) ;
}
100% {
opacity:1;
-ms-transform: translate(0px,0px) ;
}
}
<div class="ad">
<div class="h1-background">
<h1 id="title" class="slide-up-fade-in">Title<h1>
<h2 id="subtitle" class="slide-up-fade-in delay-2">subtitle subtitle subtitle</h2>
</div>
<button id="cta" class="slide-up-fade-in delay-1">
read more
</button>
</div>

try this:
.slide-up-fade-in{
animation: slide-up-fade-in ease 4s;
animation-iteration-count: infinite;
animation-delay: 0.25s;
}
.delay-1{animation-delay: 0.25s;}
.delay-2{animation-delay: 0.25s;}

I have found another way of doing this (looping 3 times):
.slide-up-fade-in{
animation: slide-up-fade-in ease 5s;
animation-iteration-count: 3;
animation-delay: 1.25s;
}
.delay-1{animation-delay: 1.25s;}
.delay-2{animation-delay: 1.5s;}
#keyframes slide-up-fade-in{
0% {
opacity:0;
transform: translate(0px,60px) ;
}
10% {
opacity:1;
transform: translate(0px,0px) ;
}
100% {
opacity:1;
transform: translate(0px,0px) ;
}
}
for looping forever, replace animation0iteration-count from 3 to infinite

Getting image to display after hiding it

I am working on a slideout nav screen. I got the horizontal slide out menu to work perfectly without media queries, but when I tried to add my slide out navigation menu to my normal navigation menu, I cannot get the three line hamburger menu image to display when in a media screen on max-width: 640px;. I hide the nav-btn (menu image) when the normal navigation menu is displaying, but I want the nav-btn to display when I get to the smaller screen size to allow me to open the menu.
Does anyone see why my nav-btn will not display within my media query?
//open the lateral panel
$('.nav-btn').on('click', function(event){
event.preventDefault();
$('.nav-panel').addClass('is-visible');
});
//clode the lateral panel
$('.nav-panel').on('click', function(event){
if( $(event.target).is('.nav-panel') || $(event.target).is('.nav-panel-close') ) {
$('.nav-panel').removeClass('is-visible');
event.preventDefault();
}
});
.nav_list {
text-decoration: none;
background-color: #F0F0F0;
margin: 0;
list-style: none;
text-align: right;
width: 100%;
padding: 0;
}
.nav_list > a {
display: inline-block;
padding: 25px 15px;
text-decoration: none;
}
.nav_list > a > li {
text-decoration: none;
font-size: 1.2em;
color: #45a5ba;
}
.nav_list > a:hover {
color: #FFF;
background-color: #CCC;
}
.nav-btn {
display: none;
}
/*.nav-panel {
display: none;
}*/
#media screen and (max-width:640px) {
.header {
display: none;
}
.nav-panel {
display: block;
}
.nav_list {
text-decoration: none;
background-color: #F0F0F0;
margin: 0;
list-style: none;
text-align: right;
width: 100%;
padding: 0;
}
.nav_list > a {
display: block;
padding: 15px 15px;
text-decoration: none;
/*border-bottom: 1px solid #FFF;*/
}
.nav_list > a > li {
text-decoration: none;
font-size: 1.2em;
color: #45a5ba;
}
.nav_list > a:hover {
color: #FFF;
background-color: #CCC;
}
.nav-btn {
position: absolute;
display: block;
right: 2%;
top: 3%;
}
.nav-panel {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
visibility: hidden;
-webkit-transition: visibility 1s;
-moz-transition: visibility 1s;
transition: visibility 1s;
}
.nav-panel::after {
/* overlay layer */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
-webkit-transition: background 0.8s 0.8s;
-moz-transition: background 0.8s 0.8s;
transition: background 0.8s 0.8s;
}
.nav-panel.is-visible {
visibility: visible;
-webkit-transition: visibility 0s 0s;
-moz-transition: visibility 0s 0s;
transition: visibility 0s 0s;
}
.nav-panel.is-visible::after {
background: rgba(0, 0, 0, 0.6);
-webkit-transition: background 0.3s 0s;
-moz-transition: background 0.3s 0s;
transition: background 0.3s 0s;
}
.nav-panel.is-visible .nav-panel-close::before {
-webkit-animation: cd-close-1 0.6s 0.3s;
-moz-animation: cd-close-1 0.6s 0.3s;
animation: cd-close-1 0.6s 0.3s;
}
.nav-panel.is-visible .nav-panel-close::after {
-webkit-animation: cd-close-2 0.6s 0.3s;
-moz-animation: cd-close-2 0.6s 0.3s;
animation: cd-close-2 0.6s 0.3s;
}
#-webkit-keyframes cd-close-1 {
0%, 50% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(45deg);
}
}
#-moz-keyframes cd-close-1 {
0%, 50% {
-moz-transform: rotate(0);
}
100% {
-moz-transform: rotate(45deg);
}
}
#keyframes cd-close-1 {
0%, 50% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
}
#-webkit-keyframes cd-close-2 {
0%, 50% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(-45deg);
}
}
#-moz-keyframes cd-close-2 {
0%, 50% {
-moz-transform: rotate(0);
}
100% {
-moz-transform: rotate(-45deg);
}
}
#keyframes cd-close-2 {
0%, 50% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
.nav-panel-header {
position: fixed;
width: 70%;
height: 50px;
line-height: 50px;
background: rgba(255, 255, 255, 0.96);
z-index: 2;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
-webkit-transition: top 0.3s 0s;
-moz-transition: top 0.3s 0s;
transition: top 0.3s 0s;
}
#nav-slide-title {
font-weight: bold;
color: #45a5ba;
padding-left: 5%;
}
.from-right .nav-panel-header, .from-left .nav-panel-header {
top: -50px;
}
.from-right .nav-panel-header {
right: 0;
}
.from-left .nav-panel-header {
left: 0;
}
.is-visible .nav-panel-header {
top: 0;
-webkit-transition: top 0.3s 0.3s;
-moz-transition: top 0.3s 0.3s;
transition: top 0.3s 0.3s;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header class="header">
<div class="header_wrap">
<div class="logo">Optimum Designs</div>
<nav>
<img src="http://optimumwebdesigns.com/icons/mobile_menu_bttn.png" style="height: 28px; width: 28px;">
<!-- <span class="nav-btn"></span> -->
<ul class="nav_list">
<li>Home</li>
<li>Work</li>
<li>Approach</li>
<li>Company</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<main class="cd-main-content">
<h1>Slide In Panel</h1>
</main>
<div class="nav-panel from-right">
<header class="nav-panel-header">
<div id="nav-slide-title">Menu</div>
Close
</header>
<div class="nav-panel-container">
<div class="nav-panel-content">
<ul class="nav_list">
<li>Home</li>
<li>Work</li>
<li>Approach</li>
<li>Company</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div> <!-- nav-panel-content -->
</div> <!-- nav-panel-container -->
</div> <!-- nav-panel -->

I figured it out. I had the nav-btn within my header div. I was doing this .header {display: none;} which was not allowing my button to show within my media query.
For those that looked, thanks.

Text rendering changing un-expectedly

I've got an issue which I'm struggling to isolate whereby some of my text changes it appearance, looking slightly more bold than other times. This is in sync with a "pulsing" effect I've introduced, but I'm struggling to see why.
Here's an example of the affect. Things to look for in this animated GIF:
Name: Notice the exclamation mark that appears with a grey pulse over it
Server Item/Item Type/File Extension: Watch carefully and you'll see the text get bolder
Note that the other changes (the larger exclamation and the Item Type data changing and irrelevant, I've since commented out and still see the affect).
EDIT I've managed to get a reproduction and updated the snippet to this affect.
I should note that I've only seen this in Chrome. Firefox seems fine, IE unfortunately doesn't yet work with the codebase so I can't test until I get a reproduction working.
What the code below does is to simply toggle an animate class on a new <span class="pulse"> that has been added. This should trigger the CSS animation to kick in again, which changes the size of the grey pulse.
// Sets up a pulsing affect on any invalid icons within the Deck
(function () {
setInterval(function () {
// Check for any invalid classes, if none were found then just return
var cardErrors = $(".card.invalid");
if (cardErrors.length === 0) return;
function pulse(selection, size, position) {
var missingPulses = selection.filter(function (index, element) {
return $(element).find(".pulse").length === 0;
});
missingPulses.prepend("<div class='pulse'></div>");
// Find the pulse and remove the animation class
var pulse = selection.find(".pulse");
pulse.removeClass("animate");
// Define the pulse size if it's not done already
if (!pulse.filter(function (index, element) {
return !pulse.height() && !pulse.width();
}).length !== 0) {
pulse.css(size);
pulse.css(position);
}
//set the position and add class .animate
//pulse.css(position)
pulse.addClass("animate");
}
pulse(cardErrors, {
height: 12,
width: 12
}, {
top: 11 + 'px',
left: 316 + 'px'
});
}, 2500);
})();
.pulse {
display: block;
position: absolute;
background: #555;
border-radius: 100%;
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
}
/*animation effect*/
.pulse.animate {
-moz-animation: pulse-ripple 0.65s linear;
-o-animation: pulse-ripple 0.65s linear;
-webkit-animation: pulse-ripple 0.65s linear;
animation: pulse-ripple 0.65s linear;
}
#keyframes pulse-ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
/* Mixins */
/* Comment here */
html {
height: 100%;
}
body {
height: 100%;
}
body {
scrollbar-base-color: #999;
scrollbar-track-color: #EBEBEB;
scrollbar-arrow-color: black;
scrollbar-shadow-color: #C0C0C0;
scrollbar-dark-shadow-color: #C0C0C0;
}
::-webkit-scrollbar {
width: 10px;
height: 30px;
}
::-webkit-scrollbar-button {
height: 0px;
}
::-webkit-scrollbar-track-piece {
background-color: #EBEBEB;
}
::-webkit-scrollbar-thumb {
height: 20px;
background-color: #999;
border-radius: 5px;
}
::-webkit-scrollbar-corner {
background-color: #999;
}
::-webkit-resizer {
background-color: #999;
}
.deck {
background: rgba(250, 250, 251, 0.88);
position: absolute;
top: 0;
right: 0;
width: 345px;
padding: 10px 10px 10px 10px;
opacity: 1;
height: 100%;
z-index: 10;
}
.deck .scrollable {
overflow-y: scroll;
width: 338px;
height: 100%;
padding-right: 7px;
}
.deck .non-scrollable {
width: 338px;
overflow: hidden;
}
.deck .non-scrollable .card {
width: 338px !important;
}
.deck .card {
margin-bottom: 11px;
background: #FFFFFF;
float: right;
clear: both;
font-family:'Open Sans', Arial, sans-serif;
width: 318px;
padding: 10px 12px 10px 12px;
-moz-transition: box-shadow 0.5s ease;
-webkit-transition: box-shadow 0.5s ease;
-o-transition: box-shadow 0.5s ease;
transition: box-shadow 0.5s ease;
box-shadow: 0px 1px 5px 1px rgba(198, 198, 198, 0.75);
/*relative positioning for list items along with overflow hidden to contain the overflowing ripple*/
position: relative;
overflow: hidden !important;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* remove padding added by bootstrap, but only within cards */
}
.deck .card[class*='col-'] {
padding-right: 0;
padding-left: 0;
}
.deck .card.summary-card {
cursor: pointer;
/* https://github.com/ConnorAtherton/loaders.css MIT */
}
.deck .card.summary-card:hover {
box-shadow: 10px 10px 50px 0px #c6c6c6;
}
.deck .card.summary-card .title {
color: #33BDDE;
font-size: 14px;
font-weight: normal;
display: block;
padding-bottom: 5px;
padding-left: 10px;
}
.deck .card.summary-card .notification {
top: 5px;
right: 5px;
width: 20px;
height: 20px;
position: absolute;
}
.deck .card.summary-card.busy .notification {
border-radius: 100%;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
border: 3px solid #33BDDE;
border-bottom-color: transparent;
height: 15px;
width: 15px;
background: transparent !important;
display: inline-block;
-webkit-animation: rotate 1.25s 0s linear infinite;
-moz-animation: rotate 1.25s 0s linear infinite;
-o-animation: rotate 1.25s 0s linear infinite;
animation: rotate 1.25s 0s linear infinite;
}
.deck .card.summary-card.filtered .notification:before {
position: relative;
font-family: FontAwesome;
top: 0px;
left: 0px;
color: #33BDDE;
font-size: 18px;
content:"\f0b0";
}
.deck .card.summary-card .content {
padding: 0 0 0 0;
}
.deck .card.summary-card .content .label {
color: #303E45;
font-size: 12px;
font-weight: normal;
float: left;
}
.deck .card.summary-card .content .value {
color: #8BC34A;
font-size: 12px;
font-weight: normal;
float: right;
}
.deck .card.summary-card .content .ellipsis {
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
#keyframes rotate {
0% {
-moz-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
100% {
-moz-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
}
/* ripple effect from http://thecodeplayer.com/walkthrough/ripple-click-effect-google-material-design */
/*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/
.ink {
display: block;
position: absolute;
background: rgba(198, 198, 198, 0.5);
border-radius: 100%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
/* animation effect */
.ink.animate {
-webkit-animation: ripple 0.65s linear;
-moz-animation: ripple 0.65s linear;
-o-animation: ripple 0.65s linear;
animation: ripple 0.65s linear;
}
#-webkit-keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
#-moz-keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
#keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
#-webkit-keyframes rotate {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* end of cards menu */
/* tooltips */
.dxc-tooltip {
z-index: 20;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="deck">
<div class="scrollable">
<div>
<div class="card summary-card string-card aggregate-card clickable filtered invalid" id="FI.NAM">
<div class="notification"></div> <span class="title" data-bind="text: name">Name</span>
</div>
</div>
<div>
<div class="card summary-card string-card aggregate-card clickable" id="FI.SER">
<div class="notification"></div> <span class="title" data-bind="text: name">Server Item</span>
</div>
</div>
<div>
<div class="card summary-card string-card aggregate-card clickable" id="FI.FIL">
<div class="notification"></div> <span class="title" data-bind="text: name">File Extension</span>
</div>
</div>
</div>
</div>

Create a Searchlight Animation with CSS or JS

I'm trying to create an animated searchlight with css or javascript, whichever performs better. I threw together something with CSS: http://codepen.io/jhlavac/pen/bNprea
Hopefully that will give you an idea of where I'm going with this.
HTML
<div id="wrapper">
<div id="light_beam"></div>
</div>
CSS
body{
background:black;
}
#wrapper{
position: relative;
height:460px;
}
#light_beam {
position: absolute;
bottom:0;
left:500px;
width: 0;
height: 0;
border-top: 400px solid yellow;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
#light_beam {
-webkit-transition: all 2s;
-moz-transition: all 2s;
-o-transition: all 2s;
-ms-transition: all 2s;
}
#light_beam {
-ms-transform: skew(50deg,0deg);
-webkit-transform: skew(50deg,0deg);
transform: skew(50deg,0deg);
}
#light_beam:hover {
left: 850px;
-ms-transform: skew(-50deg,0deg);
-webkit-transform: skew(-50deg,0deg);
transform: skew(-50deg,0deg);
}
The problem is that the bottom of the light beam moves during the animation. I need it to remain stationary, while the beam moves across the page. Anybody have any ideas?

Use transform-origin: 100% 100% on #light-beam:hover to make it fixed.
codepen
body {
background: black;
}
#wrapper {
position: relative;
height: 460px;
overflow: hidden;
}
#light_beam {
position: absolute;
bottom: 0;
left: 500px;
width: 0;
height: 0;
border-top: 400px solid yellow;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
#light_beam {
-webkit-transition: all 2s;
transition: all 2s;
}
#light_beam {
-webkit-transform: skew(50deg, 0deg);
transform: skew(50deg, 0deg);
transform: skew(50deg, 0deg);
transform-origin: 100% 100%;
}
#light_beam:hover {
left: 850px;
-webkit-transform: skew(-50deg, 0deg);
transform: skew(-50deg, 0deg);
transform-origin: 100% 100%;
}
<div id="wrapper">
<div id="light_beam"></div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

How to create custom CSS3 loading circle? - javascript

Related

How do I target the new string to a specific span?

Repeating the whole css sequence in loop

Getting image to display after hiding it

Text rendering changing un-expectedly

Create a Searchlight Animation with CSS or JS

Categories

Resources