I want to create a full screen overlay menu. I am not able to close the menu on anchor click eg. if we click on Home. It scrolls down to the section but does not close the overlay.
I have tried adding some jquery but I am not able to do it. I have tried to toggle the menus as done on clicking the cross but no success.
$('#toggle').click(function () {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
});
$(".fulloverlay a").on("click", function() {
$('#toggle').toggleClass('active');
$('#overlay').toggleClass('open');
});
.container {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
top: 40%;
left: 0;
margin: 0 auto;
font-family: 'Roboto', sans-serif;
}
.container p {
font-size: 20px;
}
.container a {
display: inline-block;
position: relative;
text-align: center;
color: #FF5252;
text-decoration: none;
font-size: 20px;
overflow: hidden;
top: 5px;
}
.container a:after {
content: '';
position: absolute;
background: #FF5252;
height: 2px;
width: 0%;
transform: translateX(-50%);
left: 50%;
bottom: 0;
transition: 0.35s ease;
}
.container a:hover:after {
width: 100%;
}
h1 {
position: relative;
text-align: center;
font-family: 'Vollkorn', sans-serif;
}
.button_container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity 0.25s ease;
}
.button_container:hover {
opacity: 0.7;
}
.button_container.active .top {
transform: translateY(10px) translateX(0) rotate(45deg);
background: #FFF;
}
.button_container.active .middle {
opacity: 0;
background: #FFF;
}
.button_container.active .bottom {
transform: translateY(-10px) translateX(0) rotate(-45deg);
background: #FFF;
}
.button_container span {
background: #FF5252;
border: none;
height: 5px;
width: 100%;
position: absolute;
top: 0px;
left: 0;
transition: all 0.35s ease;
cursor: pointer;
}
.button_container span:nth-of-type(2) {
top: 10px;
}
.button_container span:nth-of-type(3) {
top: 20px;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
visibility: hidden;
transition: opacity 0.35s, visibility 0.35s, width 0.35s;
z-index: 50;
}
.overlay:before {
content: '';
background: #FF5252;
left: -55%;
top: 0;
width: 50%;
height: 100%;
position: absolute;
transition: left 0.35s ease;
}
.overlay:after {
content: '';
background: #FF5252;
right: -55%;
top: 0;
width: 50%;
height: 100%;
position: absolute;
transition: all 0.35s ease;
}
.overlay.open {
opacity: 0.9;
visibility: visible;
height: 100%;
}
.overlay.open:before {
left: 0;
}
.overlay.open:after {
right: 0;
}
.overlay.open li {
-webkit-animation: fadeInRight 0.5s ease forwards;
animation: fadeInRight 0.5s ease forwards;
-webkit-animation-delay: 0.35s;
animation-delay: 0.35s;
}
.overlay.open li:nth-of-type(2) {
-webkit-animation-delay: 0.45s;
animation-delay: 0.45s;
}
.overlay.open li:nth-of-type(3) {
-webkit-animation-delay: 0.55s;
animation-delay: 0.55s;
}
.overlay.open li:nth-of-type(4) {
-webkit-animation-delay: 0.65s;
animation-delay: 0.65s;
}
.overlay nav {
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
font-size: 50px;
font-family: 'Vollkorn', serif;
font-weight: 400;
text-align: center;
z-index: 100;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: block;
position: relative;
color: #FFF;
text-decoration: none;
overflow: hidden;
}
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
width: 100%;
}
.overlay ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: #FFF;
transition: 0.35s;
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body translate='no' >
<div class='container'>
<h1>Top right corner, click it!</h1>
</div>
<div class='button_container' id='toggle'>
<span class='top'></span>
<span class='middle'></span>
<span class='bottom'></span>
</div>
<div class='overlay' id='overlay'>
<nav class='overlay-menu' id="fulloverlay">
<ul>
<li><a href='#about2' >Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Work</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>
</div>
<section class="about" id="about" style="background-color: white; height: 100vh;"></section>
<section class="about2" id="about2" style="background-color:aqua; height: 100vh;"></section>
I tried this code on my side and noticed one small change would work in this case.
You are selecting anchors(a) using wrong selector. As 'fulloverlay' is the Id of the parent nav element so instead of selecting it like:
$(".fulloverlay a").on("click", function() {
$('#toggle').toggleClass('active');
$('#overlay').toggleClass('open');
});
You can write like this:
$("#fulloverlay a").on("click", function() {
$('#toggle').toggleClass('active');
$('#overlay').toggleClass('open');
});
then it works.
I have some code here that animates a full day (from sun rise to sunset):
(demo)
I'm curious to know if it is possible to make this even more dynamic, such that the animation moves with the time of day.
For Example: if it is noon, the sun should be at the highest point in the sky. Conversely, if it is midnight, the moon would be at the highest point in the sky.
I have a suspicion it can be done with a few lines of javascript:
<script type="text/javascript">
var currentTime = new Date().getHours();
if (document.html) {
'''psuedo_code'''
while true
for hour in day
move sun and moon according to currentTime
}
</script>
HTML & CSS:
<html>
<div class="canvas">
<div class="cloud"></div>
<div class="cloud a"></div>
<div class="cloud b"></div>
<div class="cloud c"></div>
<div class="land">
<div class="tree"></div>
<div class="tree a"></div>
<div class="tree b"></div>
<div class="tree c"></div>
<div class="tree d"></div>
</div>
<div class="star"></div>
<div class="star a"></div>
<div class="star b"></div>
<div class="star c"></div>
<div class="star d"></div>
<div class="wind"></div>
<!-- <div class="swirly-wind">
<span></span>
<span></span>
<span></span>
</div>
<div class="swirly-wind a"></div>
<div class="swirly-wind b"></div> -->
<div class="eclipse">
<div class="sun"></div>
<div class="sun a"></div>
<div class="moon"></div>
<div class="moon a"></div>
</div>
</div>
</html>
<style>
/*body {
position: relative;
}*/
.canvas {
width: 600px;
height: 600px;
border: 1px solid #000;
margin: 0 auto;
position: relative;
animation-delay: 1s;
background: #70c4c6;
animation-name: daylight;
animation-duration: 20s;
animation-iteration-count: infinite;
overflow: hidden;
animation-timing-function: linear;
}
.eclipse {
width: 600px;
height: 600px;
/*border: 1px solid #000;*/
position: absolute;
left:60%;
top:20%;
animation-name: time;
animation-duration: 40s;
animation-iteration-count: infinite;
z-index: 0;
animation-timing-function: linear;
}
.sun {
width:70px;
height:70px;
border-radius: 50%;
background-color: #ffa;
position: absolute;
top: -35px;
left: -35px;
}
.sun.a {
bottom: -35px;
right: -35px;
left: auto;
top:auto;
}
.moon {
position: absolute;
top: -35px;
right: -35px;
width:70px;
height:70px;
border-radius: 50%;
background-color: #fff;
}
.moon.a {
bottom: -35px;
left: -35px;
top:auto;
right: auto;
}
.cloud {
width: 50px;
height: 45px;
border-radius: 50%;
background-color: #fff;
position: absolute;
top:20px;
left: -20%;
animation-name: cloud;
animation-duration: 70s;
animation-iteration-count: infinite;
z-index: 1;
}
.cloud::before {
content:'';
width: 35px;
height: 30px;
background-color: #fff;
margin-left: -20px;
margin-top: 10px;
display: block;
border-radius: 50%;
}
.cloud::after {
content:'';
width: 20px;
height: 20px;
background-color: #fff;
position: absolute;
right: -10px;
top: 17px;
border-radius: 50%;
}
.cloud.a {
top:150px;
animation-duration: 55s;
}
.cloud.b {
top:100px;
left:-15%;
animation-duration: 38s;
}
.cloud.c {
top:250px;
left:-10%;
animation-duration: 25s;
}
.land {
width: 100%;
height: 320px;
position: absolute;
left:-50px;
bottom: -120px;
background-color: #83a81c;
border-radius: 50%;
z-index: 1;
animation-name: land;
animation-duration: 20s;
animation-iteration-count: infinite;
}
.land::before {
width: 100%;
height: 200px;
content: '';
position: absolute;
left: 40%;
top: 20%;
border-radius: 50%;
background-color: #96be29;
transform: rotate(-15deg);
animation-name: land1;
animation-duration: 20s;
animation-iteration-count: infinite;
}
.tree {
width:10px;
height:40px;
background-color: #766257;
left: 200px;
position: absolute;
}
.tree::before {
content: '';
position: absolute;
bottom: 125%;
left: -7px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 20px 43px 20px;
border-color: transparent transparent #bfde3b transparent;
z-index: 1;
animation-name: windy;
animation-duration: 5s;
animation-iteration-count: infinite;
}
.tree::after {
content: '';
position: absolute;
bottom:100%;
left:-25px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 30px 60px 30px;
border-color: transparent transparent #93ae29 transparent;
}
.tree.a {
transform: scale(0.5);
left: 250px;
}
.tree.b {
transform: scale(0.75);
left: 280px;
}
.tree.c {
transform: scale(1.5);
left:450px;
top: 100px;
}
.tree.d {
transform: scale(1.25);
left: 530px;
top: 80px;
z-index: 0;
}
.star {
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #fff;
position: absolute;
top: 50px;
left: 100px;
animation-name: fader;
animation-duration: 20s;
animation-iteration-count: infinite;
}
.star::before {
content: '';
width:3px;
height:3px;
border-radius: 50%;
background-color: #fff;
position: absolute;
left:20px;
top:20px;
animation-name: blinker;
animation-duration: 20s;
animation-iteration-count: infinite;
}
.star::after {
content: '';
width:2px;
height:2px;
border-radius: 50%;
background-color: #fff;
position: absolute;
left:-200px;
top:50px;
animation-name: blinker;
animation-duration: 20s;
animation-iteration-count: infinite;
}
.star.a {
top:30px;
left:90%;
}
.star.b {
top:120px;
left:70%;
}
.star.c {
top:100px;
left:65%;
}
.star.d {
top:200px;
left:15%;
}
.swirly-wind {
position: absolute;
top:30%;
animation-name: wind;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.swirly-wind > span {
width: 150px;
background-color: #eee;
height: 2px;
display: block;
position: relative;
}
.swirly-wind > span:first-child {
width: 200px;
}
.swirly-wind > span:nth-child(1)::before {
display: none;
}
.swirly-wind > span:nth-child(2) {
margin-top: -10px;
float: right;
}
.swirly-wind > span:nth-child(3) {
margin-top: 15px;
width: 75px;
float: right;
}
.swirly-wind span::before {
content: '';
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
border: #fff 2px solid;
bottom: calc(100% - 2px);
right: -15px;
-webkit-clip-path: polygon(100% 0, 100% 100%, 50% 100%, 0 0);
clip-path: polygon(100% 0, 100% 100%, 50% 100%, 0 0);
}
.swirly-wind > span:nth-child(3)::before {
top: calc(100% - 2px);
-webkit-clip-path: polygon(100% 0, 100% 100%, 14% 100%, 35% 0);
clip-path: polygon(100% 0, 100% 100%, 14% 100%, 35% 0);
}
.swirly-wind.a {
top:20%;
width: 75px;
animation-duration: 8s;
}
.swirly-wind.b {
top:45%;
width: 120px;
animation-duration: 15s;
height :1px;
}
.swirly-wind.b::before {
border: #fff 1px solid;
bottom: calc(100% - 1px);
}
.wind {
width: 150px;
background-color: #eee;
height: 2px;
position: absolute;
top:30%;
animation-name: wind;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.wind::before {
content: '';
position: absolute;
left: 200px;
width: 100px;
height: 1px;
background-color: #eee;
top:100px;
}
.wind::after {
content: '';
position: absolute;
left: 400px;
width: 180px;
height: 1px;
background-color: #eee;
top:30px;
}
#keyframes time {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#keyframes daylight {
0% { background-color: #70c4c6; }
15% { background-color: #524b64; }
40% { background-color: #354a4a; }
70% { background-color: #354a4a; }
80% { background-color: #e2b553; }
100% { background-color: #70c4c6;}
}
#keyframes land {
40% { background-color: #4d6932; }
70% { background-color: #4d6932;}
}
#keyframes land1 {
40% { background-color: #5b793e; }
70% { background-color: #5b793e;}
}
#keyframes cloud {
0% { transform: translateX(0); }
100% { transform: translateX(850px); }
}
#keyframes rotate {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
#keyframes fader {
0% { opacity: 0; }
15% { opacity: 0; }
40% { opacity: 1; }
60% { opacity: 0.4; }
70% { opacity: 1; }
80% { opacity: 0; }
100% { opacity: 0; }
}
#keyframes blinker {
0% { opacity: 0; }
18% { opacity: 0; }
25% { opacity: 1; }
40% { opacity: 0; }
60% { opacity: 1; }
70% { opacity: 0; }
100% { opacity: 0; }
}
#keyframes blinker-1 {
0% { opacity: 0; }
30% { opacity: 0; }
40% { opacity: 1; }
60% { opacity: 1; }
80% { opacity: 0; }
100% { opacity: 0; }
}
#keyframes windy {
15% { transform: translateX(5px); transform: rotate(5deg); }
80% { transform: translateX(7px); transform: rotate(7deg);}
80% { transform: translateX(5px); transform: rotate(5deg);}
}
#keyframes wind {
0% { left: -800px; opacity: 0 }
15% { opacity: 1; }
70% { left: 800px; opacity: 1;}
80% { left: 800px; opacity: 0;}
100% { left: -1000px; opacity: 0;}
}
#keyframes snowday {
0% {
top: 0;
}
100% {
top: 100%;
}
}
.snow {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
position: absolute;
top: 0;
}
.snow.fall {
animation-name: snowday ;
animation-duration: 5s;
}
</style>
Been struggling to replicate a css animation on scroll using waypoints.js
This is the animation: https://codepen.io/equinusocio/pen/KNYOxJ
<h1 class="reveal-text">
I'm here.
</h1>
:root {
--animation-delay: 0;
--duration: 800ms;
--iterations: 1;
}
/* ••·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•· */
.reveal-text,
.reveal-text::after {
animation-delay: var(--animation-delay, 2s);
animation-iteration-count: var(--iterations, 1);
animation-duration: var(--duration, 800ms);
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}
.reveal-text {
position: relative;
font-size: 10vw;
animation-name: clip-text;
color: #FFF;
white-space: nowrap;
cursor: default;
&::after {
content: "";
position: absolute;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #f2f98b;
transform: scaleX(0);
transform-origin: 0 50%;
pointer-events: none;
animation-name: text-revealer;
}
}
#keyframes clip-text {
from {
clip-path: inset(0 100% 0 0);
}
to {
clip-path: inset(0 0 0 0);
}
}
#keyframes text-revealer {
0%, 50% {
transform-origin: 0 50%;
}
60%, 100% {
transform-origin: 100% 50%;
}
60% {
transform: scaleX(1);
}
100% {
transform: scaleX(0);
}
}
Heres my attempt at using it with way points..
.test {
display: flex;
margin: 15px;
margin-top: 5em;
display: flex;
align-self: center;
justify-content: center;
align-content: center;
text-align: center;
opacity: 0;
position: relative;
animation-name: clip-text;
color: $grey;
white-space: nowrap;
cursor: default;
}
.js-dipper-animate {
opacity: 1;
animation-name: text-revealer;
content: "";
z-index: 999;
background-color: $grey;
transform: scaleX(0);
transform-origin: 0 50%;
pointer-events: none;
}
Heres a gif of the output: https://imgur.com/waCcprF
As you can see, the animation plays but theres no text. It should show 'test'. After the animation plays I want to be able to see the text, like 'Skills' in the gif shown
working now, solution posted below
`.test,
.test::after {
animation-delay: 0ms;
animation-iteration-count: var(--iterations, 1);
animation-duration: var(--duration, 800ms);
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}
.test {
display: flex;
margin: 15px;
margin-top: 5em;
display: flex;
align-self: center;
justify-content: center;
align-content: center;
text-align: center;
opacity: 0;
position: relative;
color: $grey;
white-space: nowrap;
cursor: default;
}
.js-dipper-animate {
position: relative;
animation-name: clip-text;
color: $grey;
white-space: nowrap;
cursor: default;
opacity: 1;
&::after {
content: "";
position: absolute;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: $grey;
transform: scaleX(0);
transform-origin: 0 50%;
pointer-events: none;
animation-name: text-revealer;
opacity: 1;
}
}`
I m trying to get an Arrow shape for the below code of circular progress bar. But it seems impossible for me so far, hence my limited experience in CSS and styling.
Please help or guide me how do I get an Arrow shape at the end of the circular progress bar.
The present circular progress bar looks like this:
How I want it..
Please find the given JSfiddle link
https://jsfiddle.net/jh1s7raq/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
.progress{
width: 100px;
height: 100px;
line-height: 100px;
background: none;
margin: 0;
box-shadow: none;
position: relative;
}
.progress:after{
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 12px solid #fff;
position: absolute;
top: 0;
left: 0;
}
.progress > span{
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress .progress-left{
left: 0;
}
.progress .progress-bar{
width: 100%;
height: 100%;
background: none;
border-width: 12px;
border-style: solid;
position: absolute;
top: 0;
}
.progress .progress-left .progress-bar{
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.progress .progress-right{
right: 0;
}
.progress .progress-right .progress-bar{
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading-1 1.8s linear forwards;
}
.progress .progress-value{
width: 90%;
height: 90%;
border-radius: 50%;
background: white;
font-size: 20px;
color: #012C52;
line-height: 100px;
text-align: center;
position: absolute;
top: 5%;
left: 5%;
}
.progress.blue .progress-bar{
border-color: #012C52;
}
.progress.blue .progress-left .progress-bar{
animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-bar{
border-color: #fdba04;
}
.progress.yellow .progress-left .progress-bar{
animation: loading-3 1s linear forwards 1.8s;
}
.progress.pink .progress-bar{
border-color: #ed687c;
}
.progress.pink .progress-left .progress-bar{
animation: loading-4 0.4s linear forwards 1.8s;
}
.progress.green .progress-bar{
border-color: #1abc9c;
}
.progress.green .progress-left .progress-bar{
animation: loading-5 1.2s linear forwards 1.8s;
}
#keyframes loading-1{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes loading-2{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
}
#keyframes loading-3{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
#keyframes loading-4{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(36deg);
transform: rotate(36deg);
}
}
#keyframes loading-5{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(126deg);
transform: rotate(126deg);
}
}
#media only screen and (max-width: 990px){
.progress{ margin-bottom: 20px; }
}
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="progress blue" style="margin-top:50px;">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
</div>
</div>
</div>
Please let me know if I m not clear on my question... Thanks
You have to add markup in your html for arrow element like
<span class="arrow"></span>
And then add css for it
.progress>span.arrow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9;
animation: rotate 3.3s linear forwards;
}
.progress>span.arrow:after {
content: "";
border-width: 16px;
border-style: solid;
border-color: transparent transparent transparent #ff0000;
position: absolute;
left: 50px;
top: -8px;
}
#keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(324deg)
}
}
Check working example below. let me know if you have any doubts on it
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:after,
:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
.progress {
width: 100px;
height: 100px;
line-height: 100px;
background: none;
margin: 0;
box-shadow: none;
position: relative;
}
.progress:after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 12px solid #fff;
position: absolute;
top: 0;
left: 0;
}
.progress>span:not(.arrow) {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress>span.arrow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9;
animation: rotate 3.3s linear forwards;
}
.progress>span.arrow:after {
content: "";
border-width: 16px;
border-style: solid;
border-color: transparent transparent transparent #ff0000;
position: absolute;
left: 50px;
top: -8px;
}
#keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(324deg)
}
}
.progress .progress-left {
left: 0;
}
.progress .progress-bar {
width: 100%;
height: 100%;
background: none;
border-width: 12px;
border-style: solid;
position: absolute;
top: 0;
}
.progress .progress-left .progress-bar {
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.progress .progress-right {
right: 0;
}
.progress .progress-right .progress-bar {
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading-1 1.8s linear forwards;
}
.progress .progress-value {
width: 90%;
height: 90%;
border-radius: 50%;
background: white;
font-size: 20px;
color: #012C52;
line-height: 100px;
text-align: center;
position: absolute;
top: 5%;
left: 5%;
}
.progress.blue .progress-bar {
border-color: #012C52;
}
.progress.blue .progress-left .progress-bar {
animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-bar {
border-color: #fdba04;
}
.progress.yellow .progress-left .progress-bar {
animation: loading-3 1s linear forwards 1.8s;
}
.progress.pink .progress-bar {
border-color: #ed687c;
}
.progress.pink .progress-left .progress-bar {
animation: loading-4 0.4s linear forwards 1.8s;
}
.progress.green .progress-bar {
border-color: #1abc9c;
}
.progress.green .progress-left .progress-bar {
animation: loading-5 1.2s linear forwards 1.8s;
}
#keyframes loading-1 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes loading-2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
}
#keyframes loading-3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
#keyframes loading-4 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(36deg);
transform: rotate(36deg);
}
}
#keyframes loading-5 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(126deg);
transform: rotate(126deg);
}
}
#media only screen and (max-width: 990px) {
.progress {
margin-bottom: 20px;
}
}
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="progress blue" style="margin:50px;">
<span class="arrow"></span>
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
</div>
</div>
</div>
Fiddle link: https://jsfiddle.net/jh1s7raq/1/
The Navigation Links on hover ease in a underline from left to right and ease out right to left. I would like to make it so that both the ease in & ease out go from left to right. How can I adjust the ease out?
http://jsfiddle.net/2tycjc82/
HTML:
<div class="header">
<div class="navbar">
<a href="" class="in" style="display: inline-block;">
<svg class="navinstagram" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 155.2 144" style="enable-background:new 0 0 155.2 144;" xml:space="preserve">
<path d="M42.7,122.7H21.3V54h21.4V122.7z M32,44.6c-6.8,0-12.4-5.6-12.4-12.4c0-6.8,5.5-12.4,12.4-12.4c6.8,0,12.4,5.5,12.4,12.4C44.4,39,38.9,44.6,32,44.6z M122.7,122.7h-21.3V89.3c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6v34H56.1V54h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1c21.6,0,25.6,14.2,25.6,32.7V122.7z"/>
<g>
<path style="fill:#FFFFFF;" d="M151.9,120c0.7-0.1,1-0.5,1-1.1c0-0.8-0.5-1.1-1.4-1.1H150v4h0.6V120h0.7l0,0l1.1,1.7h0.6L151.9,120L151.9,120z M151.3,119.6h-0.7v-1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C152.4,119.5,151.9,119.6,151.3,119.6z"/>
<path style="fill:#FFFFFF;" d="M151.3,116c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8c2.1,0,3.8-1.7,3.8-3.8C155.2,117.6,153.5,116,151.3,116z M151.3,123.1c-1.8,0-3.3-1.4-3.3-3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3C154.6,121.7,153.2,123.1,151.3,123.1z"/>
</g>
</svg>
</a>
Logo
<a id="toggle-menu">
<div>
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>
</div>
<div class="nav">
<div class="navigation">
<ul>
<li class="navlist">Home</li>
<li class="navlist">Work</li>
<li class="navlist">Contact</li>
</ul>
</div>
CSS:
/*navlist*/
.navigation{
width:100%;
background: #fff;
padding-top: 40px;
padding-bottom: 40px;
}
.navlist {
display: inline-block;
}
.navlist:after {
content: '';
display: block;
height: 1.5px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.navlist:hover:after {
width: 100%;
background: grey;
transition: width .5s ease, background-color .5s ease;
}
/*----/----navlist*/
/*global styles*/
body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
a {
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
background:transparent;
color: grey;
border:none;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
list-style: none;
text-decoration: none;
}
/*----/----global styles*/
/*navigation icon*/
#toggle-menu {
float:right;
display: block;
width: 15px;
height: 15px;
padding: 20px;
}
#toggle-menu div {
width: 15px;
height: 15px;
position: relative;
}
.header #toggle-menu span {
display: block;
width: 15px;
height: 3px;
position: absolute;
-webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
}
#toggle-menu span.top {
top: 0px;
}
#toggle-menu span.middle {
top: 6px;
}
#toggle-menu span.bottom {
top: 12px;
}
/*----/----navigation icon*/
/*navigation background transition*/
.bg {
background-color: #fff !important;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.2);
}
.show {
opacity: 1;
}
.navfade {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.header .logo { /* Before scroll */
color: white;
}
.bg .logo { /* After scroll */
color: #545454;
}
.navinstagram {
fill: #fff
}
.bg .navinstagram{
fill: #545454;
}
#toggle-menu span{
background: #fff;
}
.bg #toggle-menu span {
background: #545454;
}
/*----/----navigation background transition*/
/*navigation icon animation*/
#toggle-menu.menu-is-active span {
-webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
#toggle-menu.menu-is-active span.top, #toggle-menu.menu-is-active span.middle {
top: 6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
#toggle-menu.menu-is-active span.middle {
opacity: 0;
}
#toggle-menu.menu-is-active span.bottom {
top: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*----/----navigation icon animation*/
/*Nav Bar*/
.header {
/*border-bottom: 0.5px solid rgba(0,0,0,.2);*/
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
background-color: rgb(184, 184, 184);
/*background: none;*/
}
.whitenavbar {
background: white;
}
.nav {
display: none;
list-style-type: none;
position: fixed;
width: 100%;
text-align: center;
left:0;
top: 55px;
border-bottom: 1px solid rgba(0, 0, 0, .2);
border-top: 1px solid rgba(0, 0, 0, .2);
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
}
.nav li {
padding-left: 30px;
padding-right: 30px;
background: #fff;
margin-top: 50px;
margin-bottom: 50px;
}
.seemore {
display: inline-block;
padding-right: 20px;
}
#navpromo {
border-top: 1px solid rgba(0, 0, 0, .2);
padding-bottom: 10px;
background: #ffffff;
overflow: hidden;
}
#navpromo ul {
margin: 0;
}
.want{
display: inline-block;
text-align: center;
float: left;
padding-right:10px;
margin-bottom: 0;
}
.check{
text-align: center;
display:inline-block;
}
#media only screen and (max-width: 555px) {
.want{
display: block;
text-align: center;
float: none;
padding-right: 0px;
margin-bottom: 0;
}
.check{
text-align: center;
display: block;
}
}
.instbtn-cont {
display: inline-block;
text-align: center;
margin-top: 10px;
padding-bottom: 30px;
}
.instbtn-cont .instbtn {
position: relative;
padding: 15px 20px;
border: 1px solid grey;
color: grey;
-webkit-font-smoothing: antialiased;
}
.instbtn-cont .instbtn:hover {
border: none;
}
.instbtn-cont .instbtn:hover .line-1 {
-webkit-animation: move1 1500ms infinite ease;
animation: move1 1500ms infinite ease;
}
.instbtn-cont .instbtn:hover .line-2 {
-webkit-animation: move2 1500ms infinite ease;
animation: move2 1500ms infinite ease;
}
.instbtn-cont .instbtn:hover .line-3 {
-webkit-animation: move3 1500ms infinite ease;
animation: move3 1500ms infinite ease;
}
.instbtn-cont .instbtn:hover .line-4 {
-webkit-animation: move4 1500ms infinite ease;
animation: move4 1500ms infinite ease;
}
.instbtn-cont .line-1 {
content: "";
display: block;
position: absolute;
width: 1px;
background-color: grey;
left: 0;
bottom: 0;
}
.instbtn-cont .line-2 {
content: "";
display: block;
position: absolute;
height: 1px;
background-color: grey;
left: 0;
top: 0;
}
.instbtn-cont .line-3 {
content: "";
display: block;
position: absolute;
width: 1px;
background-color: grey;
right: 0;
top: 0;
}
.instbtn-cont .line-4 {
content: "";
display: block;
position: absolute;
height: 1px;
background-color: grey;
right: 0;
bottom: 0;
}
#-webkit-keyframes move1 {
0% {
height: 100%;
bottom: 0;
}
54% {
height: 0;
bottom: 100%;
}
55% {
height: 0;
bottom: 0;
}
100% {
height: 100%;
bottom: 0;
}
}
#keyframes move1 {
0% {
height: 100%;
bottom: 0;
}
54% {
height: 0;
bottom: 100%;
}
55% {
height: 0;
bottom: 0;
}
100% {
height: 100%;
bottom: 0;
}
}
#-webkit-keyframes move2 {
0% {
width: 0;
left: 0;
}
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
#keyframes move2 {
0% {
width: 0;
left: 0;
}
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
#-webkit-keyframes move3 {
0% {
height: 100%;
top: 0;
}
54% {
height: 0;
top: 100%;
}
55% {
height: 0;
top: 0;
}
100% {
height: 100%;
top: 0;
}
}
#keyframes move3 {
0% {
height: 100%;
top: 0;
}
54% {
height: 0;
top: 100%;
}
55% {
height: 0;
top: 0;
}
100% {
height: 100%;
top: 0;
}
}
#-webkit-keyframes move4 {
0% {
width: 0;
right: 0;
}
55% {
width: 100%;
right: 0;
}
100% {
width: 0;
right: 100%;
}
}
#keyframes move4 {
0% {
width: 0;
right: 0;
}
55% {
width: 100%;
right: 0;
}
100% {
width: 0;
right: 100%;
}
}
/*----/----Nav Bar*/
/*in*/
.in {
float:left;
display: inline-block;
width: 25px;
height: 25px;
padding: 15px;
cursor: pointer;
color: #fff;
font-size:.8em;
letter-spacing:0.05em;
border-top: 0.5px solid rgba(0, 0, 0, .2);
}
/*----/----in*/
/*logo*/
.logo {
position: absolute;
left: 47%;
display: inline-block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
color: #fff;
font-size:.8em;
letter-spacing:0.05em;
}
/*----/----logo*/
/****landscape****/
#media only screen and (max-width: 555px) {
.nav li{
display: block;
margin-top: 20px;
margin-bottom: 20px;
}
.navlist:after {
content: '';
display: block;
height: 1.5px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.navlist:hover:after {
width: 100%;
background: grey;
transition: width .5s ease, background-color .5s ease;
}
}
/*----/----Landscape*/
jQuery:
/*navigation icon animation*/
var trigger = 'X';
jQuery(document).ready(function () {
$('#toggle-menu').click(function () {
trigger = 'X';
$(this).toggleClass('menu-is-active')
});
/* click outside of nav to trigger navigation icon animation*/
$(document).click(function () {
if (trigger == 'X') {
$("#toggle-menu").toggleClass();
trigger = 'ham';
}
});
$("nav").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----navigation icon animation*/
/*toggle menu*/
jQuery("#toggle-menu").click(function () {
jQuery(".nav").slideToggle();
if($("div.header").hasClass("whitenavbar") == false){
$("div.header").addClass("whitenavbar bg navup ");
}else{
$("div.header").removeClass("whitenavbar bg navup");
}
});
/* click outside of nav to close toggle*/
$(document).click(function () {
$(".nav").hide();
});
$("#toggle-menu").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----toggle menu*/
/*navigation background fade in fade out */
$(window).scroll(function () {
var dist = $('#panel2').offset().top;
console.log(dist);
if ($(window).scrollTop() > dist) {
$('.header').addClass('bg');
$('.header').addClass('navfade');
}
else {
$('.header').removeClass('bg');
}
});
$('.scroll').on('click', function (e) {
e.preventDefault()
$('html, body').animate({
scrollTop: $(this.hash).offset().top
}, 1500);
});
/*----/-----navigation background fade in fade out */
});
Make some changes to your css:
.navlist:after {
...
float: right; /* Add this line */
}
.navlist:hover:after {
...
float: left; /* Add this line */
}
Demo: http://jsfiddle.net/2tycjc82/2/
But as I commented. There's a not-so-nice result when user hover in then immediately hover out.