Cannot display source code from JSFiddle to blogger - javascript

I have a problem with my source code. I hope you read well and understand and do not immediately act ignorant of my question.
I very often come across people who are smart but don't like to understand other people's questions.
I've edited a quiz via JSFiddle. With the help of this forum, It works fine on JSFiddle.
But when I tried this source code on blogger, it didn't work very well. The question doesn't arise. Someone said that something was wrong with the CSS. I edited the CSS, but it didn't work. Even when I delete the entire CSS, the questions still don't appear while the rest of the section appears.
I will show the difference with the following image.
The first image is an image that works well in JSField. The second image is the appearance of blogger with full CSS. The third image is the appearance of blogger without CSS. The CSS I mean is the CSS I use on JSField.
I have changed the contents several times, even deleted some parts. But in the end it didn't work and I returned the CSS.
One thing is for sure, even though I tried the question and answer choices from the quizzes it didn't appear on blogger.
I have asked this many times, I hope to find answers to my questions in this forum.
here I give my file link in JSFiddle
and here's the CSS for my problem. I apologize for showing all the CSS because I don't know which part is the problem in blogger
#import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
.quizArea{
width: 95%;
margin: auto;
padding:10px;
position: relative;
text-align: center;
}
.mc_quiz{
color: #3a5336;
margin-bottom: 0px;
}
.multipleChoiceQues{
width:90%;
margin: auto;
padding: 10px;
}
.quizBox
{
width:90%;
margin: auto;
}
.question{
text-align: center;
font-size: 0.8em;
}
.buttonArea
{
text-align: right;
height: 4.5em;
}
button {
height: 4em;
width:130px;
padding: 1.5em auto;
margin: 1em auto;
background-color:#f1f2ec;
border: none;
border-radius: 3px;
color: #7aa4a9;
text-transform: uppercase;
letter-spacing: 0.5em;
transition: all 0.2s cubic-bezier(.4,0,.2,1);
}
#next:hover,
#submit:hover,
.viewanswer:hover,
.viewchart:hover,
.backBtn:hover,
.replay:hover {
letter-spacing: 0.8em;
}
.viewanswer,
.viewchart,
.replay{
width: 30%;
}
.backBtn{
width:100px;
height: 2em;
font-size: 0.8em;
margin-left: 70%;
}
#next:active,
#submit:active,
.viewanswer:active,
.viewchart:active,
.backBtn:active,
.replay:active {
letter-spacing: 0.3em;
}
.resultArea{
display: none;
width:70%;
margin: auto;
padding: 10px;
}
.chartBox{
width: 60%;
margin:auto;
}
.resultPage1{
text-align: center;
}
.resultBox h1{
}
.briefchart
{
text-align:center;
}
.resultBtns{
width: 60%;
margin: auto;
text-align:center;
}
.resultPage2,
.resultPage3
{
display: none;
text-align: center;
}
.allAnswerBox{
width: 100%;
margin: 0;
position: relative;
}
._resultboard{
position: relative;
display:inline-block;
width: 40%;
padding: 2%;
height: 190px;
vertical-align: top;
border-bottom: 0.6px solid rgba(255,255,255,0.2);
text-align: left;
margin-bottom: 4px;
}
._resultboard:nth-child(even){
margin-left: 5px;
border-left: 0.6px solid rgba(255,255,255,0.2);
}
._resultboard:nth-last-child(2),
._resultboard:nth-last-child(1){
border-bottom: 0px;
}
._header{
font-weight: bold;
margin-bottom: 8px;
height: 90px;
}
._yourans,
._correct{
margin-bottom: 8px;
position: relative;
line-height: 2;
padding: 5px;
}
._correct{
background: #968089 ;
}
.h-correct{
background: #968089;
}
.h-correct:after,
._correct:after {
line-height: 1.4;
position: absolute;
z-index: 499;
font-family: 'FontAwesome';
content: "\f00c";
bottom: 0;
right: 7px;
font-size: 1.9em;
color: #2dceb1;
}
.h-incorrect{
background: #ab4e6b ;
}
.h-incorrect:after {
line-height: 1.4;
position: absolute;
z-index: 499;
font-family: 'FontAwesome';
content: "\f00d";
bottom: 0;
right: 7px;
font-size: 1.9em;
color: #ff383e;
}
.resultPage3 h1,
.resultPage1 h1,
.resultPage2 h1{
text-align: center;
padding-bottom: 10px;
border-bottom: 1.3px solid rgba(21, 63, 101,0.9);
color: #3a5336;
}
.my-progress {
position: relative;
display: block;
margin: 3rem auto 0rem;
width: 100%;
max-width: 950px;
}
progress {
display: block;
position: relative;
top: -0.5px;
left: 5px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #f1f2ec ;
width: 100%;
height: 2.5px;
background: none;
-webkit-transition: 1s;
transition: 1s;
will-change: contents;
}
progress::-webkit-progress-bar {
background-color: #c72828;
}
progress::-webkit-progress-value {
background-color:#153f65;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.my-progress-indicator {
position: absolute;
top: -6px;
left: 0;
display: inline-block;
width: 5px;
height: 5px;
background: #7aa4a9;
border: 3px solid #f1f2ec;
border-radius: 50%;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
-webkit-transition-delay: .3s;
transition-delay: .3s;
will-change: transform;
}
.my-progress-indicator.progress_1 {
left: 0;
}
.my-progress-indicator.progress_2 {
left: 9%;
}
.my-progress-indicator.progress_3 {
left: 18%;
}
.my-progress-indicator.progress_4{
left: 27%;
}
.my-progress-indicator.progress_5 {
left: 36%;
}
.my-progress-indicator.progress_6 {
left: 45%;
}
.my-progress-indicator.progress_7 {
left: 54%;
}
.my-progress-indicator.progress_8 {
left: 63%;
}
.my-progress-indicator.progress_9 {
left: 72%;
}
.my-progress-indicator.progress_10 {
left: 81%;
}
.my-progress-indicator.progress_11 {
left: 90%;
}
.my-progress-indicator.progress_12 {
left: 100%;
}
.my-progress-indicator.active {
-webkit-animation: bounce .5s forwards;
animation: bounce .5s forwards;
-webkit-animation-delay: .5s;
animation-delay: .5s;
border-color: #153f65 ;
}
.animation-container {
position: relative;
width: 100%;
-webkit-transition: .3s;
transition: .3s;
will-change: padding;
overflow: hidden;
}
.form-step {
position: absolute;
-webkit-transition: 1s ease-in-out;
transition: 1s ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
will-change: transform, opacity;
}
.form-step.leaving {
-webkit-animation: left-and-out .5s forwards;
animation: left-and-out .5s forwards;
}
.form-step.waiting {
-webkit-transform: translateX(400px);
transform: translateX(400px);
}
.form-step.coming {
-webkit-animation: right-and-in .5s forwards;
animation: right-and-in .5s forwards;
}
#-webkit-keyframes left-and-out {
100% {
opacity: 0;
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
}
}
#keyframes left-and-out {
100% {
opacity: 0;
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
}
}
#-webkit-keyframes right-and-in {
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes right-and-in {
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#-webkit-keyframes bounce {
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes bounce {
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.hidden {
display: none;
}
ul{
list-style-type: none;
width: 220px;
margin: auto;
text-align: left;
}
li {
position: relative;
padding: 10px;
padding-left: 40px;
height:30px;
}
label{
color: #c72828;
}
label:before {
content: "";
width: 15px;
height: 15px;
background : #c72828;
position: absolute;
left: 7px;
top: calc(50% - 13px);
box-sizing: border-box;
border-radius: 50%;
}
input[type="radio"] {
opacity: 0;
-webkit-appearance: none;
display: inline-block;
vertical-align: middle;
z-index: 100;
margin: 0;
padding: 0;
width: 100%;
height: 30px;
position: absolute;
left: 0;
top: calc(50% - 15px);
cursor: pointer;
}
.bullet {
position: relative;
width: 25px;
height: 25px;
left: -3px;
top: 2px;
border: 5px solid #fff ;
opacity: 0;
border-radius: 50%;
}
input[type="radio"]:checked ~ .bullet {
position:absolute;
opacity: 1;
animation-name: explode;
animation-duration: 0.350s;
background : #fff;
}
.line {
position: absolute;
width: 10px;
height: 2px;
background-color: #c72828 ;
opacity:0;
}
.line.zero {
left: 11px;
top: -21px;
transform: translateY(20px);
width: 2px;
height: 10px;
}
.line.one {
right: -7px;
top: -11px;
transform: rotate(-55deg) translate(-9px);
}
.line.two {
right: -20px;
top: 11px;
transform: translate(-9px);
}
.line.three {
right: -8px;
top: 35px;
transform: rotate(55deg) translate(-9px);
}
.line.four {
left: -8px;
top: -11px;
transform: rotate(55deg) translate(9px);
}
.line.five {
left: -20px;
top: 11px;
transform: translate(9px);
}
.line.six {
left: -8px;
top: 35px;
transform: rotate(-55deg) translate(9px);
}
.line.seven {
left: 11px;
bottom: -21px;
transform: translateY(-20px);
width: 2px;
height: 10px;
}
input[type="radio"]:checked ~ .bullet .line.zero{
animation-name:drop-zero;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.one{
animation-name:drop-one;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.two{
animation-name:drop-two;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.three{
animation-name:drop-three;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.four{
animation-name:drop-four;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.five{
animation-name:drop-five;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.six{
animation-name:drop-six;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.seven{
animation-name:drop-seven;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
#keyframes explode {
0%{
opacity: 0;
transform: scale(10);
}
60%{
opacity: 1;
transform: scale(0.5);
}
100%{
opacity: 1;
transform: scale(1);
}
}
#keyframes drop-zero {
0% {
opacity: 0;
transform: translateY(20px);
height: 10px;
}
20% {
opacity:1;
}
100% {
transform: translateY(-2px);
height: 0px;
opacity:0;
}
}
#keyframes drop-one {
0% {
opacity: 0;
transform: rotate(-55deg) translate(-20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: rotate(-55deg) translate(9px);
width: 0px;
opacity:0;
}
}
#keyframes drop-two {
0% {
opacity: 0;
transform: translate(-20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: translate(9px);
width: 0px;
opacity:0;
}
}
#keyframes drop-three {
0% {
opacity: 0;
transform: rotate(55deg) translate(-20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: rotate(55deg) translate(9px);
width: 0px;
opacity:0;
}
}
#keyframes drop-four {
0% {
opacity: 0;
transform: rotate(55deg) translate(20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: rotate(55deg) translate(-9px);
width: 0px;
opacity:0;
}
}
#keyframes drop-five {
0% {
opacity: 0;
transform: translate(20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: translate(-9px);
width: 0px;
opacity:0;
}
}
#keyframes drop-six {
0% {
opacity: 0;
transform: rotate(-55deg) translate(20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: rotate(-55deg) translate(-9px);
width: 0px;
opacity:0;
}
}
#keyframes drop-seven {
0% {
opacity: 0;
transform: translateY(-20px);
height: 10px;
}
20% {
opacity:1;
}
100% {
transform: translateY(2px);
height: 0px;
opacity:0;
}
}
and if you want to see it in blogger view, click here

Related

Full screen overlay menu toggle

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.

Time Based Animated Background

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>

Using waypoints for scroll on animation

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;
}
}`

How to get an Arrow shape on the below provided JS filddle circular progress bar

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/

Text Underline Animation Left to Right

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.

Categories