CSS animation reset transform

CSS animation reset transform - javascript

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

Related

Section snapping whilst scrolling

I'm trying to implement page/section snapping as you scroll page to page, for some reason the class="outer" seems to be interfering with the first page title, button and the nav bar? The nav bar was functional before I added the classes "outer" and "page" the title and button also remained on the first page and did not pass through to the other pages. anyone know what this problem is? have a feeling it's something simple
html, body {
margin: 0;
height:100%;
width:100%;
padding:0;
}
#media (min-height: 30em) {
.section__content > * {
opacity: 0;
transform: translate3d(0, 4rem, 0);
transition: opacity 800ms var(--delay),
transform 800ms cubic-bezier(0.13, 0.07, 0.26, 0.99) var(--delay);
}
}
.is-visible .section__content > * {
opacity: 1;
transform: translate3d(0, 1rem, 0);
}
.is-visible .section__img {
opacity: 0.75;
}
section {
display: block;
background: #CFF;
height:100%;
width:100%;
box-sizing:border-box;
scroll-snap-align: center;
}
.background1 {
background: url("IMG-7323.GIF") no-repeat center center ;
background-size: cover;
max-width: 100%;
max-height: 100%;
height: 100vh;
width: 100vw;
}
.outer {
overflow-y:auto;
scroll-snap-type: y mandatory;
height: 100vh;
}
.page {
scroll-snap-align: start; height: 100vh;
}
#one {
background: #111816;
color: #fff;
}
/* Title section 1 */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient(
45deg,
#ffffff,
#969594,
#ffffff,
#969594,
#ffffff,
#969594,
#ffffff,
#969594,
#ffffff
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgb(150, 167, 204);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
h1 {
position: relative;
font-family: TaylorGothic;
font-size: calc(20px + 5vw);
font-weight: 700;
color: #fff;
letter-spacing: 0.02em;
text-transform: uppercase;
text-shadow: 0 0 0.15em #1da9cc;
user-select: none;
white-space: nowrap;
filter: blur(0.007em);
animation: shake 2.5s infinite linear forwards;
}
#font-face {
font-family: TaylorGothic;
src: url(TaylorGothic.woff2);
}
#keyframes shake {
5%, 15%, 25%, 35%, 55%, 65%, 75%, 95% {
filter: blur(0.018em);
transform: translateY(0.018em) rotate(0deg);
}
10%, 30%, 40%, 50%, 70%, 80%, 90% {
filter: blur(0.01em);
transform: translateY(-0.018em) rotate(0deg);
}
20%, 60% {
filter: blur(0.03em);
transform: translate(-0.018em, 0.018em) rotate(0deg);
}
45%, 85% {
filter: blur(0.03em);
transform: translate(0.018em, -0.018em) rotate(0deg);
}
100% {
filter: blur(0.007em);
transform: translate(0) rotate(-0.5deg);
}
}
#keyframes crack1 {
0%, 95% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(-51%, -48%);
}
}
#keyframes crack2 {
0%, 95% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(-49%, -53%);
}
}
/* for the heading and the button alignment*/
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* section one end */
#two {
background: #123037;
color: #fff;
font-size: 30px;
}
#three {
background: #74BE98;
font-size: 30px;
}
#four {
background: #BED28D;
font-size: 30px;
}
#five {
background: #95211D;
color: #fff;
font-size: 30px;
}
nav {
position: fixed;
}
nav a {
display: block;
font-size: 12px;
color: #FFF;
text-align: center;
background: #000;
padding: 10px;
margin: 3px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css"> <title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
</head>
<body>
<nav>
one
two
three
four
five
</nav>
<div class="outer">
<section id="one" >
<div class="page">
<div class="background1"></div>
<!-- Title -->
<div class="btn-centering">
<h1 data-text="black mirror"><span>Ghosted</span></h1>
<button class="glow-on-hover" onclick="location.href='products.html'" type="button">
View Products</button></div>
<!-- Socail media buttons -->
</section>
<section id="two">Page 2
<div class="page"></div>
</section>
<section id="three">Page 3
<div class="page"></div>
</section>
<section id="four">Page 4
<div class="page"></div>
</section>
<section id="five">Page 5
<div class="page"></div>
</section>
</div>
</body>
</html>

Two things,
Because btn-centering is not wrapped into any position: relative element, so it behaves like position: fixed, It was working for you previously because .outer didn't have overflow, overflow also affects positions
another thing is you have added overflow-y: auto to .outer so it has scroll now and body doesn't, but in jquery, you are trying to scroll the body.
I have added relative to .page element of first .section
I have added z-index: 1 to .nav because the relative element is affecting .nav
I have changed $('html,body').animate to $('.outer').animate
After doing all the above changes the page was scrolling to wrong sections, I found that Jquery will change the offset top when the page scroll is changed, So I also changed target.offset().top to target[0].offsetTop (target[0].offsetTop is supported in all browsers including IE)
html,
body {
margin: 0;
height: 100%;
width: 100%;
padding: 0;
}
.relative {
position: relative;
}
#media (min-height: 30em) {
.section__content>* {
opacity: 0;
transform: translate3d(0, 4rem, 0);
transition: opacity 800ms var(--delay), transform 800ms cubic-bezier(0.13, 0.07, 0.26, 0.99) var(--delay);
}
}
.is-visible .section__content>* {
opacity: 1;
transform: translate3d(0, 1rem, 0);
}
.is-visible .section__img {
opacity: 0.75;
}
section {
display: block;
background: #CFF;
height: 100%;
width: 100%;
box-sizing: border-box;
scroll-snap-align: center;
}
.background1 {
background: url("IMG-7323.GIF") no-repeat center center;
background-size: cover;
max-width: 100%;
max-height: 100%;
height: 100vh;
width: 100vw;
}
.outer {
overflow-y: auto;
scroll-snap-type: y mandatory;
height: 100vh;
}
.page {
scroll-snap-align: start;
height: 100vh;
}
#one {
background: #111816;
color: #fff;
}
/* Title section 1 */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient( 45deg, #ffffff, #969594, #ffffff, #969594, #ffffff, #969594, #ffffff, #969594, #ffffff);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgb(150, 167, 204);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
h1 {
position: relative;
font-family: TaylorGothic;
font-size: calc(20px + 5vw);
font-weight: 700;
color: #fff;
letter-spacing: 0.02em;
text-transform: uppercase;
text-shadow: 0 0 0.15em #1da9cc;
user-select: none;
white-space: nowrap;
filter: blur(0.007em);
animation: shake 2.5s infinite linear forwards;
}
#font-face {
font-family: TaylorGothic;
src: url(TaylorGothic.woff2);
}
#keyframes shake {
5%,
15%,
25%,
35%,
55%,
65%,
75%,
95% {
filter: blur(0.018em);
transform: translateY(0.018em) rotate(0deg);
}
10%,
30%,
40%,
50%,
70%,
80%,
90% {
filter: blur(0.01em);
transform: translateY(-0.018em) rotate(0deg);
}
20%,
60% {
filter: blur(0.03em);
transform: translate(-0.018em, 0.018em) rotate(0deg);
}
45%,
85% {
filter: blur(0.03em);
transform: translate(0.018em, -0.018em) rotate(0deg);
}
100% {
filter: blur(0.007em);
transform: translate(0) rotate(-0.5deg);
}
}
#keyframes crack1 {
0%,
95% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(-51%, -48%);
}
}
#keyframes crack2 {
0%,
95% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(-49%, -53%);
}
}
/* for the heading and the button alignment*/
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* section one end */
#two {
background: #123037;
color: #fff;
font-size: 30px;
}
#three {
background: #74BE98;
font-size: 30px;
}
#four {
background: #BED28D;
font-size: 30px;
}
#five {
background: #95211D;
color: #fff;
font-size: 30px;
}
nav {
position: fixed;
z-index: 1;
}
nav a {
display: block;
font-size: 12px;
color: #FFF;
text-align: center;
background: #000;
padding: 10px;
margin: 3px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('.outer').animate({
scrollTop: target[0].offsetTop
}, 1000);
return false;
}
}
});
});
</script>
</head>
<body>
<nav>
one
two
three
four
five
</nav>
<div class="outer">
<section id="one">
<div class="page relative">
<div class="background1"></div>
<!-- Title -->
<div class="btn-centering">
<h1 data-text="black mirror"><span>Ghosted</span></h1>
<button class="glow-on-hover" onclick="location.href='products.html'" type="button">
View Products</button></div>
</div>
<!-- Socail media buttons -->
</section>
<section id="two">Page 2
<div class="page"></div>
</section>
<section id="three">Page 3
<div class="page"></div>
</section>
<section id="four">Page 4
<div class="page"></div>
</section>
<section id="five">Page 5
<div class="page"></div>
</section>
</div>
</body>
</html>

How make the input go from draging to pressing left and right

Hello I don't really understand javascript well because I only use python typically. and I'm doing this javascript project and I want to make it where the input is not dragging and instead it is left and right.
So like when you move the lock all your have to do is press the arrow keys. Any help would greatly be very very nice.
JS
// make dial draggable
Draggable.create(".dial", {
type:"rotation",
throwProps:true
});
// values 40 or above will be set to 0
const combo = [20, 5, 30],
findCombo = function(comboArr){
let dial = $(".dial"),
dialTrans = dial.css("transform"),
ticks = 40,
tickAngle = 360 / ticks,
numOffset = 0.5, // how far red arrow can be from number
// break down matrix value of dial transform and get angle
matrixVal = dialTrans.split('(')[1].split(')')[0].split(','),
cos1 = matrixVal[0],
sin = matrixVal[1],
negSin = matrixVal[2],
cos2 = matrixVal[3],
angle = Math.round(Math.atan2(sin, cos1) * (180 / Math.PI)) * -1;
// convert negative angles to positive
if (angle < 0) {
angle += 360;
}
// check numbers found, stop loop if at first number not found
for (let i = 0; i < comboArr.length; ++i) {
if (!$(".num" + (i + 1)).hasClass("found")) {
if (angle > (comboArr[i] - numOffset) * tickAngle &&
angle < (comboArr[i] + numOffset) * tickAngle) {
// make numbers green when found
$(".num" + (i + 1)).addClass("found");
// on unlock
if (i == comboArr.length - 1) {
$(".shackle").addClass("unlocked");
$(".top").addClass("pivot1");
$(".inner").addClass("pivot2");
$(".left").addClass("moveRight");
$(".dentL, .dentR").addClass("moveLeft");
// then lock again
setTimeout(function() {
$(".shackle").removeClass("unlocked");
$(".top").removeClass("pivot1");
$(".inner").removeClass("pivot2");
$(".left").removeClass("moveRight");
$(".dentL, .dentR").removeClass("moveLeft");
$("body").attr("style","background: black;");
$(".sitelocker").attr("style","display:none;");
$(".mainsitebody").removeAttr("style");
for (let j = 0; j < combo.length; ++j) {
$(".num" + (j + 1)).removeClass("found");
}
}, 2400);
}
}
break;
}
}
};
// dial interaction (mouse)
$(".dial").on("click",function(){
findCombo(combo);
});
// dial interaction (touch)
$(".dial").on("touchend",function(){
findCombo(combo);
});
CSS
.sitelocker {
counter-reset: inc -5;
font-family: Open Sans, sans-serif;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
height: 100vh;
overflow: hidden;
}
.container {
margin-bottom: 18px;
position: relative;
height: 270px;
width: 180px;
}
.lock, .dial {
border-radius: 50%;
}
.arrow, .dial {
margin: auto;
}
.shackle, .dial, .tick {
position: absolute;
}
.lock {
background: #aaa;
position: absolute;
bottom: 0;
height: 180px;
width: 180px;
}
.shackle {
bottom: 108px;
right: 22.5px;
width: 135px;
height: 168.75px;
will-change: transform;
z-index: -1;
}
.shackle div {
background: #999999;
position: absolute;
will-change: transform;
}
.shackle .top {
border-radius: 135px 135px 0 0;
height: 67.5px;
width: 135px;
transform-origin: 100% 0;
}
.shackle .inner {
background: #fff;
border-radius: 50%;
top: 33.75px;
left: 33.75px;
height: 67.5px;
width: 67.5px;
}
.shackle .left, .shackle .right {
top: 66.5px;
width: 33.75px;
}
.shackle .left {
border-radius: 0 0 6.75px 6.75px;
height: 94.5px;
overflow: hidden;
position: relative;
}
.shackle .left .dentL, .shackle .left .dentR {
position: absolute;
bottom: 16.875px;
z-index: 2;
}
.shackle .left .dentL {
border-top: 15px solid transparent;
border-bottom: 5px solid transparent;
border-left: 15px solid #fff;
left: -30px;
}
.shackle .left .dentR {
border-top: 15px solid transparent;
border-bottom: 5px solid transparent;
border-right: 15px solid #fff;
right: 0;
}
.shackle .right {
right: 0;
height: 135px;
}
.arrow {
border: 7.5px solid transparent;
border-color: #a00 transparent transparent transparent;
margin-top: 11.25px;
margin-bottom: 3px;
transform: translateY(7.5px);
height: 0;
width: 0;
}
.dial {
background: #333 radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 30px, #1a1a1a 30px, #1a1a1a 32.25px, rgba(0, 0, 0, 0) 32.25px, rgba(0, 0, 0, 0));
font-family: Helvetica, sans-serif;
left: 0;
right: 0;
bottom: 7.2px;
position: absolute;
height: 144px;
width: 144px;
transform: rotate(0deg);
will-change: transform;
z-index: 1;
}
.tick {
background: #fff;
color: #fff;
font-size: 15px;
top: 72px;
left: 70.5px;
width: 3px;
height: 9px;
transform-origin: 50% -63px;
}
.tick::before {
display: block;
margin: -18px -18px 0 -18px;
text-align: center;
transform: rotate(180deg);
}
.tick:nth-of-type(1) {
transform: translateY(63px) rotate(180deg);
height: 18px;
transform-origin: 50% -54px;
transform: translateY(54px) rotate(180deg);
}
.tick:nth-of-type(1)::before {
counter-increment: inc 5;
content: counter(inc);
}
.tick:nth-of-type(2) {
transform: translateY(63px) rotate(189deg);
}
.tick:nth-of-type(3) {
transform: translateY(63px) rotate(198deg);
}
.tick:nth-of-type(4) {
transform: translateY(63px) rotate(207deg);
}
.tick:nth-of-type(5) {
transform: translateY(63px) rotate(216deg);
}
.tick:nth-of-type(6) {
transform: translateY(63px) rotate(225deg);
height: 18px;
transform-origin: 50% -54px;
transform: translateY(54px) rotate(225deg);
}
.tick:nth-of-type(6)::before {
counter-increment: inc 5;
content: counter(inc);
}
.tick:nth-of-type(7) {
transform: translateY(63px) rotate(234deg);
}
.tick:nth-of-type(8) {
transform: translateY(63px) rotate(243deg);
}
.tick:nth-of-type(9) {
transform: translateY(63px) rotate(252deg);
}
.tick:nth-of-type(10) {
transform: translateY(63px) rotate(261deg);
}
.tick:nth-of-type(11) {
transform: translateY(63px) rotate(270deg);
height: 18px;
transform-origin: 50% -54px;
transform: translateY(54px) rotate(270deg);
}
.tick:nth-of-type(11)::before {
counter-increment: inc 5;
content: counter(inc);
}
.tick:nth-of-type(12) {
transform: translateY(63px) rotate(279deg);
}
.tick:nth-of-type(13) {
transform: translateY(63px) rotate(288deg);
}
.tick:nth-of-type(14) {
transform: translateY(63px) rotate(297deg);
}
.tick:nth-of-type(15) {
transform: translateY(63px) rotate(306deg);
}
.tick:nth-of-type(16) {
transform: translateY(63px) rotate(315deg);
height: 18px;
transform-origin: 50% -54px;
transform: translateY(54px) rotate(315deg);
}
.tick:nth-of-type(16)::before {
counter-increment: inc 5;
content: counter(inc);
}
.tick:nth-of-type(17) {
transform: translateY(63px) rotate(324deg);
}
.tick:nth-of-type(18) {
transform: translateY(63px) rotate(333deg);
}
.tick:nth-of-type(19) {
transform: translateY(63px) rotate(342deg);
}
.tick:nth-of-type(20) {
transform: translateY(63px) rotate(351deg);
}
.tick:nth-of-type(21) {
transform: translateY(63px) rotate(360deg);
height: 18px;
transform-origin: 50% -54px;
transform: translateY(54px) rotate(360deg);
}
.tick:nth-of-type(21)::before {
counter-increment: inc 5;
content: counter(inc);
}
.tick:nth-of-type(22) {
transform: translateY(63px) rotate(369deg);
}
.tick:nth-of-type(23) {
transform: translateY(63px) rotate(378deg);
}
.tick:nth-of-type(24) {
transform: translateY(63px) rotate(387deg);
}
.tick:nth-of-type(25) {
transform: translateY(63px) rotate(396deg);
}
.tick:nth-of-type(26) {
transform: translateY(63px) rotate(405deg);
height: 18px;
transform-origin: 50% -54px;
transform: translateY(54px) rotate(405deg);
}
.tick:nth-of-type(26)::before {
counter-increment: inc 5;
content: counter(inc);
}
.tick:nth-of-type(27) {
transform: translateY(63px) rotate(414deg);
}
.tick:nth-of-type(28) {
transform: translateY(63px) rotate(423deg);
}
.tick:nth-of-type(29) {
transform: translateY(63px) rotate(432deg);
}
.tick:nth-of-type(30) {
transform: translateY(63px) rotate(441deg);
}
.tick:nth-of-type(31) {
transform: translateY(63px) rotate(450deg);
height: 18px;
transform-origin: 50% -54px;
transform: translateY(54px) rotate(450deg);
}
.tick:nth-of-type(31)::before {
counter-increment: inc 5;
content: counter(inc);
}
.tick:nth-of-type(32) {
transform: translateY(63px) rotate(459deg);
}
.tick:nth-of-type(33) {
transform: translateY(63px) rotate(468deg);
}
.tick:nth-of-type(34) {
transform: translateY(63px) rotate(477deg);
}
.tick:nth-of-type(35) {
transform: translateY(63px) rotate(486deg);
}
.tick:nth-of-type(36) {
transform: translateY(63px) rotate(495deg);
height: 18px;
transform-origin: 50% -54px;
transform: translateY(54px) rotate(495deg);
}
.tick:nth-of-type(36)::before {
counter-increment: inc 5;
content: counter(inc);
}
.tick:nth-of-type(37) {
transform: translateY(63px) rotate(504deg);
}
.tick:nth-of-type(38) {
transform: translateY(63px) rotate(513deg);
}
.tick:nth-of-type(39) {
transform: translateY(63px) rotate(522deg);
}
.tick:nth-of-type(40) {
transform: translateY(63px) rotate(531deg);
}
.combo {
font-size: 22.5px;
text-align: center;
display: none;
}
.combo span {
background: #ccc;
display: inline-block;
line-height: 30px;
padding: 7.5px;
width: 30px;
height: 30px;
vertical-align: middle;
}
.combo span.found {
background: #ccc;
color: #fff;
}
/* Animation classes */
.unlocked {
animation: moveUp 0.2s linear forwards, moveUp 0.2s 2s linear reverse forwards;
}
.moveLeft {
animation: moveLeft 0.5s 0.4s linear forwards, moveLeft 0.5s 1.2s linear reverse forwards;
}
.moveRight {
animation: moveRight 0.5s 0.4s linear forwards, moveRight 0.5s 1.2s linear reverse forwards;
}
.pivot1 {
animation: pivot1 0.5s 0.4s linear forwards, pivot1 0.5s 1.2s linear reverse forwards;
}
.pivot2 {
animation: pivot2-1 0.25s 0.4s cubic-bezier(0.6, 0.3, 0.45, 1) forwards, pivot2-2 0.25s 0.65s cubic-bezier(0.2, 0, 0.63, 0.5) forwards, pivot2-2 0.25s 1.3s cubic-bezier(0.2, 0, 0.63, 0.5) reverse forwards, pivot2-1 0.25s 1.45s cubic-bezier(0.6, 0.3, 0.45, 1) reverse forwards;
}
#keyFrames moveUp {
from {
transform: translateY(0);
}
to {
transform: translateY(-63px);
}
}
#keyframes moveLeft {
from {
transform: translateX(0);
}
to {
transform: translateX(30px);
}
}
#keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(202.5px);
}
}
#keyframes pivot1 {
from {
transform: scale(1, 1);
right: 0;
}
50% {
transform: scale(0.25, 1) rotateY(0);
right: 0;
}
50.01% {
transform: scale(0.25, 1) rotateY(180deg);
right: 33.75px;
}
to {
transform: scale(1, 1) rotateY(180deg);
right: 33.75px;
}
}
#keyframes pivot2-1 {
from {
transform: scale(1, 1);
}
to {
transform: scale(0, 1);
}
}
#keyframes pivot2-2 {
from {
transform: scale(0, 1);
}
to {
transform: scale(1, 1);
}
}
:root{
--text-color: #003cff;
--streak-color: #ff0000;
--font-family: "Gidugu";
}
h1, p, span {
color: transparent;
font-weight: 400;
font-size: 6rem;
}
h1 {
display: block;
height: 50vh;
background: #000;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
p, span {
display: inline-block;
}
p {
padding-left: 1rem;
font-size: 6rem;
text-shadow: 0 0 221px transparent;
-webkit-animation: showText 1s 1.5s 1 forwards ease-out;
animation: showText 1s 1.5s 1 forwards ease-out;
position: relative;
font-family: var(--fontstyle), cursive;
}
p:after {
content: "";
width: 30px;
background: var(--text-color);
height: 30px;
position: absolute;
top: 0px;
left: 200px;
border-radius: 100%;
-webkit-transform-origin: center center;
transform-origin: center center;
box-shadow: 0 0 0px 103px var(--text-color);
box-sizing: border-box;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-animation: scaleBounce .3s 2s 1 linear forwards;
animation: scaleBounce .3s 2s 1 linear forwards;
}
span {
text-shadow: -48px -203px 150px var(--text-color), 132px -203px 150px var(--text-color);
-webkit-animation: enterFromTop 1s ease-in 1 forwards, moveLetters .6s 2s alternate infinite ease-out;
animation: enterFromTop 1s ease-in 1 forwards, moveLetters .6s 2s alternate infinite ease-out;
font-family: var(--fontstyle), cursive;
}
span:first-child {
-webkit-animation-delay: -.3s;
animation-delay: -.3s;
}
span:nth-child(2) {
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
span:nth-child(3) {
-webkit-animation-delay: .7s;
animation-delay: .7s;
}
h1:after {
content: "";
display: block;
width: 200px;
height: 4px;
position: absolute;
left: 50%;
margin-left: -300px;
margin-top: 60px;
border-radius: 100%;
background: var(--streak-color);
box-shadow: 32px 5px 0 var(--streak-color);
-webkit-animation: moveShadow 1s ease-in-out infinite alternate, moveElement 1s 2.5s ease-in infinite;
animation: moveShadow 1s ease-in-out infinite alternate, moveElement 1s 2.5s ease-in infinite;
opacity: 0;
-webkit-transform: translateX(-50px);
transform: translateX(-50px);
}
#-webkit-keyframes scaleBounce {
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0.3;
background: transparent;
box-shadow: 0 0 20px 103px transparent;
}
}
#keyframes scaleBounce {
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0.3;
background: transparent;
box-shadow: 0 0 20px 103px transparent;
}
}
#-webkit-keyframes moveLetters {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
}
}
#keyframes moveLetters {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
}
}
#-webkit-keyframes moveElement {
30%, 50% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
-webkit-transform: translateX(690px);
transform: translateX(690px);
opacity: 0;
}
}
#keyframes moveElement {
30%, 50% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
-webkit-transform: translateX(690px);
transform: translateX(690px);
opacity: 0;
}
}
#-webkit-keyframes moveShadow {
100% {
box-shadow: -32px 5px 0 var(--streak-color);
}
}
#keyframes moveShadow {
100% {
box-shadow: -32px 5px 0 var(--streak-color);
}
}
#-webkit-keyframes enterFromTop {
100% {
text-shadow: 0 0 1px var(--text-color), 0 0 1px var(--text-color);
}
}
#keyframes enterFromTop {
100% {
text-shadow: 0 0 1px var(--text-color), 0 0 1px var(--text-color);
}
}
#-webkit-keyframes showText {
80% {
text-shadow: 0 0 1px var(--text-color);
}
100% {
text-shadow: 0 0 1px var(--text-color), 0 0 20px var(--text-color);
}
}
#keyframes showText {
80% {
text-shadow: 0 0 1px var(--text-color);
}
100% {
text-shadow: 0 0 1px var(--text-color), 0 0 20px var(--text-color);
}
}
HTML
<html >
<head>
<meta charset="UTF-8">
<title>Combination Lock</title>
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script|Satisfy" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="icon" type="image/png" href="https://beam.pro/_latest/assets/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="https://beam.pro/_latest/assets/favicons/favicon-16x16.png" sizes="16x16">
<link rel="stylesheet" href="css/sitelocker.css">
<link rel="stylesheet" href="css/mainsite.css">
</head>
<body>
<div class="sitelocker">
<div class="container">
<div class="lock">
<div class="shackle">
<div class="top">
<div class="inner"></div>
</div>
<div class="left">
<div class="dentL"></div>
<div class="dentR"></div>
</div>
<div class="right"></div>
</div>
<div class="arrow"></div>
</div>
<div class="dial">
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
</div>
</div>
<div class="combo"><span class="num1"></span> <span class="num2"></span> <span class="num3"></span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/utils/Draggable.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/utils/Draggable.min.js'></script>
<script src="js/sitelocker.js"></script>
</div>
<div class="mainsitebody" style="display:none;">
<h1>
<span>MSFT</span><span>.</span>
<p>online</p>
</h1>
</div>
</body>
</html>

Nextjs React SSR with styled-jsx - Cannot read property 'state' of undefined

I have stumbled upon a problem which I cannot seem to resolve. I tried to search here for the solution but was unable to help myself. I am a newbie in javascript and react so be considerate.
Problem:
I am using React (16.5.0) with nextjs (6.1.2) with styled-jsx like so:
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import Link from 'next/link';
class ProductCard extends Component {
constructor(props) {
super(props);
this.state = {imgLoaded: false};
this.imgHasLoaded = this.imgHasLoaded.bind(this);
}
imgHasLoaded() {
this.setState({imgLoaded:true})
}
render() {
return (
<div className="thumbnail-container">
<div className="loader-box">
<img src={require("../static/loading.png")} className="loading-img" />
</div>
<img src={this.props.imgSrc} className="main-img" onLoad={this.imgHasLoaded} />
<div className="thumbnail-text">
{this.props.text}
</div>
<ul className="item-list">
{this.props.links.map(link =>
<li className="item">
<span className="item-span"> {link.text} </span>
{link.subLinks &&
<ul className="sub-item-list">
{link.subLinks.map(subLink => <li>{subLink.text}</li>)}
</ul>
}
</li>
)}
</ul>
<style jsx> {`
.thumbnail-container {
user-select: none;
position: relative;
text-align: center;
width: 98%;
height: 98%;
margin: 1%;
display: block;
border: 0.3px solid black;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.5);
overflow: hidden;
align-items: center;
}
.thumbnail-text {
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #ffffff;
font-size: 1.8em;
background-color: #333;
padding: 5px;
border-radius: 5px;
text-shadow: 1px 1px #000000;
text-transform: uppercase;
box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 1);
transition: all 0.2s ease;
}
.thumbnail-container:hover .thumbnail-text, .thumbnail-container:focus .thumbnail-text, .thumbnail-container:active .thumbnail-text {
top: 0;
transform: translate(-50%, 0);
background-color: rgba(255, 124, 4, 0.9);
color: #000000;
text-shadow: none;
}
.main-img {
width: 100%;
height: 100%;
border-radius: 8px;
margin: auto;
-webkit-filter: grayscale(40%) contrast(120%) brightness(110%) saturate(120%);
-moz-filter: grayscale(40%) contrast(120%) brightness(110%) saturate(120%);
filter: grayscale(40%) contrast(120%) brightness(110%) saturate(120%);
opacity: ${this.state.imgLoaded ? 1 : 0};
}
.thumbnail-container:hover .main-img, .thumbnail-container:focus .main-img, .thumbnail-container:active .main-img{
-webkit-filter: grayscale(40%) contrast(120%) saturate(120%) brightness(30%);
-moz-filter: grayscale(40%) contrast(120%) saturate(120%) brightness(30%);
filter: grayscale(40%) contrast(120%) saturate(120%) brightness(30%);
}
.item-list {
display: none;
position: absolute;
bottom: 0;
left: 0;
height: calc(100% - 2em);
flex-flow: column wrap;
justify-content: space-around;
list-style-type: none;
}
.thumbnail-container:hover .item-list, .thumbnail-container:focus .item-list, .thumbnail-container:active .item-list{
display: flex;
}
.item {
font-size: 1.3em;
display: flex;
flex-flow: column wrap;
}
.item-span {
padding-left: 8px;
border-bottom: solid #ff7c04;
border-left: solid #ff7c04;
transition: border-bottom 0.2s ease;
}
.item:hover .item-span, .item:focus .item-span, .item:active .item-span{
border-bottom: none;
}
.sub-item-list {
margin-left: 8px;
margin-top: 8px;
border-bottom: solid #ff7c04;
border-left: solid #ff7c04;
height: auto;
flex: 0;
overflow: hidden;
transition: flex 0.2s ease;
}
.item:hover .sub-item-list, .item:focus .sub-item-list, .item:active .sub-item-list{
flex: 1;
}
.loader-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 48px;
height: 48px;
}
.loading-img {
-webkit-animation: rotate-scale-up 1s linear infinite both;
animation: rotate-scale-up 1s linear infinite both;
}
#-webkit-keyframes rotate-scale-up {
0% {
-webkit-transform: scale(1) rotateZ(0);
transform: scale(1) rotateZ(0);
}
50% {
-webkit-transform: scale(1.5) rotateZ(180deg);
transform: scale(1.5) rotateZ(180deg);
}
100% {
-webkit-transform: scale(1) rotateZ(360deg);
transform: scale(1) rotateZ(360deg);
}
}
#keyframes rotate-scale-up {
0% {
-webkit-transform: scale(1) rotateZ(0);
transform: scale(1) rotateZ(0);
}
50% {
-webkit-transform: scale(1.5) rotateZ(180deg);
transform: scale(1.5) rotateZ(180deg);
}
100% {
-webkit-transform: scale(1) rotateZ(360deg);
transform: scale(1) rotateZ(360deg);
}
}
a {
text-decoration: none;
}
#media only screen and (max-width: 700px) {
.thumbnail-container {
width: 96%;
height: 96%;
margin: 2%;
}
.thumbnail-text {
height: 1.5em;
font-size: 1em !important;
}
.item-list {
height: calc(100% - 3em) !important;
}
}
`}
</style>
</div>
);
}
}
However when using code above I get
Cannot read property 'state' of undefined
error in render function at line 26 (where item-list begins). The problem has something to do with using
opacity: ${this.state.imgLoaded ? 1 : 0};
in styled-jsx, because without this line, code works well.
Interestingly if I remove the item-list and its contents everything is working even with
opacity: ${this.state.imgLoaded ? 1 : 0};
I am sorry if this is something trivial or/and i forgot something fundamental. Just push me in the correct direction please

ok i found out that my problem was related to styled jsx issue described here:
https://github.com/zeit/styled-jsx/issues/486
temporary workaround is to pull the imgLoaded into var and then use it in styled jsx.
Similar example here : https://github.com/zeit/next.js/issues/5735

Animating left to right underline using box-shadow

How can I go about animating a fake box-shadow underline that have under my the link? I would like to have the underline go from left to right.
I am using a script that changes the color of the underline everything that it loads the page it alternates between three colors.
I have tried to add "animation: stretchRight;" to a.red, a.blue, a.yellow, but it does not seem to work.
I can use the use the stretchRight class to other elements so I know that works well. I believe it has something to do with the script.
Below is the code I am working on.
Can anyone of you wizards help me with this problem?
body {
background-color: #FFFFFF;
margin: 0px;
}
.container {
display: block;
width: 85%;
/*center vertically & horizontally*/
position:absolute; top:50%; left:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
#wotd {
text-align: center;
margin: 0;
font-weight: bold;
cursor: pointer;
clear: none;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
animation: fadein 2s;
}
a, a:visited, a:hover {
/*display: block; this makes the whole line justified*/
-ms-text-align-last: justify;
-moz-text-align-last: justify;
text-align-last: justify;
text-decoration: none;
color: #000000;
}
a.red {
box-shadow: inset 0 -1.3vw 0 0 #DB3069;
}
a.yellow {
box-shadow: inset 0 -1.3vw 0 0 #fffd35;
}
a.blue {
box-shadow: inset 0 -1.3vw 0 0 #00f9ff;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* This is WiP */
#keyframes stretchRight {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
#-webkit-keyframes stretchRight {
0% {
-webkit-transform: scaleX(0);
}
100% {
-webkit-transform: scaleX(1);
}
}
#object {
display: block;
height: 180px;
width: 180px;
margin-left: auto;
margin-right: auto;
margin-bottom: 100px;
visibility: visible;
}
.eee {
box-shadow: inset 0 -1.3vw 0 0 #00f9ff;
animation: stretchRight;
-webkit-animation: stretchRight;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
<body>
<div class="container">
<div id="wotd">blah blah blueee<a id="decor" href="https://stackoverflow.com/questions/44692808/integrating-a-script-within-css">pew pew paw</a></div>
<div id="object" class="eee"></div>
</div>
</body>
<script type="text/javascript">
var classes = ['red', 'blue', 'yellow'];
var random_class = classes[Math.floor(Math.random() * classes.length)];
var title = document.getElementById('decor');
classes.forEach((el) => {
title.classList.remove(el);
});
title.classList.add(random_class);
</script>
</html>

You need to specify the animation on the link itself and the #keyframes must specify the CSS property you want to animate.
var classes = ['red', 'blue', 'yellow'];
var random_class = classes[Math.floor(Math.random() * classes.length)];
var title = document.getElementById('decor');
classes.forEach((el) => {
title.classList.remove(el);
});
title.classList.add(random_class);
body {
background-color: #FFFFFF;
margin: 0px;
}
.container {
display: block;
width: 85%;
/*center vertically & horizontally*/
position:absolute; top:50%; left:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
#wotd {
text-align: center;
margin: 0;
font-weight: bold;
cursor: pointer;
clear: none;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
animation: fadein 2s;
}
a, a:visited, a:hover {
/*display: block; this makes the whole line justified*/
-ms-text-align-last: justify;
-moz-text-align-last: justify;
text-align-last: justify;
text-decoration: none;
color: #000000;
}
a.red {
box-shadow: inset 0 -1.3vw 0 0 #DB3069;
}
a.yellow {
box-shadow: inset 0 -1.3vw 0 0 #fffd35;
}
a.blue {
box-shadow: inset 0 -1.3vw 0 0 #00f9ff;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
#keyframes stretchRight {
0% {
transform: scaleX(0);
border-bottom:none;
}
100% {
transform: scaleX(1);
border-bottom:1px solid black;
}
}
#decor {
animation-duration: 3s;
animation-name: stretchRight;
}
<div class="container">
<div id="wotd">blah blah blueee<a id="decor" href="https://stackoverflow.com/questions/44692808/integrating-a-script-within-css">pew pew paw</a></div>
<div id="object" class="eee"></div>
</div>

Placing image over text

How to overlay image on text which is like a pattern image.
like we do in css for applying color with hex value
color: #ffffff;
How it can be done?
I'm trying to get pattern over text
Thanks in advance.

I have please check the code..
h1 {
background: url(http://www.lovethispic.com/uploaded_images/114180-Pink-Glitter-Pattern-.jpg) no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size:80px
}
<h1>Welcome</h1>

trying this
answer1
=============================================
answer2
demo
html
<div id="container">
<h1>HAWAII</h1>
</div>
css
h1, p { margin: 0; }
#container {
padding: 20px 20px 100px;
margin: 50px;
position: relative;
}
#container h1 {
/* has same bg as #container */
background: url(http://media.royalcaribbean.com/content/shared_assets/images/destinations/regions/hero/hawaii_01.jpg);
font-size: 12em;
font-family: impact;
left: 0;
line-height: 100%;
padding-top: 25px; /* padding + border of div */
position: absolute; /* position at top left of #containter to sync bg */
text-align: center;
top: 0;
width: 100%;
text-fill-color: transparent; /* not yet supported */
background-clip: text; /* not yet supported */
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-moz-text-fill-color: transparent; /* not yet supported */
-moz-background-clip: text; /* not yet supported */
/* text-shadow: 5px 5px 0px rgba(0,0,0,0.1); */
}
================
answer3
css
body {
font: normal 16px/1.5 Arial, sans-serif;
}
h1, p {
margin: 0;
padding: 0 0 .5em;
}
.container {
margin: 0 auto;
max-width: 480px;
}
/*
* Caption component
*/
.caption {
position: relative;
overflow: hidden;
/* Only the -webkit- prefix is required these days */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.caption::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.caption:hover::before {
background: rgba(0, 0, 0, .5);
}
.caption__media {
display: block;
min-width: 100%;
max-width: 100%;
height: auto;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.caption__overlay__title {
-webkit-transform: translateY( -webkit-calc(-100% - 10px) );
transform: translateY( calc(-100% - 10px) );
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay__title {
-webkit-transform: translateY(0);
transform: translateY(0);
}
demo

Develop Reference

JavaScript is the programming language of the Web.

CSS animation reset transform - javascript

This removes the value of the CSS property entirely, will that help? // Reset transform $('#clock .mm').css({'transform': ''});

Related

Section snapping whilst scrolling

How make the input go from draging to pressing left and right

Nextjs React SSR with styled-jsx - Cannot read property 'state' of undefined

Animating left to right underline using box-shadow

Placing image over text

Categories

Resources