How to animate a dashed arrow? - javascript

As the title describes, I am trying to animate a dashed arrow. I want it to look as close as possible to this on this site.
I was able to make an arrow although I'm not sure that this was the correct way of making such arrow. I'm assuming I'd have to have drawn it with SVG...
Also the animation looks weird and I don't know how to make it smoother...
I'd appreciate some help guys :)
This is the JsFiddle i made
Here is the code:
body {
margin: 0;
font-size: 16px;
line-height: 1.528571429;
padding: 0;
height: 100%;
}
body #contact {
height: calc(100vh - 40px);
background-color: #ffffff;
}
body #contact .to-top-btn-wrapper {
position: absolute;
z-index: 999;
left: 7%;
bottom: 15%;
}
body #contact .to-top-btn-wrapper .btn-text-wrapper {
margin: -35px auto;
}
body #contact .to-top-btn-wrapper .btn-text-wrapper .btn-text {
font-size: 14px;
letter-spacing: 0.25em;
text-align: center;
color: #676565;
text-transform: uppercase;
}
body #contact .to-top-btn-wrapper .to-top-btn {
position: absolute;
top: 0;
left: 35px;
bottom: 25px;
cursor: pointer;
}
body #contact .to-top-btn-wrapper .to-top-btn .line {
border-right: 0.1rem dashed #676565;
display: inline-block;
animation: show 1000ms linear forwards infinite;
}
body #contact .to-top-btn-wrapper .to-top-btn .arrow {
position: absolute;
top: -0.3rem;
bottom: 0;
height: 1rem;
border-right: 0.1rem solid #676565;
display: inline-block;
}
body #contact .to-top-btn-wrapper .to-top-btn .right {
left: 0.3rem;
transform: rotate(-45deg);
}
body #contact .to-top-btn-wrapper .to-top-btn .left {
right: 0.3rem;
transform: rotate(45deg);
}
#keyframes show {
0% {
height: 5rem;
}
100% {
height: 0rem;
}
}
<section id="contact" class="container-fluid">
<div class="to-top-btn-wrapper">
<div class="btn-text-wrapper">
<span class="btn-text">Scroll to top</span>
</div>
<div class="to-top-btn">
<span class="arrow left"></span>
<span class="line"></span>
<span class="arrow right"></span>
</div>
</div>
</section>

A clip-path animation with some background can do it
.arrow {
width: 20px;
margin:10px;
height: 150px;
display:inline-block;
position: relative;
padding-bottom:4px;
color: #fff;
background: linear-gradient(currentColor 50%, transparent 50%) top/2px 15px content-box repeat-y;
clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
animation:hide infinite 2s linear;
}
.arrow:after {
content: "";
position: absolute;
border-left: 2px solid;
border-bottom: 2px solid;
width: 80%;
padding-top: 80%;
bottom: 4px;
left: 1px;
transform: rotate(-45deg);
}
#keyframes hide {
50% {
clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);
}
50.1% {
clip-path:polygon(0 0 ,100% 0 ,100% 0 ,0 0);
}
}
body {
background: red;
}
<div class="arrow"></div>
<div class="arrow" style="transform:scaleY(-1)"></div>
A similar idea using mask
.arrow {
width: 20px;
margin:10px;
height: 150px;
padding-bottom:4px;
display:inline-block;
position: relative;
color: #fff;
background: linear-gradient(currentColor 50%, transparent 50%) top/2px 15px content-box repeat-y;
-webkit-mask:linear-gradient(#fff,#fff);
-webkit-mask-size:100% 0%;
-webkit-mask-repeat:no-repeat;
mask:linear-gradient(#fff,#fff);
mask-size:100% 0%;
mask-repeat:no-repeat;
animation:hide infinite 2s linear;
}
.arrow:after {
content: "";
position: absolute;
border-left: 2px solid;
border-bottom: 2px solid;
width: 80%;
padding-top: 80%;
bottom: 4px;
left: 1px;
transform: rotate(-45deg);
}
#keyframes hide {
50% {
-webkit-mask-size:100% 100%;
-webkit-mask-position:top;
mask-size:100% 100%;
mask-position:top;
}
50.1% {
-webkit-mask-size:100% 100%;
-webkit-mask-position:bottom;
mask-size:100% 100%;
mask-position:bottom;
}
100% {
-webkit-mask-position:bottom;
mask-position:bottom;
}
}
body {
background: red;
}
<div class="arrow"></div>
<div class="arrow" style="transform:scaleY(-1)"></div>
Here is a background only solution with no clip-path:
.arrow {
width: 20px;
margin:10px;
height: 150px;
display:inline-block;
color: #fff;
background:
linear-gradient(to bottom left,
transparent calc(50% - 1px),
currentColor 0 calc(50% + 1px),
transparent 0)
bottom left/10px 10px,
linear-gradient(to bottom right,
transparent calc(50% - 1px),
currentColor 0 calc(50% + 1px),
transparent 0)
bottom right/10px 10px,
repeating-linear-gradient(currentColor 0 7px, transparent 7px 15px)
bottom/2px 100%;
background-repeat:no-repeat;
background-clip:content-box;
box-sizing:border-box;
animation:hide infinite 2s linear;
}
#keyframes hide {
50% {
padding:150px 0 0;
}
50.1% {
padding:0 0 150px;
}
}
body {
background: red;
}
<div class="arrow"></div>
<div class="arrow" style="transform:scaleY(-1)"></div>
Another version with less gradient:
.arrow {
width: 20px;
margin:10px;
height: 150px;
display:inline-flex;
}
.arrow:before,
.arrow:after{
content:"";
width:50%;
background:
linear-gradient(to bottom left,
transparent calc(50% - 1px),
white 0 calc(50% + 1px),
transparent 0)
bottom/100% 10px,
repeating-linear-gradient(white 0 7px, transparent 0 15px)
right/1px 100%;
background-repeat:no-repeat;
background-clip:content-box;
box-sizing:border-box;
animation:hide infinite 2s linear;
}
.arrow:after {
transform:scaleX(-1);
}
#keyframes hide {
50% {
padding:150px 0 0;
}
50.1% {
padding:0 0 150px;
}
}
body {
background: red;
}
<div class="arrow"></div>
<div class="arrow" style="transform:scaleY(-1)"></div>
And with CSS variables to easily control everything:
.arrow {
--h:150px; /* height */
--w:20px; /* width */
--b:7px; /* width of the dash*/
--g:8px; /* gap between dashes*/
width: var(--w);
margin:10px;
height: var(--h);
display:inline-flex;
}
.arrow:before,
.arrow:after{
content:"";
width:50%;
background:
linear-gradient(to bottom left,
transparent calc(50% - 1px),
white 0 calc(50% + 1px),
transparent 0)
bottom/100% calc(var(--w)/2),
repeating-linear-gradient(white 0 var(--b), transparent 0 calc(var(--b) + var(--g)))
right/1px 100%;
background-repeat:no-repeat;
background-clip:content-box;
box-sizing:border-box;
animation:hide infinite 2s linear;
}
.arrow:after {
transform:scaleX(-1);
}
#keyframes hide {
50% {
padding:var(--h) 0 0;
}
50.1% {
padding:0 0 var(--h);
}
}
body {
background: red;
}
<div class="arrow"></div>
<div class="arrow" style="transform:scaleY(-1);--h:100px;--g:3px;"></div>
<div class="arrow" style="--h:120px;--b:3px;--w:30px"></div>
<div class="arrow" style="transform:scaleY(-1);--h:150px;--b:5px;--g:10px;--w:40px"></div>

toke a different approach to the arrow animation.
you can use SVG instead of text.
POC:
body {
margin: 0;
}
.arrow-container {
padding: 0 50px;
animation: scrolling 2s infinite linear;
overflow: hidden;
height: 150px;
}
.arrow {
animation: scrolling-a 2s infinite linear;
}
.arrow-point {
font-size: 50px;
display: block;
margin: 0 0 -50px -10px;
}
#keyframes scrolling {
0% {
margin-top: 150px;
height: 0;
}
50% {
margin-top: 0;
height: 150px;
}
100% {
margin-top: 0;
height: 0;
}
}
#keyframes scrolling-a {
0% {
margin-top: -150px;
}
50%,
100% {
margin-top: 0;
}
}
<div class="arrow-container">
<div class="arrow">
<span class="arrow-point">^</span><br> |
<br> |
<br> |
<br> |
<br> |
<br> |
<br> |
</div>
</div>

Related

Section snapping whilst scrolling

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

How 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>

How to control css animation dependent on html list items

Below is some css which plays a cup filling animation. What I am trying to achieve is to have the water level change in the cup based on the number of list items in an unordered html list so for example the more list items the more filled the cup is, but I am unsure how to go about this.
.cup {
position: absolute;
top: 50%;
right: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: 180px;
border: 6px solid #262626;
border-top: 2px solid transparent;
border-radius: 15px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: url(https://i.imgur.com/kbpChd4.png);
background-repeat: repeat-x;
animation: animate 10s linear infinite;
box-shadow: 0 0 0 6px #fff, 0 20px 35px rgba(0,0,0,1);
}
.cup:before {
content: '';
position: absolute;
width: 50px;
height: 80px;
border: 6px solid #fff;
right: -57px;
top: 30px;
border-top-right-radius: 35px;
border-bottom-right-radius: 35px;
}
#keyframes animate {
0% {
background-position: 0 100px;
}
10% {
background-position: 0 100px;
}
40% {
background-position: 1000px -10px;
}
80% {
background-position: 1000px -20px;
}
100% {
background-position: 2500px 100px;
}
}
<div class="cup">
</div>
<ul id="list">
<li>Item1</li>
</ul>
Change the position of animated fill level in your css to certain classes and then assign or change those classes with JQUERY.
I have created a fiddle for you that shows 2 cups.
.cup {
position: absolute;
top: 50%;
right: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: 180px;
border: 6px solid #262626;
border-top: 2px solid transparent;
border-radius: 15px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: url(https://i.imgur.com/kbpChd4.png);
background-repeat: repeat-x;
animation: animate 10s linear infinite;
box-shadow: 0 0 0 6px #fff, 0 20px 35px rgba(0,0,0,1);
}
.cup.two {
top: 50%;
right: 10%;
animation: half 10s linear infinite;
}
.cup:before {
content: '';
position: absolute;
width: 50px;
height: 80px;
border: 6px solid #fff;
right: -57px;
top: 30px;
border-top-right-radius: 35px;
border-bottom-right-radius: 35px;
}
#keyframes animate {
0% {
background-position: 0 100px;
}
10% {
background-position: 0 100px;
}
40% {
background-position: 1000px -10px;
}
80% {
background-position: 1000px -20px;
}
100% {
background-position: 2500px 100px;
}
}
#keyframes half {
0% {
background-position: 0 100px;
}
10% {
background-position: 0 100px;
}
40% {
background-position: 1000px 70px;
}
80% {
background-position: 1000px 80px;
}
100% {
background-position: 2500px 90px;
}
}
HTML IS HERE:
<ul>
<li>Item1</li>
</ul>
<div class="cup"></div>
<div class="cup two"></div>

How to define an html element to have a polygon shape, and how to change the shape with animation?

I am trying to create this button in html with a little animation as below.
How can I make the below polygon shape in css, and how to move it to a regular rectangle in animation on hover?
This is what I am trying to make it look like:
And here is how it should look like on hover:
Thanks for any help
A bit messy, but it is what I get so far:
body {
background-color: #FFB504;
}
.cta {
color: white;
border: none;
width: 240px;
height: 80px;
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 22px;
font-family: sans-serif;
cursor: pointer;
position:relative;
background-color: transparent;
outline: none;
}
.cta-content {
padding-right: 20px;
transition: all .3s ease;
z-index:1;
}
.cta:before {
clip-path: polygon(10px 10px, 230px 10px, 190px 70px, 10px 70px);
transition: all .3s ease;
will-change: clip-path;
background-color: #0081B1;
}
.cta-border, .cta-border:before, .cta-border:after, .cta:before {
content: "";
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
box-sizing: border-box;
transition: all .3s ease;
}
.cta-border{
overflow: hidden;
}
.cta-border:before {
clip-path: polygon(0px 0px, 220px 0px, 170px 80px, 0px 80px);
border: 2px solid white;
}
.cta-border:after {
transform-origin: center center;
transform: translate(-28px, -69px) rotate(32deg);
border-right: 2px solid white;
height: 94.34px;
}
.cta:hover .cta-content {
padding-right: 0;
}
.cta:hover:before, .cta:hover .cta-border:before {
clip-path: polygon( 0px 0px, 240px 0px, 240px 80px, 0px 80px);
}
.cta:hover .cta-border:after {
transform: translate(0,0) rotate(0);
}
<button class="cta">
<span class="cta-content">HIRE ME</span>
<span class="cta-border"></span>
</button>

creating scroll animation with css

I am trying to create a header menu when I scroll down it to get involved with animation into a circle and when it scrolled up it will be come back again . I checked the window is top if not then animate with javascript . But my code is not working .
$header = $('.header__fake');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 20) {
$header.addClass('animated').removeClass('fix');
} else {
$header.removeClass('animated').addClass('fix');
}
});
body {
background: #02021a url("http://i.imgur.com/705GHlC.jpg") no-repeat 0 0;
-webkit-background-size: 100% auto;
background-size: 100% auto;
color: #fff;
font-family: Helvetica Neue, Helvetica, Open sans, Arial, sans-serif;
font-weight:lighter;
letter-spacing:1px;
}
.content {
width: 320px;
position: relative;
margin: 0 auto;
}
.content h2 {
margin: 35px 0 0;
}
.content h1 {
text-align: center;
margin: 1000px 0 200px;
}
.content h1 span {
display: block;
width: 100%;
margin: 5px 0 0;
opacity: .5;
}
.content .header__fake {
position: fixed;
top: 15px;
left: 50%;
margin-left: -160px;
width: 320px;
}
.content .header__fake i {
display: block;
}
.content .header__fake .btm__border {
height: 1px;
background: #fff;
position: absolute;
bottom: 6px;
left: 0;
right: 0;
-webkit-transition: left 0.5s;
transition: left 0.5s;
}
.content .header__fake .icn__wrap {
cursor: pointer;
float: right;
width: 58px;
position: relative;
height: 58px;
margin-right: -20px;
}
.content .header__fake .icn__wrap .icn__hamburger {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-6px);
-ms-transform: translateX(-50%) translateY(-6px);
transform: translateX(-50%) translateY(-6px);
display: block;
width: 18px;
height: 1px;
z-index: 999;
background: #fff;
}
.content .header__fake .icn__wrap .icn__hamburger:after,
.content .header__fake .icn__wrap .icn__hamburger:before {
content: "";
float: left;
display: block;
width: 100%;
height: 1px;
background: #fff;
margin: 5px 0 0;
}
.content .header__fake .icn__wrap .icn__hamburger:before {
margin: 6px 0 0;
}
.content .header__fake .icn__wrap svg {
z-index: 10;
}
.content .header__fake .icn__wrap svg circle {
fill: none;
stroke: #fff;
stroke-width: .5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 39 39;
stroke-dashoffset: -39;
-webkit-transition: stroke-dashoffset 0.5s;
transition: stroke-dashoffset 0.5s;
}
.content .header__fake.animated .btm__border {
left: 100%;
right: 4px;
}
.content .header__fake.animated svg circle {
stroke-dashoffset: 0;
-webkit-transition: stroke-dashoffset 0.5s;
transition: stroke-dashoffset 0.5s;
}
.content .header__fake.fix .btm__border {
-webkit-animation: fix 0.2s linear;
animation: fix 0.2s linear;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
right: 5px;
}
#-webkit-keyframes fix {
from {
right: 5px;
}
to {
right: 0px;
}
}
#keyframes fix {
from {
right: 5px;
}
to {
right: 0px;
}
}
<div class="content">
<h2>Scroll to see the magic.</h2>
<div class="header__fake">
<div class="icn__wrap">
<i class="icn__hamburger"></i>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="58px" height="58px" viewBox="0 0 16 16" preserveAspectRatio="none">
<circle cx="8" cy="8" r="6.215" transform="rotate(90 8 8)"></circle>
</svg>
</div>
<i class="btm__border"></i>
</div>
<h1>Hmm<span>Now scroll back up.</span></h1>
</div>
I pasted above code in JSfiddle. It works perfectly. See it here
The problem could be with your jQuery lib initialization.

Categories

Resources