Related
I tried my best to make sense of the title but for more references, I am giving screenshots below the menu when it slides over the page covering the content the content should be hidden but its not
Before:
https://imgur.com/PTNwfdA
After:
https://imgur.com/B2Iz4IE
Here's the CSS for my navigation:
/* navbar Start*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
position: fixed;
top: 0;
right: -100%;
height: 100%;
width: 100%;
background-color: #F68B50;
/*background: linear-gradient(375deg, #F68B50, #4114a1, #f92c78);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
transition: all 0.6s ease-in-out;
}
#active:checked~.wrapper {
/*left: 0;*/
right: 0;
}
.menu-btn {
position: absolute;
z-index: 2;
right: 20px;
/*left: 20px; */
top: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
/*color: #fff;*/
/*background: linear-gradient(90deg, #f92c78, #4114a1);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
transition: all 0.3s ease-in-out;
}
.menu-btn span,
.menu-btn:before,
.menu-btn:after {
content: "";
position: absolute;
top: calc(50% - 1px);
left: 30%;
width: 40%;
border-bottom: 3px solid #000000;
transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.menu-btn:before {
transform: translateY(-8px);
}
.menu-btn:after {
transform: translateY(8px);
}
.close {
z-index: 1;
width: 100%;
height: 100%;
pointer-events: none;
transition: background .6s;
}
/* closing animation */
#active:checked+.menu-btn span {
transform: scaleX(0);
}
#active:checked+.menu-btn:before {
transform: rotate(45deg);
border-color: #fff;
}
#active:checked+.menu-btn:after {
transform: rotate(-45deg);
border-color: #fff;
}
.wrapper ul {
position: absolute;
top: 60%;
left: 50%;
height: 90%;
transform: translate(-50%, -50%);
list-style: none;
text-align: right;
}
.wrapper ul li {
height: 10%;
margin: 15px 0;
}
.wrapper ul li a {
text-decoration: none;
font-size: 30px;
font-weight: 500;
padding: 5px 30px;
color: #fff;
border-radius: 50px;
position: absolute;
line-height: 50px;
margin: 5px 30px;
opacity: 0;
transition: all 0.3s ease;
transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.wrapper ul li a:after {
position: absolute;
content: "";
background: #fff;
/*background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);*/
/*background: linear-gradient(375deg, #1cc7d0, #2ede98);*/
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: 50px;
transform: scaleY(0);
z-index: -1;
transition: transform 0.3s ease;
}
.wrapper ul li a:hover:after {
transform: scaleY(1);
}
.wrapper ul li a:hover {
color: #4114a1;
}
input[type="checkbox"] {
display: none;
}
.product a img {
display: none;
position: absolute;
left: -400px;
top: -200px;
}
.product a img {
display: none;
}
.product a:hover img {
display: inherit;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
text-align: center;
width: 100%;
color: #202020;
overflow-y: hidden;
}
.content .title {
font-size: 40px;
font-weight: 700;
}
.content p {
font-size: 35px;
font-weight: 600;
}
#active:checked~.wrapper ul li a {
opacity: 1;
align-items: center;
}
.wrapper ul li a {
transition: opacity 1.2s, transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translateX(100px);
font-family: 'LemonMilk';
align-items: center;
}
#active:checked~.wrapper ul li a {
transform: none;
transition-timing-function: ease, cubic-bezier(.1, 1.3, .3, 1);
/* easeOutBackを緩めた感じ */
transition-delay: .6s;
transform: translateX(-100px);
}
.pages-nav--open {
pointer-events: auto;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.pages-nav__item {
display: flex;
flex-direction: row;
min-height: 300vh;
}
.pages-nav .pages-nav__item--social {
width: 100%;
opacity: 0;
-webkit-transition: -webkit-transform 1.2s, opacity 1.2s;
transition: transform 1.2s, opacity 1.2s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
.pages-nav--open .pages-nav__item--social {
opacity: 1;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.link {
font-size: 0.85em;
font-weight: bold;
position: relative;
letter-spacing: 1px;
text-transform: uppercase;
}
.link:hover,
.link:focus {
color: #fff;
}
.link--page {
display: block;
color: #cecece;
text-align: center;
}
.link--page:not(.link--faded)::before {
content: '';
position: absolute;
top: 100%;
left: 50%;
width: 50%;
height: 2px;
margin: 5px 0 0 -15px;
background: #fff;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
}
.link--page:hover:before {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
.link--faded {
color: #4f4f64;
}
.link--faded:hover,
.link--faded:focus {
color: #5c5edc;
}
.link--page.link--faded {
font-size: 0.65em;
}
.link--social {
font-size: 1.5em;
margin: 0 0.75em;
}
.text-hidden {
position: absolute;
display: block;
overflow: hidden;
width: 0;
height: 0;
color: transparent;
}
#media screen and (max-width: 40em) {
.js .pages-nav {
display: block;
padding: 10px 20px 0 20px;
text-align: left;
}
.pages-nav__item {
width: 100%;
}
.pages-nav__item--small {
display: inline-block;
width: auto;
margin-right: 5px;
}
.pages-nav__item--social {
font-size: 0.9em;
}
.menu-button {
top: 15px;
right: 10px;
left: auto;
}
.info {
font-size: 0.85em;
}
.poster {
margin: 1em;
}
}
/* ///////////////////// navbar end ///////////////////////// */
and here's my css for the page this is on:
.typewritter {
height: 80vh;
/*This part is important for centering*/
display: flex;
align-items: center;
justify-content: center;
}
.typing-demo {
width: 28%;
animation: typing 4s steps(22), blink .5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
font-family: monospace;
font-size: 2em;
}
#keyframes typing {
from {
width: 0
}
}
#keyframes blink {
50% {
border-color: transparent
}
}
body {
margin: 0px;
}
#container {
/* Center the text in the viewport. */
position: absolute;
display: flex;
margin: auto;
width: 100vw;
height: 80pt;
top: 0;
bottom: 0;
/* This filter is a lot of the magic, try commenting it out to see how the morphing works! */
filter: url(#threshold) blur(0.6px);
}
/* Your average text styling */
#text1, #text2 {
position: absolute;
width: 100%;
display: inline-block;
font-family: 'Raleway', sans-serif;
font-size: 80pt;
text-align: center;
user-select: none;
}
If any more info is needed I'll be happy to provide it!
all you need to do is just set a greater z-index to .wrapper also u need to give a z-index to .menu-btn else it would be below the wrapper
this should be your code
.menu-btn{
position: absolute;
z-index: 12;
right: 20px;
/*left: 20px; */
top: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
/*color: #fff;*/
/*background: linear-gradient(90deg, #f92c78, #4114a1);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
transition: all 0.3s ease-in-out;
}
.wrapper{
position: fixed;
z-index: 10;
top: 0;
right: -100%;
height: 100%;
width: 100%;
background-color: #F68B50;
/*background: linear-gradient(375deg, #F68B50, #4114a1, #f92c78);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
transition: all 0.6s ease-in-out;
}
So I decided to animate my hamburger menu, which was previously unanimated, so this problem was irrelevant to begin with.
The animation starts as a standard hamburger style menu which has several links to different areas of the homepage. When clicked, I animated the menu to turn from a hamburger to an x, indicating to visitors that they can close the menu by clicking on the x. I ran into a problem though, after clicking on a link within the hamburger menu, the icon does not reset from an x back to the hamburger, and that messes up how the menu is opened on the second time. If a visitor were to open it again, the x would turn into the hamburger when the x is clicked on, and it wouldn't make any sense.
Anyways, I'm just wondering if there's a way I could make it so that when a link in the menu gets clicked on, the x returns to its unopened hamburger form. Here's my code:
var links = document.querySelectorAll('.menu a');
var linksLength = links.length
for(var i = 0; i < linksLength; i++) {
links[i].addEventListener('click', function() {
document.getElementById('toggle').checked = false;
});
}
$(document).ready(function(){
$('.icon').click(function(){
$(this).toggleClass('open');
});
});
.header {
position: absolute;
top: 0px;
left: 0px;
width: 327px;
height: 70px;
line-height: 70px;
padding-left: 15px;
font-family: 'Burbank', 'Alegreya Sans SC', 'Alegreya Sans SC Black', sans-serif;
font-size: 40px;
color: #ffffff;
z-index: 2;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.heading {
position: absolute;
top: 0px;
left: 0px;
width: 327px;
height: 67px;
padding-left: 15px;
z-index: 3;
}
.nav {
position: absolute;
top: 0px;
height: 70px;
background-color: #223861;
box-shadow: 0px 3px 10px 0px rgba(39,38,38,0.6);
-webkit-box-shadow: 0px 3px 10px 0px rgba(39,38,38,0.6);
-moz-box-shadow: 0px 3px 10px 0px rgba(39,38,38,0.6);
text-align: right;
z-index: 1;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.icon {
position: relative;
float: right;
width: 100px;
height: 70px;
padding-left: 13px;
cursor: pointer;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
.icon span {
position: absolute;
left: 0;
display: block;
height: 5px;
width: 45px;
margin-left: 75px;
margin-top: 18px;
background: #ffffff;
border-radius: 4px;
opacity: 1;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.icon span:nth-child(1) {
top: 0px;
}
.icon span:nth-child(2) {
top: 12px;
}
.icon span:nth-child(3) {
top: 24px;
}
.icon.open span:nth-child(1) {
top: 12px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.icon.open span:nth-child(2) {
opacity: 0;
left: -60px;
}
.icon.open span:nth-child(3) {
top: 12px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.header {
width: 90%;
}
.icon {
display: block;
padding-right: 22px;
cursor: pointer;
}
.menu {
max-height: 0px;
transition: max-height .5s ease-in-out;
opacity: 0;
overflow: hidden;
}
.menu a {
display: block;
height: 8vh;
line-height: 8vh;
margin: 0px;
padding: 0px 0px;
border-bottom: 1px solid #eaeaeb;
}
#toggle {
display: none;
}
#toggle:checked + .menu {
max-height: 800px;
opacity: 1;
}
#toggle:not(checked) + .menu {
max-height: 0px;
opacity: 1;
}
<label class="nav" for="toggle" style="z-index:999;">
<div class="icon">
<span></span>
<span></span>
<span></span>
</div>
<input type="checkbox" id="toggle"/>
<div class="menu">
Assault Rifles
Submachine Guns
Shotguns
Sniper Rifles
Pistols
Explosives
Other
Vaulted
</div>
</label>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
Simply add this click handler inside of the $(document).ready() function to remove the open CSS class from the hamburger icon when one of the menu links is clicked:
$('.menu a').click(function() {
$('.icon').removeClass('open');
});
You can do this by PURE CSS also
.navigation__checkbox {
display: none
}
.navigation__button {
height: 7rem;
width: 7rem;
position: fixed;
top: 1rem;
left: 1rem;
border-radius: 50%;
z-index: 2000;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
text-align: center;
cursor: pointer
}
.navigation__icon {
position: relative;
margin-top: 3.5rem;
user-select: none;
}
.navigation__icon,
.navigation__icon::before,
.navigation__icon::after {
width: 3rem;
height: 2px;
background-color: #333;
display: inline-block
}
.navigation__icon::before,
.navigation__icon::after {
content: "";
position: absolute;
left: 0;
transition: all .2s
}
.navigation__icon::before {
top: -.8rem
}
.navigation__icon::after {
top: .8rem
}
.navigation__button:hover .navigation__icon::before {
top: -1rem
}
.navigation__button:hover .navigation__icon::after {
top: 1rem
}
.navigation__checkbox:checked+.navigation__button .navigation__icon {
background-color: transparent
}
.navigation__checkbox:checked+.navigation__button .navigation__icon::before {
top: 0;
transform: rotate(135deg)
}
.navigation__checkbox:checked+.navigation__button .navigation__icon::after {
top: 0;
transform: rotate(-135deg)
}
<div class="navigation">
<input type="checkbox" class="navigation__checkbox" id="navi-toggle">
<label for="navi-toggle" class="navigation__button">
<span class="navigation__icon"> </span>
</label>
</div>
I have a CSS clock, the minute hand has the following animation styling:
animation: a36016 3600s normal infinite steps(3600,end);
This allows it to move along as the minutes go by.
When I load the page the minutes hand has a rotation set like this:
transform:rotate(180deg);
Using setInterval I am trying to reSync it. So for example after 10 minutes if I get the rotation for example as 210deg, and then I change it like this:
$('#clock .mm').css( {'transform': 'rotate(210deg)'});
The problem is that it doesn't actually set the degrees to 210, for some reason it adds to whatever amount of degrees the animation has already moved. So it becomes 210deg plus whatever amount it has already moved.
Can someone tell me how I can adjust the animation styling so this doesnt happen, if change the rotation usig javascript to whatever it is, it should set it to that regardless of how many degrees it has already moved.
Thanks
* BELOW IS THE FULL CODE *
PHP
<?php
date_default_timezone_set("Europe/London");
$hour = date("g");
$minutes = date("i");
$seconds = date("s");
if ($hour>=12){
$hour=0;
}
$hourinseconds = ($hour*3600)+($minutes*60)+$seconds;
$minutesinseconds = ($minutes*60)+$seconds;
$hour_degree = ($hourinseconds/43200)*360;
$minutes_hand = ($minutesinseconds/3600)*360;
$seconds_hand = ($seconds/60)*360;
?>
HTML, CSS and jQuery
$(document).ready(function(){
function SyncTime(){
$.getJSON('ajax.php', function(data) {
$('#clock .hh').css( {'transform': 'rotate('+data.hour+'deg)'});
$('#clock .mm').css( {'transform': 'rotate('+data.min+'deg)'});
});
}
setInterval(SyncTime,5000);
});
body {
overflow: hidden;
width: 100wh;
height: 90vh;
color: #fff;
background: linear-gradient(-45deg, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
#-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
h1,
h6 {
font-family: 'Open Sans';
font-weight: 300;
text-align: center;
position: absolute;
top: 45%;
right: 0;
left: 0;
}
/*** Font for numbers ***/
#font-face {
font-family: 'WallClock';
src: url('fonts/wallclock.eot');
}
#font-face {
font-family: 'WallClock';
src: url('fonts/wallclock.woff') format('woff'), url('fonts/wallclock.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'WallClockPS';
src: url('fonts/wallclock.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
/*** Clock rules. Pure CSS ***/
#clock {
transition: all 0.5s ease;
}
#a {
width: 100em;
height: 100em;
position: relative;
border-radius: 50em;
background: #eee;
box-shadow: inset 0.5em -0.5em 0 #ccc, inset 1.7em -1.7em 0 #555, inset -0.3em -0.4em 0 #999, inset -0.3em 0.2em 0 #ccc, inset -1em -1em 0 #555, 1em 3em 2em rgba(0, 0, 0, 0.3);
}
#b {
width: 94em;
height: 94em;
top: 3em;
left: 3em;
position: relative;
border-radius: 47em;
background: #fff;
box-shadow: inset 0.4em 0 0 #fff, inset 0 -0.6em 0 #ddd, inset 1.6em -0.8em 0 #222, inset -1.6em 0.8em 0 #222, inset 2em 2em 0 #222, 0.6em -0.3em 0 #999, -1em 1em 0 #777, -1.3em -2em 0 #fff, 1.3em 2em 0 #222, 1.3em 3em 0 #999;
}
#c {
width: 89em;
height: 89em;
top: 2.5em;
left: 2.5em;
position: relative;
border-radius: 44.5em;
background: #f4f5f6;
box-shadow: inset 0.5em 1em 0.5em rgba(0, 0, 0, 0.4), inset 1em 2em 2em rgba(0, 0, 0, 0.3), inset 0 0.5em 3em rgba(0, 0, 0, 0.1), -1.6em 0.8em 0 #444, 1.6em -0.8em 0 #444;
}
#d {
width: 88em;
height: 88em;
top: 0.5em;
left: 0.5em;
position: relative;
border-radius: 44em;
}
#e {
width: 81.8em;
height: 81.8em;
padding-top: 40.9em;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
left: 2.9em;
top: 2.9em;
position: absolute;
border: solid 0.4em #777;
border-radius: 40.9em;
}
#ii {
padding-left: 43.4em;
position: absolute;
}
b,
i {
height: 82em;
position: absolute;
border: solid 0 #222;
border-width: 3em 0;
display: block;
}
b {
width: 1.2em;
}
i {
width: 0.2em;
}
b>i,
i>i {
transform: rotate(6deg);
margin-top: -3em;
}
b>b {
transform: rotate(30deg);
margin-top: -3em;
}
b>i {
left: 0.3em;
}
#f,
#g {
font: 12em/1.0em WallClock, sans-serif;
text-align: center;
width: 6.8em;
color: #222;
}
#g>u>u {
letter-spacing: 0.1em;
}
#g>u>u>u {
letter-spacing: 0;
}
u {
display: block;
line-height: 1em;
text-decoration: none;
}
u>u>u>u {
margin: 0.5em -0.55em;
padding: 0 0.05em;
}
u>u>u {
margin: 0.0em -1.75em;
padding: 0 0.7em;
}
u>u {
margin: -0.55em 0;
text-align: right;
padding: 0 1.65em;
}
#f {
margin-top: -3.37em;
}
#g {
margin-top: -6em;
}
#g u>u {
text-align: left;
}
#q {
font: 2.2em/1em Segoe UI, Helvetica, sans-serif;
text-align: center;
margin-top: -11.5em;
color: #555;
}
.ss,
.mm,
.hh {
width: 80em;
height: 80em;
top: 4em;
left: 4em;
position: absolute;
}
.hh {
transform: rotate(-55deg);
}
.mm {
transform: rotate(60deg);
}
.ss {
animation: tick 1s normal infinite steps(25, end);
}
#keyframes tick {
0% {
transform: rotate(0deg);
}
12% {
transform: rotate(6deg);
}
100% {
transform: rotate(6deg);
}
}
.s {
width: 1em;
height: 48em;
top: 6em;
left: 39.5em;
position: relative;
background: #a00;
outline: 1px solid transparent;
animation: a360_10 60s normal infinite steps(60, end);
}
.sr {
width: 3em;
height: 3em;
background: #a00;
margin: -9.5em 0 0 38.4em;
border-radius: 1.5em;
}
#keyframes a360_10 {
0% {
transform: translate(0, 10em) rotate(0deg) translate(0, -10em)
}
100% {
transform: translate(0, 10em) rotate(360deg) translate(0, -10em)
}
}
.m {
height: 48em;
left: 38.9em;
width: 2.2em;
position: relative;
background: #222;
border: 0 0 32em 0;
animation: a36016 3600s normal infinite steps(3600, end);
outline: 1px solid transparent;
}
#keyframes a36016 {
0% {
transform: translate(0, 16em) rotate(0deg) translate(0, -16em);
}
100% {
transform: translate(0, 16em) rotate(360deg) translate(0, -16em);
}
}
.mr {
width: 5em;
height: 5em;
background: #222;
margin: -10.5em 0 0 37.4em;
border-radius: 2.5em;
}
.h {
width: 3em;
height: 34em;
left: 38.5em;
position: relative;
background: #222;
margin-top: 13em;
outline: 1px solid transparent;
animation: a36010 43200s normal infinite steps(43200, end);
}
#sh {
width: 80em;
height: 80em;
top: 2em;
left: 1em;
position: absolute;
}
#sh .s,
#sh .m,
#sh .h,
#sh .mr {
background: #ddd;
xbox-shadow: 0 0 0.5em #ddd, 0 0 0.25em #ddd;
}
#k {
width: 88em;
height: 88em;
position: absolute;
border-radius: 44em;
box-shadow: inset 4.5em 9em 0.5em rgba(250, 252, 253, 0.2);
}
/* Vendor CSS prefixes */
#css3prefixed:checked~#clock {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
#css3prefixed:checked~#clock b>i,
#css3prefixed:checked~#clock i>i,
#css3fixed:checked~#clock b>i,
#css3fixed:checked~#clock i>i {
-webkit-transform: rotate(6deg);
}
#css3prefixed:checked~#clock b>b,
#css3fixed:checked~#clock b>b {
-webkit-transform: rotate(30deg);
}
#css3prefixed:checked~#clock .hh,
#css3fixed:checked~#clock .hh {
-webkit-transform: rotate(-55deg);
}
#css3prefixed:checked~#clock .mm,
#css3fixed:checked~#clock .mm {
-webkit-transform: rotate(60deg);
}
#css3prefixed:checked~#clock .ss,
#css3fixed:checked~#clock .ss {
-webkit-animation: tick 1s normal infinite steps(25, end);
}
#-webkit-keyframes tick {
0% {
-webkit-transform: rotate(0deg);
}
12% {
-webkit-transform: rotate(6deg);
}
100% {
-webkit-transform: rotate(6deg);
}
}
#css3prefixed:checked~#clock .s,
#css3fixed:checked~#clock .s {
-webkit-animation: a360_10 60s normal infinite steps(60, end);
}
#-webkit-keyframes a360_10 {
0% {
-webkit-transform: translate(0, 10em) rotate(0deg) translate(0, -10em)
}
100% {
-webkit-transform: translate(0, 10em) rotate(360deg) translate(0, -10em)
}
}
#css3prefixed:checked~#clock .m,
#css3fixed:checked~#clock .m {
-webkit-animation: a36016 3600s normal infinite steps(3600, end);
}
#-webkit-keyframes a36016 {
0% {
-webkit-transform: translate(0, 16em) rotate(0deg) translate(0, -16em);
}
50% {
-webkit-transform: translate(0, 16em) rotate(180deg) translate(0, -16em);
}
100% {
-webkit-transform: translate(0, 16em) rotate(360deg) translate(0, -16em);
}
}
#css3prefixed:checked~#clock .h,
#css3fixed:checked~#clock .hh {
-webkit-animation: a36010 43200s normal infinite steps(43200, end);
}
/* Fixes */
#css3fixed:checked~#clock {
transition: none;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
}
.fixed {
display: none;
}
/* Following will fix problems with cascaded transformations
are critical in Safari, Mobile Safari, Opera,
non-critical in Chrome and Firefox */
</style><!--[if !IE]>--><style>#css3fixed:checked~#clock .fixed {
display: block;
}
#css3fixed:checked~#clock .pure {
display: none;
}
</style><!-- <![endif]--><style>#css3fixed:checked~#clock b:nth-child(2) {
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
#css3fixed:checked~#clock b:nth-child(3) {
transform: rotate(60deg);
-webkit-transform: rotate(60deg);
}
#css3fixed:checked~#clock b:nth-child(4) {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
#css3fixed:checked~#clock b:nth-child(5) {
transform: rotate(120deg);
-webkit-transform: rotate(120deg);
}
#css3fixed:checked~#clock b:nth-child(6) {
transform: rotate(150deg);
-webkit-transform: rotate(150deg);
}
#css3fixed:checked~#clock i:nth-child(2) {
transform: rotate(12deg);
-webkit-transform: rotate(12deg);
}
#css3fixed:checked~#clock i:nth-child(3) {
transform: rotate(18deg);
-webkit-transform: rotate(18deg);
}
#css3fixed:checked~#clock i:nth-child(4) {
transform: rotate(24deg);
-webkit-transform: rotate(24deg);
}
/* IE10 fix */
#media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
#css3fixed:checked~#clock i,
#css3fixed:checked~#clock b {
border-left: solid 0px #fff;
border-right: solid 0px #fff;
}
}
/* Opera rotation fix */
#css3fixed:checked~#clock .s {
animation: a360_10of 60s normal infinite steps(60, end);
}
#keyframes a360_10of {
0% {
transform: translate(0, 10em) rotate(0deg) translate(0, -10em);
-o-transform: translate(0, 3.2em) rotate(0deg) translate(0, -3.2em)
}
100% {
transform: translate(0, 10em) rotate(360deg) translate(0, -10em);
-o-transform: translate(0, 3.2em) rotate(360deg) translate(0, -3.2em)
}
}
/* Chrome/Windows antialiasing bug. */
#media screen and (-webkit-min-device-pixel-ratio:0) {
#css3fixed:checked~#clock #f,
#css3fixed:checked~#clock #g {
font: 12em/1em WallClockPS, sans-serif;
}
#css3fixed:checked~#clock #g {
-webkit-transform: translate(0, -0.05em);
}
}
/* Clock size selection */
#clock {
font-size: 5px;
}
#size25percent:checked~#clock {
font-size: 25%
}
#size250px:checked~#clock {
font-size: 2.5px
}
#size500px:checked~#clock {
font-size: 5px
}
#size10em:checked~#clock {
font-size: 0.1em
}
#size25percent:checked~#clock {
font-size: 25%
}
/* Controls */
input {
width: 1em;
position: relative;
valign: top;
}
input[type=checkbox] {
left: 0.2em;
}
input+label {
padding: 0.2em 0.4em 0.3em 1.4em;
margin-left: -1.4em;
border-radius: 0.3em;
transition: background 0.5s;
-webkit-transition: background 0.5s;
-moz-transition: background 0.5s;
-o-transition: background 0.5s;
}
input:checked+label {
background: #ABD8F2;
}
input,
label {
line-height: 1.8em;
}
label {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#clock {
position: absolute;
right: 55%;
top: 50px;
display: block;
}
#clock {
margin-top: 4em;
}
body #clock .hh {
transform: rotate(<?php echo $hour_degree;
?>deg);
}
#clock .mm {
transform: rotate(<?php echo $minutes_hand;
?>deg);
-webkit-transform: rotate(<?php echo $minutes_hand;
?>deg);
-ms-transform: rotate(<?php echo $minutes_hand;
?>deg);
}
#clock .ss {
animation: tick 1s normal infinite steps(25, end);
-webkit-animation: tick 1s normal infinite steps(25, end);
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div style="width:700px;;position:absolute;left:748px;top:84px;">Content</div>
<div id="clock" style="margin-top:84px;">
<div id="a">
<div id="b">
<div id="c">
<div id="d">
<div id="sh">
<div class="hh">
<div class="h"></div>
</div>
<div class="mm">
<div class="m"></div>
<div class="mr"></div>
</div>
<div class="ss">
<div class="s"></div>
</div>
</div>
<div id="ii">
<div class="pure">
<b><i><i><i><i></i></i></i></i>
<b><i><i><i><i></i></i></i></i>
<b><i><i><i><i></i></i></i></i>
<b><i><i><i><i></i></i></i></i>
<b><i><i><i><i></i></i></i></i>
<b><i><i><i><i></i></i></i></i></b>
</b>
</b>
</b>
</b>
</b>
</div>
<!-- this is need only to show
bugs-free variant in many browsers -->
<div class="fixed">
<b><i></i><i></i><i></i><i></i></b>
<b><i></i><i></i><i></i><i></i></b>
<b><i></i><i></i><i></i><i></i></b>
<b><i></i><i></i><i></i><i></i></b>
<b><i></i><i></i><i></i><i></i></b>
<b><i></i><i></i><i></i><i></i></b>
</div>
<!-- till here -->
</div>
<div id="e">
<div id="f">
<u>12<u>1<u>2<u>3</u>4</u>5</u></u>
</div>
<div id="g">
<u><u>11<u>10<u>9</u>8</u>7</u>6</u>
</div>
<div id="q"> quartz</div>
</div>
<div class="hh">
<div class="h"></div>
</div>
<div class="mm">
<div class="m"></div>
<div class="mr"></div>
</div>
<div class="ss">
<div class="s"></div>
<div class="sr"></div>
</div>
<div id="k"></div>
</div>
</div>
</div>
</div>
<div id="css3icon"/>
This removes the value of the CSS property entirely, will that help?
// Reset transform
$('#clock .mm').css({'transform': ''});
This issue is not related to changing transform by jQuery or initial value of transform by CSS.
if you have following example:
<!doctype html>
<html lang="en">
<head>
<title></title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
.a{width: 100px; height:100px; margin: 100px auto; background: #000}
.b{height: 100px; width: 100px;transform:rotate(10deg); background: red;}
</style>
</head>
<body>
<div class="a">
<div class="b">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script language="javascript">
$('.b').css( {'transform': 'rotate(20deg)'});
</script>
</body>
</html>
You see that it change just 10 degree and even you change $('.b').css( {'transform': 'rotate(10deg)'}); it does not change.
the problem is related to something else or even a logical error.
According to codes that you sent if you change your jQuery to this:
$(document).ready(function(){
function SyncTime(){
$('#clock .hh').css( {'transform': 'rotate(50deg)'});
$('#clock .mm').css( {'transform': 'rotate(50deg)'});
}
setInterval(SyncTime,5000);
});
After 5 seconds it will redirect to a location and never change its position. the calculation time that pass from ajax.php has issue
Need make CSS (Javascript) underline like this (Some Example from codepen)
#import url(http://fonts.googleapis.com/css?family=Quando);
*, *:after, *:before {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
* {margin:0;padding:0;border:0 none;position: relative; outline: none;
}
html, body {
background: #004050;
font-family: Quando;
font-weight: 300;
width: 100%;
}
h2, h3 {
background: #0D757D;
width: 100%;
min-height: 200px;
line-height: 200px;
font-size: 3rem;
font-weight: normal;
text-align: center;
color: rgba(0,0,0,.4);
margin: 3rem auto 0;
}
.uno {background: #ff5e33;}
.dos.bis {background: #85144B;}
.dos {background: #FADD40;}
h3 {background: #2B5B89;}
h2 > a, h3 > a {
text-decoration: none;
color: rgba(0,0,0,.4);
z-index: 1;
}
h2 > a:before {
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background: #9CF5A6;
visibility: hidden;
border-radius: 5px;
transform: scaleX(0);
transition: .25s linear;
}
h2 > a:hover:before,
h2 > a:focus:before {
visibility: visible;
transform: scaleX(1);
}
.uno a:before {
background: rgba(0,0,0,0);
box-shadow: 0 0 10px 2px #ffdb00;
}
.dos > a:after {
content: "";
position: absolute;
width: 100%;
height: 7px;
border: 1px solid #000;
bottom: -2px;
left: 0;
background: #fff;
border-radius: 5px;
opacity: 0;
transform: scalex(0);
transition: .5s;
}
.dos.bis > a:after {
opacity: .05;
transform: scalex(1);
}
.dos:hover > a:after {
opacity: .15;
transform: scalex(1);
}
.dos.bis > a:before {
background: rgba(0,0,0,0);
box-shadow: 0 0 10px 2px #FADD40;
}
.dos > a:before {
background: rgba(0,0,0,0);
box-shadow: 0 0 10px 2px #FF5E33;
}
h3 > a:before {
content: "";
background: #7FDBFF;
position: absolute;
width: 100%;
height: 5px;
bottom: 0;
left: 0;
border-radius: 5px;
transform: scaleX(0);
animation: 1.4s forwards no-hover-v linear;
animation-fill-mode: forwards;
z-index: -1;
}
h3 > a:hover:before,
h3 > a:focus:before {
animation: .5s forwards hover-v linear;
animation-fill-mode: forwards;
}
#keyframes hover-v {
0% {
transform: scaleX(0);
height: 5px;
}
45% {
transform: scaleX(1.05);
height: 5px;
}
55% {height: 5px;}
100% {
transform: scaleX(1.05);
height: 3.8rem;
}
}
#keyframes no-hover-v {
0% {
transform: scaleX(1.05);
height: 3.8rem;
}
45% {height: 5px;}
55% {
transform: scaleX(1.05);
height: 5px;
opacity: 1;
}
100% {
transform: scaleX(0);
height: 5px;
opacity: .02;
}
}
p {padding: .5rem;}
p a {color: rgba(255,255,255,.5)}
<h2>
<a href=''>:hover, please</a>
</h2>
But the underline must start growing from left to right and and then reduce to from right to left with some speed. And the underline must be animated automatically without mouse hovering links.
An when link have mouse hover the underline must be simultaneously grow to right.
Please code how to do this.
Use transform-origin to control the direction of the scale(), and you can trigger with a class to add/remove the border.
var a = document.getElementById("a");
setTimeout(function() {
a.classList.add("under");
setTimeout(function() {
a.classList.remove("under");
}, 2000);
}, 500);
h2 {
background: #0D757D;
width: 100%;
min-height: 200px;
line-height: 200px;
font-size: 3rem;
font-weight: normal;
text-align: center;
color: rgba(0,0,0,.4);
margin: 3rem auto 0;
}
h2 > a {
text-decoration: none;
color: rgba(0,0,0,.4);
z-index: 1;
position: relative;
}
h2 > a:before {
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background: #9CF5A6;
visibility: hidden;
border-radius: 5px;
transform: scaleX(0);
transition: .25s linear;
transform-origin: 0 0;
}
h2 > a.under:before {
visibility: visible;
transform: scaleX(1);
}
<h2>
<a id="a" href=''>:hover, please</a>
</h2>
I'm working on this page:
http://doitanyway.dk/intelligentsystems/en/homeuk/
Just below slider there's 6 images with some layered hover effects. Everything is working like a charm in Safari, Chrome and Opera - but not in Firefox (and Tor).
It seems to be the "a href" wrap round the img class that is the problem. It is not working in my mac Firefox 52.0. Anybody know a workaround...?
Here's the code for the first of the images:
HTML
<div class="width: 130px">
<div class="hovereffect">
<a href="http://doitanyway.dk/intelligentsystems/en/healthcare/">
<img class="img-responsive" src="http://doitanyway.dk/intelligentsystems/wp-content/uploads/2017/03/submenu_front1.png" alt="">
</a>
<div class="overlay">
<h2>Healthcare</h2>
<p>
See our solutions
</p>
</div>
</div>
</div>
CSS
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #000000;
border-radius: 10px !important;
-moz-border-radius: 10px !important;
-webkit-border-radius: 10px !important;
}
.hovereffect .overlay {
pointer-events: none;
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
padding: 129px 10px;
border-radius: 10px !important;
-moz-border-radius: 10px !important;
-webkit-border-radius: 10px !important;
}
.hovereffect img {
display: block;
position: relative;
-webkit-filter: sepia(50%); /* Safari */
filter: sepia(50%);
max-width: none;
/* width: calc(100% + 20px); */
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.7s, transform 0.7s;
/* -webkit-transform: translate3d(-10px,0,0); */
/* transform: translate3d(-10px,0,0); */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 10px !important;
-moz-border-radius: 10px !important;
-webkit-border-radius: 10px !important;
}
.hovereffect:hover img {
pointer-events: none;
border-radius: 10px !important;
-moz-border-radius: 10px !important;
-webkit-border-radius: 10px !important;
opacity: 0.4;
filter: alpha(opacity=40);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
border-radius: 10px !important;
-moz-border-radius: 10px !important;
-webkit-border-radius: 10px !important;
}
.hovereffect h2 {
/* text-transform: uppercase; */
color: #fff;
text-align: center;
position: relative;
font-size: 11px;
overflow: hidden;
padding: 0.5em 0;
background: rgba(0, 0, 0, 0.6);
border-radius: 8px;
}
.hovereffect h2:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #fff;
content: '';
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
}
.hovereffect:hover h2 {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
text-shadow: none;
background: rgba(0, 0, 0, 0);
}
.hovereffect:hover h2:after {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.hovereffect a, .hovereffect p {
color: #FFF;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
font-size: 10px;
}
.hovereffect:hover a, .hovereffect:hover p {
opacity: 1 !important;
filter: alpha(opacity=100);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
font-size: 10px;
}
Delete the following css rule.
.hovereffect a, .hovereffect p {opacity:0}
Which Firefox version is it not working on? It is working on FF 51 for me.
Those attributes might not be supported or, you might need to add an additional -moz- rule to all of your transforms.
Check support here: http://caniuse.com/#search=transform