Unlimited timing interval in jQuery

Unlimited timing interval in jQuery - javascript

I have one span, and I wrote code for bouncing element, but I can only to set interval for bouncing, but how to set unlimited/infinitely bouncing.
HTML
<div>
<span class="rect">!!!</span>
</div>
JS
$(document).ready(function(){
$('.rect').effect("bounce", { times: 3 }, 300);
})
http://jsfiddle.net/RGvjj/164/

Set success callback function in effect()
$(document).ready(function () {
var cmp = function () {
$('.rect').effect("bounce", {
times: 3
}, 300, cmp);
}
cmp();
})
FIDDLE

You can Bounce element through CSS3 infinity time
.bounce {
position:fixed;
left:50%;
bottom:0;
margin-top:-25px;
margin-left:-25px;
height:50px;
width:50px;
background:red;
-webkit-animation:bounce 1s infinite;
}
#-webkit-keyframes bounce {
0% { bottom:5px; }
25%, 75% { bottom:15px; }
50% { bottom:20px; }
100% {bottom:0;}
}
<div class="bounce"></div>
if you want to get more better Example but it's have very large code see below code:
body { background-color: #DDDDDD; font: 30px sans-serif; height: 350px;}
.ball-wrapper {
position: fixed;
width: 120px;
height: 300px;
margin-left: -60px;
left: 50%;
top: 20%;
}
.ball {
position: absolute;
width: 120px;
height: 120px;
border-radius: 70px;
background: -webkit-linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%);
background: -moz-linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%);
background: linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%);
box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), inset -2px -1px 40px rgba(0,0,0,0.4), 0 0 1px #000;
-webkit-animation: jump 1s infinite;
-moz-animation: jump 1s infinite;
animation: jump 1s infinite;
}
.ball::after {
content: "";
position: absolute;
width: 60px;
height: 30px;
border-radius: 40px / 20px;
left: 30px;
top: 10px;
background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%);
background: -moz-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%);
background: linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%);
}
.ball-shadow {
position: absolute;
left: 50%;
bottom: 0;
width: 50px;
height: 65px;
border-radius: 30px / 40px;
margin-left: -25px;
background: rgba(20, 20, 20, 0.1);
box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
-webkit-transform: scaleY(0.3);
-moz-transform: scaleY(0.3);
transform: scaleY(0.3);
-webkit-animation: shrink 1s infinite;
-moz-animation: shrink 1s infinite;
animation: shrink 1s infinite;
}
/**
* animation
*/
#-webkit-keyframes jump {
0% {
top: 0;
-webkit-animation-timing-function: ease-in;
}
40% {}
50% {
top: 140px;
height: 120px;
-webkit-animtion-timing-function: ease-out;
}
55% {
top: 160px;
height: 100px;
border-radius: 70px/60px;
-webkit-animation-timing-function: ease-in;
}
65% {
top: 110px;
height: 120px;
border-radius: 50%;
-webkit-animation-timing-function: ease-out;
}
95% {
top: 0;
-webkit-animation-timing-function: ease-in;
}
100% {
top: 0;
-webkit-animation-timing-function: ease-in;
}
}
#-moz-keyframes jump {
0% {
top: 0;
-moz-animation-timing-function: ease-in;
}
40% {}
50% {
top: 140px;
height: 120px;
-moz-animtion-timing-function: ease-out;
}
55% {
top: 160px;
height: 100px;
border-radius: 70px/60px;
-moz-animation-timing-function: ease-in;
}
65% {
top: 110px;
height: 120px;
border-radius: 50%;
-moz-animation-timing-function: ease-out;
}
95% {
top: 0;
-moz-animation-timing-function: ease-in;
}
100% {
top: 0;
-moz-animation-timing-function: ease-in;
}
}
#-webkit-keyframes shrink {
0% {
bottom: 0;
margin-left: -30px;
width: 60px;
height: 75px;
background: rgba(20, 20, 20, .1);
box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
border-radius: 30px / 40px;
-webkit-animation-timing-function: ease-in;
}
50% {
bottom: 30px;
margin-left: -10px;
width: 20px;
height: 5px;
background: rgba(20, 20, 20, .3);
box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
border-radius: 20px / 20px;
-webkit-animation-timing-function: ease-out;
}
100% {
bottom: 0;
margin-left: -30px;
width: 60px;
height: 75px;
background: rgba(20, 20, 20, .1);
box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
border-radius: 30px / 40px;
-webkit-animation-timing-function: ease-in;
}
}
#-moz-keyframes shrink {
0% {
bottom: 0;
margin-left: -30px;
width: 60px;
height: 75px;
background: rgba(20, 20, 20, .1);
box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
border-radius: 30px / 40px;
-moz-animation-timing-function: ease-in;
}
50% {
bottom: 30px;
margin-left: -10px;
width: 20px;
height: 5px;
background: rgba(20, 20, 20, .3);
box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
border-radius: 20px / 20px;
-moz-animation-timing-function: ease-out;
}
100% {
bottom: 0;
margin-left: -30px;
width: 60px;
height: 75px;
background: rgba(20, 20, 20, .1);
box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
border-radius: 30px / 40px;
-moz-animation-timing-function: ease-in;
}
}
<div class="ball-wrapper">
<div class="ball"></div>
<div class="ball-shadow"></div>
</div>

Related

How to make the envelop html responsive

I am working on the invite page, in which the envelope is shown first and after clicking on envelope it shows content, the problem is that the envelope is not responsive, I am using display:flex for my main page, but the template I used for envelope does not use flex, when I remove it, it works fine but my main page broke down, so is there any way to fix it?:
(the envelope looks like this on mobile screen)
.frame {
width: 550px;
height: 350px;
margin: 50px auto 0;
position: relative;
background: #435d77;
border-radius: 0 0 40px 40px;
}
#button_open_envelope {
width: 180px;
height: 60px;
position: absolute;
z-index: 311;
top: 250px;
left: 208px;
border-radius: 10px;
color: #fff;
font-size: 26px;
padding: 15px 0;
border: 2px solid #fff;
transition: 0.3s;
}
#button_open_envelope:hover {
background: #fff;
color: #2b67cb;
transform: scale(1.1);
transition: background 0.25s, transform 0.5s, ease-in;
cursor: pointer;
}
.message {
position: relative;
width: 580px;
min-height: 300px;
height: auto;
background: #fff;
margin: 0 auto;
top: 30px;
box-shadow: 0 0 5px 2px #333;
transition: 2s ease-in-out;
transition-delay: 1.5s;
z-index: 300;
}
.left,
.right,
.top {
width: 0;
height: 0;
position: absolute;
top: 0;
z-index: 310;
}
.left {
border-left: 300px solid #337efc;
border-top: 160px solid transparent;
border-bottom: 160px solid transparent;
}
.right {
border-right: 300px solid #337efc;
border-top: 160px solid transparent;
border-bottom: 160px solid transparent;
left: 300px;
}
.top {
border-right: 300px solid transparent;
border-top: 200px solid #03a9f4;
border-left: 300px solid transparent;
transition: transform 1s, border 1s, ease-in-out;
transform-origin: top;
transform: rotateX(0deg);
z-index: 500;
}
.bottom {
width: 600px;
height: 190px;
position: absolute;
background: #2b67cb;
top: 160px;
border-radius: 0 0 30px 30px;
z-index: 310;
}
.open {
transform-origin: top;
transform: rotateX(180deg);
transition: transform 0.7s, border 0.7s, z-index 0.7s ease-in-out;
border-top: 200px solid #2c3e50;
z-index: 200;
}
.pull {
-webkit-animation: message_animation 2s 1 ease-in-out;
animation: message_animation 2s 1 ease-in-out;
-webkit-animation-delay: 0.9s;
animation-delay: 0.45s;
transition: 1.5s;
transition-delay: 1s;
z-index: 350;
}
body {
display: flex;
justify-content: center;
align-items: center;
/* height: 100vh;
width: 100%; */
flex-direction: column;
}
<div class="frame">
<div id="button_open_envelope">
Open Invitation
</div>
<div class="message">
<h1>Invitation</h1>
</div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
</div>

The border properties unfortunately don't take responsive percentages, so your .top .left and .right elements will not be responsive. You could instead create those envelope shapes with clip-path and then combined with a few other CSS updates and your envelope will adjust with screen size. Demo included
.frame {
width: 100%;
max-width: 550px;
height: 100%;
max-height: 350px;
margin: 50px auto 0;
position: relative;
background: #435d77;
border-radius: 0 0 40px 40px;
}
#button_open_envelope {
width: 180px;
height: 60px;
position: absolute;
z-index: 311;
bottom: 0;
left: 50%;
border-radius: 10px;
color: #fff;
font-size: 26px;
padding: 15px 0;
border: 2px solid #fff;
transform: translateX(-50%);
transition: 0.3s;
}
#button_open_envelope:hover {
background: #fff;
color: #2b67cb;
transform: translateX(-50%) scale(1.1);
transition: background 0.25s, transform 0.5s, ease-in;
cursor: pointer;
}
.message {
position: relative;
width: 100%;
min-height: 300px;
height: auto;
background: #fff;
margin: 0 auto;
bottom: 0;
box-shadow: 0 0 5px 2px #333;
transition: 2s ease-in-out;
transition-delay: 1.5s;
z-index: 300;
}
.left,
.right,
.top {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 310;
}
.left {
background: #337efc;
clip-path: polygon(0 0, 0 90%, 50% 50%);
}
.right {
background: #337efc;
clip-path: polygon(100% 0, 100% 90%, 50% 50%);
}
.top {
background: #03a9f4;
clip-path: polygon(0 0, 100% 0, 50% 62.5%);
transition: transform 1s, border 1s, ease-in-out;
transform-origin: top;
transform: rotateX(0deg);
z-index: 500;
}
.bottom {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
background: #2b67cb;
border-radius: 0 0 30px 30px;
z-index: 310;
}
.open {
transform-origin: top;
transform: rotateX(180deg);
transition: transform 0.7s, border 0.7s, z-index 0.7s ease-in-out;
border-top: 200px solid #2c3e50;
z-index: 200;
}
.pull {
-webkit-animation: message_animation 2s 1 ease-in-out;
animation: message_animation 2s 1 ease-in-out;
-webkit-animation-delay: 0.9s;
animation-delay: 0.45s;
transition: 1.5s;
transition-delay: 1s;
z-index: 350;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<div class="frame">
<div id="button_open_envelope">
Open Invitation
</div>
<div class="message">
<h1>Invitation</h1>
</div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
</div>

i want to switch some code from code pen to visual studio code

I'm a beginner and wanted to add one button that I saw on YouTube, the author left a link to the codepen, I went in and copied all the code from there, and pasted it into my project in visual studio code, but the html code looked strange and didn't work at all.
[Link to the Codepen page][1]
$('.order').click(function(e) {
let button = $(this);
if(!button.hasClass('animate')) {
button.addClass('animate');
setTimeout(() => {
button.removeClass('animate');
}, 10000);
}
});
:root {
--primary: #275EFE;
--primary-light: #7699FF;
--dark: #1C212E;
--grey-dark: #3F4656;
--grey: #6C7486;
--grey-light: #CDD9ED;
--white: #FFF;
--green: #16BF78;
--sand: #DCB773;
--sand-light: #EDD9A9;
}
.order {
appearance: none;
border: 0;
background: var(--dark);
position: relative;
height: 63px;
width: 240px;
padding: 0;
outline: none;
cursor: pointer;
border-radius: 32px;
-webkit-mask-image: -webkit-radial-gradient(white, black);
-webkit-tap-highlight-color: transparent;
overflow: hidden;
transition: transform .3s ease;
span {
--o: 1;
position: absolute;
left: 0;
right: 0;
text-align: center;
top: 19px;
line-height: 24px;
color: var(--white);
font-size: 16px;
font-weight: 500;
opacity: var(--o);
transition: opacity .3s ease;
&.default {
transition-delay: .3s;
}
&.success {
--offset: 16px;
--o: 0;
svg {
width: 12px;
height: 10px;
display: inline-block;
vertical-align: top;
fill: none;
margin: 7px 0 0 4px;
stroke: var(--green);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 16px;
stroke-dashoffset: var(--offset);
transition: stroke-dashoffset .3s ease;
}
}
}
&:active {
transform: scale(.96);
}
.lines {
opacity: 0;
position: absolute;
height: 3px;
background: var(--white);
border-radius: 2px;
width: 6px;
top: 30px;
left: 100%;
box-shadow: 15px 0 0 var(--white), 30px 0 0 var(--white), 45px 0 0 var(--white), 60px 0 0 var(--white), 75px 0 0 var(--white), 90px 0 0 var(--white), 105px 0 0 var(--white), 120px 0 0 var(--white), 135px 0 0 var(--white), 150px 0 0 var(--white), 165px 0 0 var(--white), 180px 0 0 var(--white), 195px 0 0 var(--white), 210px 0 0 var(--white), 225px 0 0 var(--white), 240px 0 0 var(--white), 255px 0 0 var(--white), 270px 0 0 var(--white), 285px 0 0 var(--white), 300px 0 0 var(--white), 315px 0 0 var(--white), 330px 0 0 var(--white);
}
.back,
.box {
--start: var(--white);
--stop: var(--grey-light);
border-radius: 2px;
background: linear-gradient(var(--start), var(--stop));
position: absolute;
}
.truck {
width: 60px;
height: 41px;
left: 100%;
z-index: 1;
top: 11px;
position: absolute;
transform: translateX(24px);
&:before,
&:after {
--r: -90deg;
content: '';
height: 2px;
width: 20px;
right: 58px;
position: absolute;
display: block;
background: var(--white);
border-radius: 1px;
transform-origin: 100% 50%;
transform: rotate(var(--r));
}
&:before {
top: 4px;
}
&:after {
--r: 90deg;
bottom: 4px;
}
.back {
left: 0;
top: 0;
width: 60px;
height: 41px;
z-index: 1;
}
.front {
overflow: hidden;
position: absolute;
border-radius: 2px 9px 9px 2px;
width: 26px;
height: 41px;
left: 60px;
&:before,
&:after {
content: '';
position: absolute;
display: block;
}
&:before {
height: 13px;
width: 2px;
left: 0;
top: 14px;
background: linear-gradient(var(--grey), var(--grey-dark));
}
&:after {
border-radius: 2px 9px 9px 2px;
background: var(--primary);
width: 24px;
height: 41px;
right: 0;
}
.window {
overflow: hidden;
border-radius: 2px 8px 8px 2px;
background: var(--primary-light);
transform: perspective(4px) rotateY(3deg);
width: 22px;
height: 41px;
position: absolute;
left: 2px;
top: 0;
z-index: 1;
transform-origin: 0 50%;
&:before,
&:after {
content: '';
position: absolute;
right: 0;
}
&:before {
top: 0;
bottom: 0;
width: 14px;
background: var(--dark);
}
&:after {
width: 14px;
top: 7px;
height: 4px;
position: absolute;
background: rgba(255, 255, 255, .14);
transform: skewY(14deg);
box-shadow: 0 7px 0 rgba(255, 255, 255, .14);
}
}
}
.light {
width: 3px;
height: 8px;
left: 83px;
transform-origin: 100% 50%;
position: absolute;
border-radius: 2px;
transform: scaleX(.8);
background: rgba(240, 220, 95, 1);
&:before {
content: '';
height: 4px;
width: 7px;
opacity: 0;
transform: perspective(2px) rotateY(-15deg) scaleX(.94);
position: absolute;
transform-origin: 0 50%;
left: 3px;
top: 50%;
margin-top: -2px;
background: linear-gradient(90deg, rgba(240, 220, 95, 1), rgba(240, 220, 95, .7), rgba(240, 220, 95, 0));
}
&.top {
top: 4px;
}
&.bottom {
bottom: 4px;
}
}
}
.box {
--start: var(--sand-light);
--stop: var(--sand);
width: 21px;
height: 21px;
right: 100%;
top: 21px;
&:before,
&:after {
content: '';
top: 10px;
position: absolute;
left: 0;
right: 0;
}
&:before {
height: 3px;
margin-top: -1px;
background: rgba(0, 0, 0, .1);
}
&:after {
height: 1px;
background: rgba(0, 0, 0, .15);
}
}
&.animate {
.default {
--o: 0;
transition-delay: 0s;
}
.success {
--offset: 0;
--o: 1;
transition-delay: 7s;
svg {
transition-delay: 7.3s;
}
}
.truck {
animation: truck 10s ease forwards;
&:before {
animation: door1 2.4s ease forwards .3s;
}
&:after {
animation: door2 2.4s ease forwards .6s;
}
.light {
&:before,
&:after {
animation: light 10s ease forwards;
}
}
}
.box {
animation: box 10s ease forwards;
}
.lines {
animation: lines 10s ease forwards;
}
}
}
#keyframes truck {
10%,
30% {
transform: translateX(-164px);
}
40% {
transform: translateX(-104px);
}
60% {
transform: translateX(-224px);
}
75%,
100% {
transform: translateX(24px);
}
}
#keyframes lines {
0%,
30% {
opacity: 0;
transform: scaleY(.7) translateX(0);
}
35%,
65% {
opacity: 1;
}
70% {
opacity: 0;
}
100% {
transform: scaleY(.7) translateX(-400px);
}
}
#keyframes light {
0%,
30% {
opacity: 0;
transform: perspective(2px) rotateY(-15deg) scaleX(.88);
}
40%,
100% {
opacity: 1;
transform: perspective(2px) rotateY(-15deg) scaleX(.94);
}
}
#keyframes door1 {
30%,
50% {
transform: rotate(32deg);
}
}
#keyframes door2 {
30%,
50% {
transform: rotate(-32deg);
}
}
#keyframes box {
8%,
10% {
transform: translateX(40px);
opacity: 1;
}
25% {
transform: translateX(112px);
opacity: 1;
}
26% {
transform: translateX(112px);
opacity: 0;
}
27%,
100% {
transform: translateX(0px);
opacity: 0;
}
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: inherit;
&:before,
&:after {
box-sizing: inherit;
}
}
// Center & dribbble
body {
min-height: 100vh;
font-family: Roboto, Arial;
display: flex;
justify-content: center;
align-items: center;
background: #E4ECFA;
.dribbble {
position: fixed;
display: block;
right: 20px;
bottom: 20px;
img {
display: block;
height: 28px;
}
}
}
button(class='order')
span(class='default') Complete Order
span(class='success') Order Placed
svg(viewbox='0 0 12 10')
polyline(points='1.5 6 4.5 9 10.5 1')
div(class='box')
div(class='truck')
div(class='back')
div(class='front')
div(class='window')
div(class='light top')
div(class='light bottom')
div(class='lines')
<!-- dribbble -->
a(class='dribbble' href='https://dribbble.com/shots/7112021-Order-confirm-animation' target='_blank')
img(src='https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg')
Can someone please help me???

Looks like Jade, not HTML. It's very easy to convert, just add arrow brackets and closing tags div(class="whatever") is <div class="whatever"></div>. The indentations matter as they are what is considered "in" a tag
div(class="whatever")
span hello
is
<div class="whatever">
<span>hello</span>
</div>
The code in the CSS block is Sass a CSS preprocessor.

I want to put the effect of the hover only on 1 element however 2 element was applied

Hi I have a button element that slide to the picture and I want the picture to be blurred when the button appeared however the button also blurring upon hovering I want only the image to be have that effect please help me! How can I do that? Excuse my english please. I am also a beginner. Thank you in advance.
.Aljon { /* This is an image */
width: 484px;
height: 612px;
position: absolute;
left: 65%;
bottom: 0;
background-size: contain;
background-repeat: no-repeat;
margin: 0;
padding: 0;
background-image: url(../Resources/Aljon.png);
animation: aljon-load 300ms ease 200ms;
transform: translateY(150%);
animation-fill-mode: forwards;
transition: 1s ease;
z-index: 2;
}
#keyframes aljon-load {
0% {
transform: translateY(150%);
}
100% {
transform: translateX(0);
}
}
#myBtn {
background-color: #ffffff;
border: none;
color: rgb(2, 2, 2);
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: Arial Rounded MT;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
left: 500px;
top: 400px;
position: relative;
transition: 0.3s ease-in-out;
z-index: 3;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.Aljon:hover #myBtn {
left: 200px;
transition: 0.3s ease-in-out;
}
.Aljon:hover {
filter: blur(8px);
}
.container:hover .Aljon {
opacity: 1;
transition: 0.3s ease-in-out;
cursor: pointer;
}
<div class="container">
<div class="Aljon">
<div class="overlay">
<button id="myBtn" class="button">HIRE ME</button>
</div>
</div>
</div>

You have to put blur 0px on other classes:
.Aljon { /* This is an image */
width: 484px;
height: 612px;
position: absolute;
left: 65%;
bottom: 0;
background-size: contain;
background-repeat: no-repeat;
margin: 0;
padding: 0;
background-image: url(../Resources/Aljon.png);
animation: aljon-load 300ms ease 200ms;
transform: translateY(150%);
animation-fill-mode: forwards;
transition: 1s ease;
z-index: 2;
}
#keyframes aljon-load {
0% {
transform: translateY(150%);
}
100% {
transform: translateX(0);
}
}
#myBtn {
background-color: #ffffff;
border: none;
color: rgb(2, 2, 2);
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: Arial Rounded MT;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
left: 500px;
top: 400px;
position: relative;
transition: 0.3s ease-in-out;
z-index: 3;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.Aljon:hover #myBtn {
left: 200px;
transition: 0.3s ease-in-out;
filter: blur(0px);
}
.Aljon:hover {
filter: blur(8px);
}
.container:hover .Aljon {
opacity: 1;
transition: 0.3s ease-in-out;
cursor: pointer;
filter: blur(0px);
}
<div class="container">
<div class="Aljon">
<div class="overlay">
<button id="myBtn" class="button">HIRE ME</button>
</div>
</div>
</div>

Thank you everyone. Here's how I fixed my code I let my button out inside the div of the image and manually add or style them on css.
.Aljon {
width: 484px;
height: 612px;
position: absolute;
left: 65%;
bottom: 0;
background-size: contain;
background-repeat: no-repeat;
margin: 0;
padding: 0;
background-image: url(../Resources/Aljon.png);
animation: aljon-load 300ms ease 200ms;
transform: translateY(150%);
animation-fill-mode: forwards;
transition: 1s ease;
z-index: 4;
}
#keyframes aljon-load {
0% {
transform: translateY(150%);
}
100% {
transform: translateX(0);
}
}
#myBtn {
background-color: #ffffff;
border: none;
color: rgb(2, 2, 2);
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
font-family: Arial Rounded MT;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
left: 1500px;
top: 400px;
position: relative;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 4;
transition: 0.3s ease;
}
.Aljon:hover ~ #myBtn {
left: 1010px;
transition: 0.3s ease;
}
#myBtn:hover {
left: 1010px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.container:hover .Aljon {
filter: blur(2px);
}
<div class="container">
<div class="Aljon">
</div>
<button id="myBtn" class="button">HIRE ME</button>
</div>

Animate from top not working with negative value?

EDIT
Solved it. See post below.
/ END OF EDIT
EDIT
NOT related to the suggested topic above and not solved by changing to vh as measurement of top-value instead as shown in this fiddle (as suggested by the first comments here): http://jsfiddle.net/wm02ovx8/3/. The div still doesn't animate in, but rather pops up in the blink of an eye.
/ END OF EDIT
I'm trying to animate a drawer div from top and into view. The animation works fine as long as it's in view to begin with (the "top" css property value being more than -1), but since I have a negative value that is calc(-100% + 30px) on the top property it just "pops up" instead. What am I missing here?
[Fiddle] (To open the menu, press the index word on the right)
HTML:
<div id="closeIndexLayer"></div>
<div id="alignLinks">
<div id="anchorLinks"></div>
</div>
<div id="indexMenu">Index</div>
CSS:
div#alignLinks {
position: fixed;
display: flex;
align-items: baseline;
justify-content: flex-start;
flex-flow: wrap;
left: 30px;
top: calc(-100% + 30px);
background: rgba(255,0,0,.60);
/* transform: translateX(-50%); */
height: calc(100% - 30px);
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
z-index: 250 !important;
min-width: 425px;
max-width: 425px;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
div#anchorLinks {
display: flex;
/* position: fixed; */
flex-flow: wrap;
height: auto;
/* position: absolute; */
/* background: rgba(0,0,0,.5); */
top: 0px;
right: 0px;
z-index: 250;
}
div#closeIndexLayer {
position: fixed;
display:none;
top: 0;
left: 0;
box-sizing: border-box;
width: 100%;
height: 100%;
background: green;
z-index: 250;
}
a.anchorLink {
width: auto;
background: hsla(210, 11%, 8%, 1);
border-radius: 3px;
text-decoration: none;
font-size: 2rem;
margin-top: 16px;
margin-bottom: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-webkit-transition: all 140ms ease-in-out;
-moz-transition: all 140ms ease-in-out;
-ms-transition: all 140ms ease-in-out;
-o-transition: all 140ms ease-in-out;
transition: all 140ms ease-in-out;
}
#indexMenu {
position: fixed;
display: block;
z-index: 249;
top: 50%;
height: 18px;
right: -18px;
padding: 0px 6px 0px 6px;
transform: translateY(-50%) rotate(270deg);
background: rgba(255,255,255,.15);
border-radius: 5px 5px 0px 0px;
font-family: 'Nunito Sans', sans-serif;
font-size: 10px;
box-shadow: 0px 1px 2px rgba(255,255,255,.12), 0px 2px 3px rgba(255,255,255,.24);
cursor: pointer;
}
Javascript:
function showIndex() {
var elem = document.getElementById("alignLinks");
thestyle = window.getComputedStyle(elem),
thetop = thestyle.getPropertyValue('top');
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos <= 0) {
pos++;
elem.style.top = pos + 'px';
} else {
clearInterval(id);
}
}
}
function hideIndex() {
var elem = document.getElementById("alignLinks");
thestyle = window.getComputedStyle(elem),
thetop = thestyle.getPropertyValue('top');
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos >= 0) {
pos--;
elem.style.top = pos + 'px';
} else {
clearInterval(id);
}
}
}
document.getElementById("indexMenu").addEventListener("click", function(){
var closeIndexLayer = document.getElementById("closeIndexLayer");
closeIndexLayer.style.display = "block";
showIndex();
});
document.getElementById("closeIndexLayer").addEventListener("click", function(){
var closeIndexLayer = document.getElementById("closeIndexLayer");
closeIndexLayer.style.display = "none";
hideIndex();
});
//</editor-fold>

I solved it another way instead, and in a way I'm more familiar with. The way I found that worked for me adds a class to the element and that class have animation properties. Then if you want to animate out, just add the animation properties to the element that is being animated (in this case the id #alignLinks).
[Fiddle]
Javascript:
let drawer = document.getElementById("alignLinks");
document.getElementById('indexMenu').onclick = function() {
if(this.innerHTML === 'Index')
{
this.innerHTML = 'Close';
drawer.classList.add('topAnimDown');
} else {
this.innerHTML = 'Index';
var computedStyle = window.getComputedStyle(drawer),
topProp = computedStyle.getPropertyValue('top');
drawer.style.topProp = topProp;
drawer.classList.remove('topAnimDown');
}
}
HTML
<div id="closeIndexLayer"></div>
<div id="alignLinks">
<div id="anchorLinks"></div>
</div>
<div id="indexMenu">Index</div>
CSS
body {
background: hotpink;
}
div#alignLinks {
position: fixed;
display: flex;
align-items: baseline;
justify-content: flex-start;
flex-flow: wrap;
left: 30px;
top: calc(-100% + 30px);
background: rgba(255,0,0,.60);
/* transform: translateX(-50%); */
height: calc(100% - 30px);
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
z-index: 250 !important;
min-width: 425px;
max-width: 425px;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
-webkit-transition: 3s ease-in-out;
-moz-transition: 3s ease-in-out;
-ms-transition: 3s ease-in-out;
-o-transition: 3s ease-in-out;
transition: 3s ease-in-out;
}
.topAnimDown {
-webkit-transition: 3s ease-in-out;
-moz-transition: 3s ease-in-out;
-ms-transition: 3s ease-in-out;
-o-transition: 3s ease-in-out;
transition: 3s ease-in-out;
top: 0 !important;
}
div#anchorLinks {
display: flex;
/* position: fixed; */
flex-flow: wrap;
height: auto;
/* position: absolute; */
/* background: rgba(0,0,0,.5); */
top: 0px;
right: 0px;
z-index: 250;
}
div#closeIndexLayer {
position: fixed;
display:none;
top: 0;
left: 0;
box-sizing: border-box;
width: 100%;
height: 100%;
background: green;
z-index: 250;
}
a.anchorLink {
width: auto;
background: hsla(210, 11%, 8%, 1);
border-radius: 3px;
text-decoration: none;
font-size: 2rem;
margin-top: 16px;
margin-bottom: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-webkit-transition: all 140ms ease-in-out;
-moz-transition: all 140ms ease-in-out;
-ms-transition: all 140ms ease-in-out;
-o-transition: all 140ms ease-in-out;
transition: all 140ms ease-in-out;
}
#indexMenu {
position: fixed;
display: block;
z-index: 249;
top: 50%;
height: 18px;
right: -18px;
padding: 0px 6px 0px 6px;
transform: translateY(-50%) rotate(270deg);
background: rgba(255,255,255,.15);
border-radius: 5px 5px 0px 0px;
font-family: 'Nunito Sans', sans-serif;
font-size: 24px;
box-shadow: 0px 1px 2px rgba(255,255,255,.12), 0px 2px 3px rgba(255,255,255,.24);
cursor: pointer;
}

Apply Css style into webkit-slider-thumb

I would like it to be like this
HTML:
&ltdiv id="container">
&ltdiv id="volume">
&lti class="fa fa-volume-up" aria-hidden="true" id="vol-h"></i>
&lti class="fa fa-volume-off" aria-hidden="true" id="vol-m"></i>
&ltdiv id="vol">&ltdiv id="go">&lt/div>&lt/div>
&lt/div>
&lt/div>
CSS:
#container {
top: 810px;
flex-flow: row wrap;
align-items: center;
padding: 1px 3px;
display: flex;
position: absolute;
border: none;
width: 100%;
height: auto;
}
#container::before{
z-index: -1;
content: ' ';
width: 100%;
height: 100%;
position: fixed;
bottom: -850px;
background: url(../images/NY.png);
background-size:cover;
-webkit-filter: blur(8px);
filter: blur(25px);
}
#container #volume {
width: 90px;
position: relative;
top: 50px;
left: 1600px;
cursor: pointer;
}
#container #volume .fa-volume-up {
font-size: 1em;
color: #019875;
-webkit-filter: drop-shadow(0px 2px 2px #000);
filter: drop-shadow(0px 2px 2px #000);
position: relative;
}
#container #volume .fa-volume-off {
font-size: 1em;
color: #019875;
-webkit-filter: drop-shadow(0px 2px 2px #000);
filter: drop-shadow(0px 2px 2px #000);
position: relative;
}
#container #volume .fa-volume-up:hover {
color: #4C4C4C;
}
#container #volume #vol {
opacity: 0;
-webkit-animation: fadeOutUp ease-in 1;
-moz-animation: fadeOutUp ease-in 1;
animation: fadeOutUp ease-in 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 0.4s;
-moz-animation-duration: 0.4s;
animation-duration: 0.4s;
width: 23px;
height: 130px;
background: #141414;
position: absolute;
top: -160px;
left: -2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
border-radius: 2px;
padding: 10px 10px;
-webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.5);
}
#container #volume #vol::before {
content: "";
width: 10px;
height: 10px;
position: absolute;
bottom: -5px;
left: 6px;
background-color: #141414;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#container #volume #vol.active {
-webkit-animation: fadeInDown ease-in 1;
-moz-animation: fadeInDown ease-in 1;
animation: fadeInDown ease-in 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 0.4s;
-moz-animation-duration: 0.4s;
animation-duration: 0.4s;
}
#container #volume #vol #go {
width: 3px;
height: 100%;
background: #019875;
/* Old browsers */
background: -moz-linear-gradient(45deg, #019875 0%, #003023 50%, #019875 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #019875 0%, #003023 50%, #019875 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #019875 0%, #003023 50%, #019875 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
position: relative;
}
#container #volume #vol #go::before {
content: "";
width: 100%;
height: 22px;
background-color: #4C4C4C;
position: absolute;
top: 0;
left: 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
#container #volume #vol #go::after {
content: "";
width: 9px;
height: 9px;
background-color: #019875;
position: absolute;
top: 75px;
left: -3px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.5);
}
JavaScipt:
$( "#volume" ).click(function() {
$( "#vol" ).toggleClass( "active" );
});
Here is a link to the included icon Bootstrap.
I tried applying the styling to the webkit but didn't work. Any suggestions on how to apply that style to it ?

Develop Reference

JavaScript is the programming language of the Web.

Unlimited timing interval in jQuery - javascript

Set success callback function in effect() $(document).ready(function () { var cmp = function () { $('.rect').effect("bounce", { times: 3 }, 300, cmp); } cmp(); }) FIDDLE

Related

How to make the envelop html responsive

i want to switch some code from code pen to visual studio code

I want to put the effect of the hover only on 1 element however 2 element was applied

Animate from top not working with negative value?

Apply Css style into webkit-slider-thumb

Categories

Resources