Related
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>
I'm kind of new to the programming world and the professor requires me to stop the popping and play the music in the background of the main page when he clicks on the word "PLAY MUSIC". I don't know how to do that, although I have tried a lot. Is it even possible to do that ?
$(document).ready(function(){
for (var i=1; i <= $('.slider__slide').length; i++){
$('.slider__indicators').append('<div class="slider__indicator" data-slide="'+i+'"></div>')
}
setTimeout(function(){
$('.slider__wrap').addClass('slider__wrap--hacked');
}, 1000);
})
function goToSlide(number){
$('.slider__slide').removeClass('slider__slide--active');
$('.slider__slide[data-slide='+number+']').addClass('slider__slide--active');
}
$('.slider__next, .go-to-next').on('click', function(){
var currentSlide = Number($('.slider__slide--active').data('slide'));
var totalSlides = $('.slider__slide').length;
currentSlide++
if (currentSlide > totalSlides){
currentSlide = 1;
}
goToSlide(currentSlide);
})
body {
background: #aaa;
font-family: "Open Sans", sans-serif;
}
.slider {
position: relative;
height: 100vh;
width: 100vw;
background: #777;
overflow: hidden;
}
.slider__wrap {
position: absolute;
width: 100vw;
height: 100vh;
transform: translateX(100vw);
top: 0%;
left: 0;
right: auto;
overflow: hidden;
transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transform-origin: 0% 50%;
transition-delay: 450ms;
opacity: 0;
}
.slider__wrap--hacked {
opacity: 1;
}
.slider__back {
position: absolute;
width: 100%;
height: 100%;
background-size: auto 100%;
background-position: center;
background-repeat: none;
transition: filter 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__inner {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0%;
background-size: auto 133.3333%;
background-position: center;
background-repeat: none;
transform: scale(0.75);
transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 450ms step-end;
opacity: 0;
box-shadow: 0 3vh 3vh rgba(0, 0, 0, 0);
padding: 15vh;
box-sizing: border-box;
}
.slider__content {
position: relative;
top: 50%;
width: auto;
transform: translateY(-50%);
color: white;
font-family: "Heebo", sans-serif;
opacity: 0;
transition: opacity 450ms;
}
.slider__content h1 {
font-weight: 900;
font-size: 9vh;
line-height: 0.85;
margin-bottom: 0.75vh;
pointer-events: none;
text-shadow: 0 0.375vh 0.75vh rgba(0, 0, 0, 0.1);
}
.slider__content a {
cursor: pointer;
font-size: 2.4vh;
letter-spacing: 0.3vh;
font-weight: 100;
position: relative;
}
.slider__content a:after {
content: "";
display: block;
width: 9vh;
background: white;
height: 1px;
position: absolute;
top: 50%;
left: 6vh;
transform: translateY(-50%);
transform-origin: 0% 50%;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:before {
content: "";
border-top: 1px solid white;
border-right: 1px solid white;
display: block;
width: 1vh;
height: 1vh;
transform: translateX(0) translateY(-50%) rotate(45deg);
position: absolute;
font-family: "Heebo", sans-serif;
font-weight: 100;
top: 50%;
left: 15vh;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:hover:after {
transform: scaleX(1.5);
transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:hover:before {
transform: translateX(6vh) translateY(-50%) rotate(45deg);
transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__slide {
position: absolute;
left: 0;
height: 100vh;
width: 100vw;
transition: transform 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-delay: 600ms;
pointer-events: none;
z-index: 0;
}
.slider__slide--active {
transform: translatex(0%);
z-index: 2;
}
.slider__slide--active .slider__wrap {
transform: translateX(0);
transform-origin: 100% 50%;
opacity: 1;
-webkit-animation: none;
animation: none;
}
.slider__slide--active .slider__back {
filter: blur(1.5vh);
transition: filter 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-delay: 900ms !important;
}
.slider__slide--active .slider__inner {
transform: scale(0.8);
box-shadow: 0 1vh 6vh rgba(0, 0, 0, 0.2);
pointer-events: auto;
opacity: 1;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 1ms step-end;
transition-delay: 900ms;
}
.slider__slide--active .slider__content {
opacity: 1;
transition-delay: 1350ms;
}
.slider__slide:not(.slider__slide--active) .slider__wrap {
-webkit-animation-name: hack;
animation-name: hack;
-webkit-animation-duration: 900ms;
animation-duration: 900ms;
-webkit-animation-delay: 450ms;
animation-delay: 450ms;
-webkit-animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
#-webkit-keyframes hack {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(-100vw);
opacity: 1;
}
51% {
transform: translateX(-100vw);
opacity: 0;
}
52% {
transform: translateX(100vw);
opacity: 0;
}
100% {
transform: translateX(100vw);
opacity: 1;
}
}
#keyframes hack {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(-100vw);
opacity: 1;
}
51% {
transform: translateX(-100vw);
opacity: 0;
}
52% {
transform: translateX(100vw);
opacity: 0;
}
100% {
transform: translateX(100vw);
opacity: 1;
}
}
.slider__slide:nth-child(1) .slider__back, .slider__slide:nth-child(1) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=931);
}
.slider__slide:nth-child(2) .slider__back, .slider__slide:nth-child(2) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=929);
}
.slider__slide:nth-child(3) .slider__back, .slider__slide:nth-child(3) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=927);
}
.sig {
position: fixed;
bottom: 8px;
right: 8px;
text-decoration: none;
font-size: 12px;
font-weight: 100;
font-family: sans-serif;
color: rgba(255, 255, 255, 0.4);
letter-spacing: 2px;
z-index: 9999;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Popout Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Heebo:100,900|Open+Sans:300" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="slider">
<div class="slider__slide slider__slide--active" data-slide="1">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> One</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__slide" data-slide="2">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> Two</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__slide" data-slide="3">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> Three</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__indicators"></div>
</div><a class="sig" href="https://audio.code.org/win1.mp3" target="_blank">PLAY MUSIC</a>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>
You can follow these steps:
Add an <audio> tag to your HTML with a src attribute containing the URI for the audio you want to play. This tag is the one which will load the content from https://audio.code.org/win1.mp3.
<audio src="https://audio.code.org/win1.mp3" id="myAudio"></audio>
Remove the href attribute from your .sig anchor (<a>) element, since it will not take the user to the audio resource webpage anymore. Instead, it will work like a button which will be responsible for playing the audio when clicked.
Having an <a> element working as a <button> element isn't good for accessibility, unless you make this behavior explicit by means of role="button". This attribute will indicate that your <a> will work as a button. Yes, you can also replace that tag with a <button> tag as long as you are willing to modify your CSS for maintaining aesthetics.
<a class="sig" role="button">PLAY MUSIC</a>
In your JavaScript code, attach a click event to .sig, telling it to play the audio you want when it's clicked.
$('.sig').on('click', () => $('#myAudio').get(0).play());
Try it below.
$(document).ready(function(){
for (var i=1; i <= $('.slider__slide').length; i++){
$('.slider__indicators').append('<div class="slider__indicator" data-slide="'+i+'"></div>')
}
setTimeout(function(){
$('.slider__wrap').addClass('slider__wrap--hacked');
}, 1000);
})
function goToSlide(number){
$('.slider__slide').removeClass('slider__slide--active');
$('.slider__slide[data-slide='+number+']').addClass('slider__slide--active');
}
$('.slider__next, .go-to-next').on('click', function(){
var currentSlide = Number($('.slider__slide--active').data('slide'));
var totalSlides = $('.slider__slide').length;
currentSlide++
if (currentSlide > totalSlides){
currentSlide = 1;
}
goToSlide(currentSlide);
})
$('.sig').on('click', () => $('#myAudio').get(0).play());
body {
background: #aaa;
font-family: "Open Sans", sans-serif;
}
.slider {
position: relative;
height: 100vh;
width: 100vw;
background: #777;
overflow: hidden;
}
.slider__wrap {
position: absolute;
width: 100vw;
height: 100vh;
transform: translateX(100vw);
top: 0%;
left: 0;
right: auto;
overflow: hidden;
transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transform-origin: 0% 50%;
transition-delay: 450ms;
opacity: 0;
}
.slider__wrap--hacked {
opacity: 1;
}
.slider__back {
position: absolute;
width: 100%;
height: 100%;
background-size: auto 100%;
background-position: center;
background-repeat: none;
transition: filter 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__inner {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0%;
background-size: auto 133.3333%;
background-position: center;
background-repeat: none;
transform: scale(0.75);
transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 450ms step-end;
opacity: 0;
box-shadow: 0 3vh 3vh rgba(0, 0, 0, 0);
padding: 15vh;
box-sizing: border-box;
}
.slider__content {
position: relative;
top: 50%;
width: auto;
transform: translateY(-50%);
color: white;
font-family: "Heebo", sans-serif;
opacity: 0;
transition: opacity 450ms;
}
.slider__content h1 {
font-weight: 900;
font-size: 9vh;
line-height: 0.85;
margin-bottom: 0.75vh;
pointer-events: none;
text-shadow: 0 0.375vh 0.75vh rgba(0, 0, 0, 0.1);
}
.slider__content a {
cursor: pointer;
font-size: 2.4vh;
letter-spacing: 0.3vh;
font-weight: 100;
position: relative;
}
.slider__content a:after {
content: "";
display: block;
width: 9vh;
background: white;
height: 1px;
position: absolute;
top: 50%;
left: 6vh;
transform: translateY(-50%);
transform-origin: 0% 50%;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:before {
content: "";
border-top: 1px solid white;
border-right: 1px solid white;
display: block;
width: 1vh;
height: 1vh;
transform: translateX(0) translateY(-50%) rotate(45deg);
position: absolute;
font-family: "Heebo", sans-serif;
font-weight: 100;
top: 50%;
left: 15vh;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:hover:after {
transform: scaleX(1.5);
transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:hover:before {
transform: translateX(6vh) translateY(-50%) rotate(45deg);
transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__slide {
position: absolute;
left: 0;
height: 100vh;
width: 100vw;
transition: transform 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-delay: 600ms;
pointer-events: none;
z-index: 0;
}
.slider__slide--active {
transform: translatex(0%);
z-index: 2;
}
.slider__slide--active .slider__wrap {
transform: translateX(0);
transform-origin: 100% 50%;
opacity: 1;
-webkit-animation: none;
animation: none;
}
.slider__slide--active .slider__back {
filter: blur(1.5vh);
transition: filter 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-delay: 900ms !important;
}
.slider__slide--active .slider__inner {
transform: scale(0.8);
box-shadow: 0 1vh 6vh rgba(0, 0, 0, 0.2);
pointer-events: auto;
opacity: 1;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 1ms step-end;
transition-delay: 900ms;
}
.slider__slide--active .slider__content {
opacity: 1;
transition-delay: 1350ms;
}
.slider__slide:not(.slider__slide--active) .slider__wrap {
-webkit-animation-name: hack;
animation-name: hack;
-webkit-animation-duration: 900ms;
animation-duration: 900ms;
-webkit-animation-delay: 450ms;
animation-delay: 450ms;
-webkit-animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
#-webkit-keyframes hack {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(-100vw);
opacity: 1;
}
51% {
transform: translateX(-100vw);
opacity: 0;
}
52% {
transform: translateX(100vw);
opacity: 0;
}
100% {
transform: translateX(100vw);
opacity: 1;
}
}
#keyframes hack {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(-100vw);
opacity: 1;
}
51% {
transform: translateX(-100vw);
opacity: 0;
}
52% {
transform: translateX(100vw);
opacity: 0;
}
100% {
transform: translateX(100vw);
opacity: 1;
}
}
.slider__slide:nth-child(1) .slider__back, .slider__slide:nth-child(1) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=931);
}
.slider__slide:nth-child(2) .slider__back, .slider__slide:nth-child(2) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=929);
}
.slider__slide:nth-child(3) .slider__back, .slider__slide:nth-child(3) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=927);
}
.sig {
position: fixed;
bottom: 8px;
right: 8px;
text-decoration: none;
font-size: 12px;
font-weight: 100;
font-family: sans-serif;
color: rgba(255, 255, 255, 0.4);
letter-spacing: 2px;
z-index: 9999;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Popout Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Heebo:100,900|Open+Sans:300" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="slider">
<div class="slider__slide slider__slide--active" data-slide="1">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> One</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__slide" data-slide="2">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> Two</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__slide" data-slide="3">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> Three</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__indicators"></div>
</div>
<audio src="https://audio.code.org/win1.mp3" id="myAudio"></audio>
<a class="sig" role="button">PLAY MUSIC</a>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>
Please help with the code! I need to hover the mouse over the button with the cart, it added a class and svg class, and the button with favorites, also added a class.
And Vice versa-hovering the mouse over your favorites, the button with the cart is hidden
$('.item-block__button-cart').mouseenter
function() {
$(this).addClass('item-block__button-cart--active');
$(this).find("svg").addClass("active-svg");
$(this).siblings(".item-block__button").addClass("item-block__button-favorite--deactive");
}
);
$('.item-block__button-cart').mouseleave
function() {
$(this).removeClass('item-block__button-cart--active');
$(this).find("svg").removeClass("active-svg");
$(this).siblings(".item-block__button").removeClass("item-block__button-favorite--deactive");
}
);
$('.item-block__button-favorite').mouseenter
function() {
$(this).addClass('item-block__button-favorite--active');
$(this).find("svg").addClass("active-svg");
$(this).siblings(".item-block__button").addClass("item-block__button-cart--deactive");
}
);
$('.item-block__button-favorite').mouseleave
function() {
$(this).removeClass('item-block__button-favorite--active');
$(this).find("svg").removeClass("active-svg");
$(this).siblings(".item-block__button").removeClass("item-block__button-cart--deactive");
}
);
.item-block__buttons {
border-top: 1px solid hsla(0, 0%, 96%, .75);
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
opacity: 1;
-webkit-transition: opacity .2s;
transition: opacity .2s;
z-index: 2;
background: hsla(0, 0%, 100%, .75);
overflow: hidden
}
.item-block:hover .catalog__items-item-slider .carousel__arrow--detail,
.item-block:hover .item-block__buttons {
opacity: 1
}
.item-block__button {
width: 50%;
position: relative;
z-index: 2;
-webkit-transition: opacity .1s, -webkit-transform .2s;
transition: opacity .1s, -webkit-transform .2s;
transition: transform .2s, opacity .1s;
transition: transform .2s, opacity .1s, -webkit-transform .2s
}
.item-block__button-cart--deactive,
.item-block__button-favorite--deactive {
display: none
}
.item-block__button-cart--active,
.item-block__button-favorite--active {
width: 100%
}
.item-block__button-favorite {
border-right: 1px solid hsla(0, 0%, 96%, .7)
}
.item-block__button-favorite--active {
border: none
}
.item-block__button svg {
position: absolute;
top: 50%;
left: 75px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
fill: #4c4b5b;
-webkit-transition: -webkit-transform .2s;
transition: -webkit-transform .2s;
transition: transform .2s;
transition: transform .2s, -webkit-transform .2s
}
.item-block__button i {
position: absolute;
top: 50%;
left: 15px;
line-height: 18px;
font-size: 14px;
color: #b6b8ba;
margin-top: -9px;
right: 15px;
text-align: center
}
.item-block__button-cart svg {
left: auto;
right: 80px
}
.item-block--big .item-block__button svg {
left: 175px
}
.item-block--big .item-block__button-cart svg {
left: auto;
right: 175px
}
.item-block__button-cart--added svg.active-svg {
right: 160px
}
.item-block__button-cart--active svg {
-webkit-transform: translate(-135px, -50%);
transform: translate(-135px, -50%)
}
.item-block--big .item-block__button-cart--active svg {
-webkit-transform: translate(-240px, -50%);
transform: translate(-240px, -50%)
}
.item-block__button-favorite--active svg {
-webkit-transform: translate(30px, -50%);
transform: translate(30px, -50%)
}
.item-block--big .item-block__button-favorite--active svg {
-webkit-transform: translate(130px, -50%);
transform: translate(130px, -50%)
}
.item-block__button a.addet-to-basket-link,
.item-block__button span {
color: #4c4b5b;
text-transform: uppercase;
font-size: 14px;
position: absolute;
top: 20px;
left: 115px;
white-space: nowrap;
letter-spacing: 1.05px;
-webkit-transition: opacity .1s, -webkit-transform .2s;
transition: opacity .1s, -webkit-transform .2s;
transition: transform .2s, opacity .1s;
transition: transform .2s, opacity .1s, -webkit-transform .2s;
opacity: 0
}
.item-block--big .item-block__button span {
left: 215px
}
.item-block__button-cart span {
left: auto;
right: -30px;
color: #ff2438
}
.item-block--big .item-block__button-cart span {
left: auto;
right: 65px
}
.item-block__button-cart--added span {
right: -80px
}
.item-block__button-cart--active span {
opacity: 1;
-webkit-transform: translateX(-135px);
transform: translateX(-135px)
}
.item-block--big .item-block__button-cart--active span {
opacity: 1;
-webkit-transform: translateX(-240px);
transform: translateX(-240px)
}
.item-block__button-favorite--added span {
left: 35px
}
.item-block__button-favorite--active.item-block__button-favorite--added svg {
left: 0
}
.item-block__button-favorite--active span {
opacity: 1;
-webkit-transform: translateX(30px);
transform: translateX(30px)
}
.item-block--big .item-block__button-favorite--active span {
opacity: 1;
-webkit-transform: translateX(130px);
transform: translateX(130px)
}
.item-block__button-favorite svg {
width: 22px;
fill: #4c4b5b;
height: 18px
}
.item-block__button-cart svg {
width: 35px;
height: 35px;
fill: #ff2438
}
<span class="item-block__buttons">
<span class="js-add-to-favorite item-block__button item-block__button-favorite" data-toggle="tooltip" data-placement="top" onclick="return $.addFavorite('/shop/favorite/', {#id}, this)">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
<span>В избранное</span>
</span>
<span class="js-add-to-basket js-add-to-basket-list item-block__button item-block__button-cart" data-toggle="modal" data-target="#added2basket" data-placement="top" onclick="return $.bootstrapAddIntoCart('/shop/cart/', {#id}, 1)">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="20.5" r="1"/><circle cx="18" cy="20.5" r="1"/><path d="M2.5 2.5h3l2.7 12.4a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.6l1.6-8.4H7.1"/></svg>
<span>В корзину</span>
</span>
</span>
This code work!
$(document).ready(function() {
$('.item-block__button-cart').mouseenter(function() {
$(this).addClass('item-block__button-cart--active');
$(this).find("svg").addClass("active-svg");
$(this).siblings(".item-block__button").addClass("item-block__button-favorite--deactive");
});
$('.item-block__button-cart').mouseleave(function() {
$(this).removeClass('item-block__button-cart--active');
$(this).find("svg").removeClass("active-svg");
$(this).siblings(".item-block__button").removeClass("item-block__button-favorite--deactive");
});
$('.item-block__button-favorite').mouseenter(function() {
$(this).addClass('item-block__button-favorite--active');
$(this).find("svg").addClass("active-svg");
$(this).siblings(".item-block__button").addClass("item-block__button-cart--deactive");
});
$('.item-block__button-favorite').mouseleave(function() {
$(this).removeClass('item-block__button-favorite--active');
$(this).find("svg").removeClass("active-svg");
$(this).siblings(".item-block__button").removeClass("item-block__button-cart--deactive");
});
});
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
So Id like to create an animation where you click on the heart that there is a circle around that heart that's scales up and then fades away. I've tried to give the SVG a border but nothing shows up? I'm honestly not sure what I'm doing wrong here. Any help would be greatly appreciated. I want it to be similar to the Twitter heart but without the dots around the heart when you click it. Here is a link to my codepen https://codepen.io/Brushel/pen/MEEYgQ
(function() {
var animatedHeart, heartanimation, heartanimationthree;
animatedHeart = document.getElementById('heart1');
heartanimation = document.getElementById('heart2');
heartanimationthree = document.getElementById('heart3');
animatedHeart.addEventListener('click', function() {
return animatedHeart.classList.toggle('fill');
});
heartanimation.addEventListener('click', function() {
return heartanimation.classList.toggle('fillup');
});
heartanimationthree.addEventListener('click', function() {
return heartanimationthree.classList.toggle('heartscale');
});
}).call(this);
body {
max-width: 1200px;
margin: 0 auto;
position: relative;
background: black;
height: 100vh;
}
h2 {
text-align: center;
color: white;
font-weight: 300;
letter-spacing: 0.6px;
font-size: 3em;
}
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
max-width: 1280px;
margin: 10px auto;
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
.col-12 {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
}
#heart1 {
max-height: 70px;
fill: white;
stroke: white;
cursor: pointer;
}
.fill {
-webkit-animation: love .5s linear alternate forwards;
animation: love .5s linear alternate forwards;
stroke: #D22128;
stroke-width: 5px;
}
#-webkit-keyframes love {
0% {
stroke-dashoffset: 1000;
stroke: #D22128;
}
50% {
stroke-dashoffset: 0;
stroke: #D22128;
fill: #D22128;
-webkit-transform: translateY(5px);
transform: translateY(5px);
}
100% {
stroke: transparent;
fill: #D22128;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
#keyframes love {
0% {
stroke-dashoffset: 1000;
stroke: #D22128;
}
50% {
stroke-dashoffset: 0;
stroke: #D22128;
fill: #D22128;
-webkit-transform: translateY(5px);
transform: translateY(5px);
}
100% {
stroke: transparent;
fill: #D22128;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
#heart2 {
max-height: 70px;
fill: white;
cursor: pointer;
}
.fillup {
-webkit-animation: lovebutton .5s alternate forwards;
animation: lovebutton .5s alternate forwards;
}
#-webkit-keyframes lovebutton {
0% {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
fill: #D22128;
}
25% {
-webkit-transform: translate3d(4px, 0, 0);
transform: translate3d(4px, 0, 0);
fill: #D22128;
}
100% {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
fill: #D22128;
}
}
#keyframes lovebutton {
0% {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
fill: #D22128;
}
25% {
-webkit-transform: translate3d(4px, 0, 0);
transform: translate3d(4px, 0, 0);
fill: #D22128;
}
100% {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
fill: #D22128;
}
}
#heart3 {
max-height: 70px;
fill: white;
stroke: white;
cursor: pointer;
}
.heartscale {
-webkit-animation: heart-beat .5s alternate forwards;
animation: heart-beat .5s alternate forwards;
stroke-width: 0px;
}
#-webkit-keyframes heart-beat {
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
50% {
-webkit-transform: scale(1.3, 1.3);
transform: scale(1.3, 1.3);
fill: #D22128;
}
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
fill: #D22128;
}
}
#keyframes heart-beat {
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
50% {
-webkit-transform: scale(1.3, 1.3);
transform: scale(1.3, 1.3);
fill: #D22128;
}
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
fill: #D22128;
}
}
<body>
<div class="container">
<div class="col-12">
<h2>Animated Hearts</h2>
<div class="circle">
<svg class="mo-icon__svg" x="0px" y="0px"
viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="heart1">
<g id="icon_x5F_wishlist">
<g transform="translate(0,-952.36218)">
<path class="st0" id="st0" d="M15.33293,980.7616c-19.11968,19.8092-19.10147,51.68518,0,71.51379l84.61456,87.86926
c28.23759-29.25574,56.47517-58.51135,84.71275-87.76758c19.11969-19.80969,19.11969-51.70477,0-71.51422
c-19.12007-19.80945-49.90512-19.80994-69.02521,0l-15.58933,16.15155l-15.68754-16.25305
c-19.12008-19.80945-49.90513-19.80945-69.02521,0L15.33293,980.7616z"/>
</g>
</g>
</svg>
</div>
<!-- End of the first Heart -->
<svg class="mo-icon__svg" x="0px" y="0px"
viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="heart2">
<g id="icon_x5F_wishlist">
<g transform="translate(0,-952.36218)">
<path class="st0" id="st0" d="M15.33293,980.7616c-19.11968,19.8092-19.10147,51.68518,0,71.51379l84.61456,87.86926
c28.23759-29.25574,56.47517-58.51135,84.71275-87.76758c19.11969-19.80969,19.11969-51.70477,0-71.51422
c-19.12007-19.80945-49.90512-19.80994-69.02521,0l-15.58933,16.15155l-15.68754-16.25305
c-19.12008-19.80945-49.90513-19.80945-69.02521,0L15.33293,980.7616z"/>
</g>
</g>
</svg>
<!-- End of second heart -->
<svg class="mo-icon__svg" x="0px" y="0px"
viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="heart3">
<g id="icon_x5F_wishlist">
<g transform="translate(0,-952.36218)">
<path class="st0" id="st0" d="M15.33293,980.7616c-19.11968,19.8092-19.10147,51.68518,0,71.51379l84.61456,87.86926
c28.23759-29.25574,56.47517-58.51135,84.71275-87.76758c19.11969-19.80969,19.11969-51.70477,0-71.51422
c-19.12007-19.80945-49.90512-19.80994-69.02521,0l-15.58933,16.15155l-15.68754-16.25305
c-19.12008-19.80945-49.90513-19.80945-69.02521,0L15.33293,980.7616z"/>
</g>
</g>
</svg>
</div>
</div>
</body>
the last one looks pretty close ! I think there is a simpler (sort of simpler) way to do this in css.
Nicolas Escoffer has a great article about it here:
Article:
https://blog.prototypr.io/twitter-s-heart-animation-in-full-css-b1c00ca5b774
Code Pen:
https://codepen.io/OxyDesign/pen/avXVbo
otherwise I would suggest creating a keyframes animation that uses the border of the circle div you have created. Be sure to set the circle div outside of the heart .svg so it is not wrapping the element:
I made an example for you below based on your original codepen:
#HTML:
<body>
<div class="container">
<div class="col-12">
<h2> </h2>
<br>
<div id="circle" class="circle"></div>
<svg class="mo-icon__svg" x="0px" y="0px"
viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="heart4">
<g id="icon_x5F_wishlist">
<g transform="translate(0,-952.36218)">
<path class="st0" id="st0" d="M15.33293,980.7616c-19.11968,19.8092-19.10147,51.68518,0,71.51379l84.61456,87.86926
c28.23759-29.25574,56.47517-58.51135,84.71275-87.76758c19.11969-19.80969,19.11969-51.70477,0-71.51422
c-19.12007-19.80945-49.90512-19.80994-69.02521,0l-15.58933,16.15155l-15.68754-16.25305
c-19.12008-19.80945-49.90513-19.80945-69.02521,0L15.33293,980.7616z"/>
</g>
</g>
</svg>
</div>
</body>
#SCSS:
body {
max-width: 1200px;
margin: 0 auto;
position: relative;
background: black;
height: 100vh;
color: white;
}
h2{
text-align: center;
color: white;
font-weight: 300;
letter-spacing: 0.6px;
font-size: 3em;
user-select: none;
}
// Set up basic Grid
.container {
display: block;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row;
max-width: 1280px;
margin: 10px auto;
padding-left: 50%;
margin-left: auto;
margin-right: auto;
}
.col-12{
flex: 0 0 100%;
}
// Fourth Animation
#heart4 {
max-height: 70px;
fill: white;
stroke: white;
cursor: pointer;
position: relative;
width: 5rem;
}
.dot-animation {
position: relative;
}
.dot {
height: 10px;
width: 10px;
background: white;
border-radius: 50%;
position: absolute;
&:nth-child(1){
background: #D22128;
left: 49.7%;
top: 75px;
}
&:nth-child(2){
background: #D22128;
left: 49.4%;
bottom: 8%;
}
&:nth-child(3){
background: #D22128;
left: 53.5%;
top: 30px;
}
&:nth-child(4){
background: #D22128;
left: 45%;
top: 30px;
}
}
.bands {
animation: snap 1s forwards;
stroke-width: 0;
}
#keyframes snap {
from {
transform: scale3d(1, 1, 1);
filter: brightness(0.5);
}
30% {
transform: scale3d(1.25, 0.75, 1); }
40% {
transform: scale3d(0.75, 1.25, 1); }
50% {
transform: scale3d(1.15, 0.85, 1); }
65% {
transform: scale3d(.95, 1.05, 1); }
75% {
transform: scale3d(1.05, .95, 1); }
to {
transform: scale3d(1, 1, 1);
fill: #D22128;
filter: brightness(1);
}
}
.circle {
position: absolute;
display: block;
border: 1px solid white;
margin-left: 2.5rem;
top: 8rem;
}
.burst {
animation: burst .5s forwards;
}
#keyframes burst {
0% {
border: 1px solid white;
border-radius: 50% 50%;
width: 0.25rem;
height: 0.25rem;
}
100% {
border: 5px solid white;
border-radius: 50% 50%;
width: 7rem;
height: 7rem;
margin-left: -.90rem;
margin-top: -2.45rem;
opacity: 0;
z-index: 999;
}
}
#JS:
# Grab Element
heartanimationfour = document.getElementById('heart4')
circle = document.getElementById('circle')
# Add event listener for the click
heartanimationfour.addEventListener 'click', ->
heartanimationfour.classList.toggle 'bands',
circle.classList.toggle 'burst'
https://codepen.io/cwoolf123/pen/wvMdyKq?editors=1111