Related
const menu = document.querySelector('.pageLinksButton')
const links = document.querySelector('.pageLinks')
menu.addEventListener('click', () => {
menu.classList.toggle("active");
links.classList.toggle("linksActive");
})
body {
background-color: #323232;
position: relative;
}
#keyframes slide {
0% {
opacity: 0.0;
transform: translateY(50px)
}
20% {
opacity: 0.2;
transform: translateY(40px)
}
40% {
opacity: 0.4;
transform: translateY(30px)
}
60% {
opacity: 0.6;
transform: translateY(20px)
}
80% {
opacity: 0.8;
transform: translateY(10px)
}
100% {
opacity: 1.0;
transform: translateY(00px)
}
}
.pageLinks {
display: none;
position: fixed;
top: 5%;
right: 50%;
transition: 1s ease;
}
.pageLinks.linksActive {
display: block;
}
.pageLinks ul {
writing-mode: vertical-rl;
transform: rotate(180deg);
margin: 0;
list-style: none;
}
.pageLinks ul li {
float: left;
margin: 20px 0px;
animation: slide 0.3s linear;
}
.pageLinks ul li a {
color: #DBDBDB;
font-family: 'poppins', sans-serif;
font-size: 16px;
text-decoration: none;
margin: 0;
}
.pageLinksButton {
cursor: pointer;
transition: transform 800ms;
position: fixed;
top: 0%;
right: 49%;
}
.line {
fill: none;
transition: stroke-dasharray 800ms, stroke-dashoffset 800ms;
stroke: #fff;
stroke-width: 3;
stroke-linecap: round;
}
.pageLinksButton.active {
transform: rotate(-45deg);
}
.line:nth-child(1) {
stroke-dasharray: 25 120;
}
.line:nth-child(3) {
stroke-dasharray: 25 120;
}
.pageLinksButton.active .line:nth-child(1) {
stroke-dashoffset: -90px;
}
.pageLinksButton.active .line:nth-child(3) {
stroke-dashoffset: -90px;
}
<svg class="pageLinksButton hamRotate" viewBox="0 0 100 100" width="50">
<path class="line" d="m 70,33 h -40 c 0,0 -8.5,-0.149796 -8.5,8.5 0,8.649796 8.5,8.5 8.5,8.5 h 20 v -20" />
<path class="line" d="m 70,50 h -40" />
<path class="line" d="m 30,67 h 40 c 0,0 8.5,0.149796 8.5,-8.5 0,-8.649796 -8.5,-8.5 -8.5,-8.5 h -20 v 20" />
</svg>
<nav class="pageLinks">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
Animation works when links are opened, but not when I close them.
I tried to animate other classes, but it was worse, that's the most I could do
Well, first of your animation is working only in one direction. Secondly, you're using "display: none" property. In your case the moment you "click" to hide menu your elements acquire "display: none" property which make them vanish instantly.
In my example I've just created another animation called "slide-reversed" and changed display: none; for opacity property. However, this isn't a solution, because underneath the elements are still present and "clickable". There isn't css solution to animate properties like display or visibility, so I would recommend either play with width and overflow to achieve what you want, or delay property change via JS.
Example without display:none;
const menu = document.querySelector(".pageLinksButton");
const links = document.querySelector(".pageLinks");
menu.addEventListener("click", () => {
menu.classList.toggle("active");
links.classList.toggle("linksActive");
});
body {
background-color: #323232;
position: relative;
}
#keyframes slide {
0% {
opacity: 0;
transform: translateY(50px);
}
20% {
opacity: 0.2;
transform: translateY(40px);
}
40% {
opacity: 0.4;
transform: translateY(30px);
}
60% {
opacity: 0.6;
transform: translateY(20px);
}
80% {
opacity: 0.8;
transform: translateY(10px);
}
100% {
opacity: 1;
transform: translateY(00px);
}
}
#keyframes slide-reverse {
100% {
opacity: 0;
transform: translateY(50px);
}
80% {
opacity: 0.2;
transform: translateY(40px);
}
60% {
opacity: 0.4;
transform: translateY(30px);
}
40% {
opacity: 0.6;
transform: translateY(20px);
}
20% {
opacity: 0.8;
transform: translateY(10px);
}
0% {
opacity: 1;
transform: translateY(00px);
}
}
.pageLinks {
/* display: none; */
opacity: 0;
position: fixed;
top: 15%;
right: 50%;
transition: 0s ease;
transition-delay: 0.3s;
}
.pageLinks.linksActive {
transition: 0.3s ease;
transition-delay: 0s;
opacity: 1;
}
.pageLinks ul {
writing-mode: vertical-rl;
transform: rotate(180deg);
margin: 0;
list-style: none;
}
.pageLinks ul li {
float: left;
margin: 20px 0px;
animation: slide-reverse 0.3s linear;
}
.pageLinks.linksActive ul li {
float: left;
margin: 20px 0px;
animation: slide 0.3s linear;
}
.pageLinks ul li a {
color: #dbdbdb;
font-family: "poppins", sans-serif;
font-size: 16px;
text-decoration: none;
margin: 0;
}
.pageLinksButton {
cursor: pointer;
transition: transform 800ms;
position: fixed;
top: 0%;
right: 49%;
}
.line {
fill: none;
transition: stroke-dasharray 800ms, stroke-dashoffset 800ms;
stroke: #fff;
stroke-width: 3;
stroke-linecap: round;
}
.pageLinksButton.active {
transform: rotate(-45deg);
}
.line:nth-child(1) {
stroke-dasharray: 25 120;
}
.line:nth-child(3) {
stroke-dasharray: 25 120;
}
.pageLinksButton.active .line:nth-child(1) {
stroke-dashoffset: -90px;
}
.pageLinksButton.active .line:nth-child(3) {
stroke-dashoffset: -90px;
}
<svg class="pageLinksButton hamRotate" viewBox="0 0 100 100" width="50">
<path
class="line"
d="m 70,33 h -40 c 0,0 -8.5,-0.149796 -8.5,8.5 0,8.649796 8.5,8.5 8.5,8.5 h 20 v -20"
/>
<path class="line" d="m 70,50 h -40" />
<path
class="line"
d="m 30,67 h 40 c 0,0 8.5,0.149796 8.5,-8.5 0,-8.649796 -8.5,-8.5 -8.5,-8.5 h -20 v 20"
/>
</svg>
<nav class="pageLinks">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
what i want to do that when i click a button it opens specific modal like when i click button1 it opens modal1 and so on , how can i achieve this :
HTML :
<div id="modal-container">
<div class="modal-background">
<div class="modal-inners">
<h2>I'm a Modal 11111</h2>
<p>I am text</p>
<svg class="modal-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
<rect x="0" y="0" fill="none" width="226" height="162" rx="3" ry="3"></rect>
</svg>
</div>
</div>
</div>
<div id="modal-container">
<div class="modal-background">
<div class="modal-inners">
<h2>I'm a Modal 2222</h2>
<p>i am text</p>
<svg class="modal-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
<rect x="0" y="0" fill="none" width="226" height="162" rx="3" ry="3"></rect>
</svg>
</div>
</div>
</div>
<div id="modal-effect" class="button">One</div>
<div id="modal-effect" class="button">Two</div>
css :
#modal-container {
position: fixed;
display: table;
height: 100%;
width: 100%;
top: 0;
left: 0;
transform: scale(0);
z-index: 1;
}
#modal-container.modal-effect {
transform: scaleY(0.01) scaleX(0);
animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.modal-effect .modal-background .modal-inners {
transform: scale(0);
animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.modal-effect.out {
transform: scale(1);
animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.modal-effect.out .modal-background .modal-inners {
animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container .modal-background {
display: table-cell;
background: rgba(0, 0, 0, 0.8);
text-align: center;
vertical-align: middle;
}
#modal-container .modal-background .modal-inners {
background: white;
padding: 50px;
display: inline-block;
border-radius: 3px;
font-weight: 300;
position: relative;
}
#modal-container .modal-background .modal-inners .modal-svg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border-radius: 3px;
}
.buttons {
max-width: 800px;
margin: 0 auto;
padding: 0;
text-align: center;
}
.button {
display: inline-block;
text-align: center;
padding: 10px 15px;
margin: 10px;
background: red;
font-size: 18px;
background-color: #efefef;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.button:hover {
color: white;
background: #009bd5;
}
#keyframes unfoldIn {
0% {
transform: scaleY(0.005) scaleX(0);
}
50% {
transform: scaleY(0.005) scaleX(1);
}
100% {
transform: scaleY(1) scaleX(1);
}
}
#keyframes unfoldOut {
0% {
transform: scaleY(1) scaleX(1);
}
50% {
transform: scaleY(0.005) scaleX(1);
}
100% {
transform: scaleY(0.005) scaleX(0);
}
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#keyframes zoomOut {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
Jquery:
$('.button').click(function(){
var buttonId = $(this).attr('id');
$('#modal-container').removeAttr('class').addClass(buttonId);
$('body').addClass('modal-active');
})
$('#modal-container').click(function(){
$(this).addClass('out');
$('body').removeClass('modal-active');
});
EDIT : Here is the full working modal i want to specify which button and modal is clicked to make it open .
what i want to do i want to add something like modal-numbers attribute when i click on a button it opens specific modal popup.
In your CSS, use class instead of ids unless absolutely necessary. Ids are for identifying individual objects. If you want a group of objects to have a similar behavior then you use CSS classes.
$('.button').click(function(){
var buttonId = $(this).attr('id');
$('#container-'+buttonId).removeClass('out').addClass('modal-effect');
$('body').addClass('modal-active');
})
$('.modal-container').click(function(){
$(this).addClass('out');
$('body').removeClass('modal-active');
});
.modal-container {
position: fixed;
display: table;
height: 100%;
width: 100%;
top: 0;
left: 0;
transform: scale(0);
z-index: 1;
}
.modal-effect {
transform: scaleY(0.01) scaleX(0);
animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.modal-effect .modal-background .modal-inners {
transform: scale(0);
animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.modal-effect.out {
transform: scale(1);
animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.modal-effect.out .modal-background .modal-inners {
animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.modal-effect .modal-background {
display: table-cell;
background: rgba(0, 0, 0, 0.8);
text-align: center;
vertical-align: middle;
}
.modal-effect .modal-background .modal-inners {
background: white;
padding: 50px;
display: inline-block;
border-radius: 3px;
font-weight: 300;
position: relative;
}
.modal-effect .modal-background .modal-inners .modal-svg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border-radius: 3px;
}
.buttons {
max-width: 800px;
margin: 0 auto;
padding: 0;
text-align: center;
}
.button {
display: inline-block;
text-align: center;
padding: 10px 15px;
margin: 10px;
background: red;
font-size: 18px;
background-color: #efefef;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.button:hover {
color: white;
background: #009bd5;
}
#keyframes unfoldIn {
0% {
transform: scaleY(0.005) scaleX(0);
}
50% {
transform: scaleY(0.005) scaleX(1);
}
100% {
transform: scaleY(1) scaleX(1);
}
}
#keyframes unfoldOut {
0% {
transform: scaleY(1) scaleX(1);
}
50% {
transform: scaleY(0.005) scaleX(1);
}
100% {
transform: scaleY(0.005) scaleX(0);
}
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#keyframes zoomOut {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="container-modal-one" class="modal-container">
<div class="modal-background">
<div class="modal-inners">
<h2>I'm a Modal 11111</h2>
<p>I am text</p>
<svg class="modal-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
<rect x="0" y="0" fill="none" width="226" height="162" rx="3" ry="3"></rect>
</svg>
</div>
</div>
</div>
<div id="container-modal-two" class="modal-container">
<div class="modal-background">
<div class="modal-inners">
<h2>I'm a Modal 2222</h2>
<p>i am text</p>
<svg class="modal-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
<rect x="0" y="0" fill="none" width="226" height="162" rx="3" ry="3"></rect>
</svg>
</div>
</div>
</div>
<div id="modal-one" class="button">One</div>
<div id="modal-two" class="button">Two</div>
So I've been designing a website for my new market garden company. The eCommerce backend is Lemonstand. I simply want to have the arrow button at the bottom of the main image scroll to the anchor (rather than jump). You can view the website here.
I found this code on this website in response to another question:
function scrollToAnchor(aid){
var aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
$("#scroll").click(function() {
scrollToAnchor('start');
});
The HTML is:
<div id="home-image-scrollbtn" class="mt-auto"><a id="scroll" href="#start">
<i class="fas fa-arrow-circle-down"></i></a></div>
<section class="container"><a name="start"></a>
I'm loading jquery 3.3.1 from Google's CDN.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I've also tried numerous js scripts. All of them work in theory but don't seem to work on my site. What am I missing?
A small Demo , might help.
// Back to top
var amountScrolled = 300;
$(window).scroll(function() {
if ( $(window).scrollTop() > amountScrolled ) {
$(".bck-top").addClass("show");
} else {
$(".bck-top").removeClass("show");
}
});
$(".bck-top").click(function() {
$("html, body").animate({
scrollTop: 0
}, 800);
return false;
});
// Smooth Scroll
$(".nxt-pg").click(function(event){
$("html, body").animate({
scrollTop: $( this ).offset().top
}, 800);
event.preventDefault();
});
.for-height {
background: crimson;
height: 150vh;
}
.bck-top {
position: fixed;
right: -75px;
bottom: 35px;
background: #0e4d67;
width: 50px;
height: 50px;
border-radius: 50%;
opacity: 0;
-webkit-transform: rotate(315deg);
-ms-transform: rotate(315deg);
transform: rotate(315deg);
transition: all .6s cubic-bezier(0.56, 0.07, 0.35, 1.99);
cursor: pointer;
z-index: 555;
}
.bck-top.show {
right: 35px;
border-radius: 0 50% 50% 50%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background: #797bed;
opacity: 1;
transition-property: right, transform, border-radius;
transition-duration: .6s, .6s, .5s;
transition-timing-function: cubic-bezier(0.56, 0.07, 0.35, 1.99);
transition-delay: 0s, 0s, .5s;
box-shadow: 2px 2px 6px 0px #303030;
}
.bck-top.show:hover {
border-radius: 50%;
transition: all .4s cubic-bezier(0, 2.84, 0, 1.19);
}
.nxt-pg {
position: absolute;
right: 0;
bottom: 20px;
left: 0;
width: 40px;
height: 29px;
margin: 0 auto;
cursor: pointer;
}
.nxt-pg span,.nxt-pg span:before, .nxt-pg span:after {
display: block;
width: 40px;
height: 4px;
border-radius: 35px;
background: #fff;
animation: fadeBottom .8s cubic-bezier(0.56, 0.07, 0.35, 1.99) alternate infinite;
}
.nxt-pg:active span,.nxt-pg:active span:before, .nxt-pg:active span:after {
animation-play-state: paused;
}
.nxt-pg span {
position: relative;
margin: 0 auto;
}
.nxt-pg span:before, .nxt-pg span:after {
content: '';
position: absolute;
right: 0;
left: 0;
margin: 0 auto;
}
.nxt-pg span:before {
top: 12px;
width: 30px;
animation-delay: .15s;
}
.nxt-pg span:after {
top: 24px;
width: 20px;
animation-delay: .2s;
}
#-webkit-keyframes fadeBottom {
0% {
opacity: 0;
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
50% {
opacity: .5;
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
background: #009688;
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
#keyframes fadeBottom {
0% {
opacity: 0;
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
50% {
opacity: .5;
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
background: #787bed;
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="for-height">
<a class="nxt-pg">
<span class="br-top"></span>
Click Me
</a>
</div>
<button type="button" class="bck-top">up</button>
I'm working with OffCanvasMenuEffects and i'm using wave menu effect. You can see this menu in following:
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
html,
body,
.container,
.content-wrap {
overflow: hidden;
width: 100%;
height: 100%;
}
.container {
background: #373a47;
}
.menu-wrap a {
color: #b8b7ad;
}
.menu-wrap a:hover,
.menu-wrap a:focus {
color: #c94e50;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.content {
position: relative;
background: #b4bad2;
}
.content::before {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
content: '';
opacity: 0;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
-webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
transition: opacity 0.4s, transform 0s 0.4s;
}
/* Menu Button */
.menu-button {
position: fixed;
bottom: 0;
z-index: 1000;
margin: 1em;
padding: 0;
width: 2.5em;
height: 2.25em;
border: none;
text-indent: 2.5em;
font-size: 1.5em;
color: transparent;
background: transparent;
}
.menu-button::before {
position: absolute;
top: 0.5em;
right: 0.5em;
bottom: 0.5em;
left: 0.5em;
background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%);
content: '';
}
.menu-button:hover {
opacity: 0.6;
}
/* Close Button */
.close-button {
width: 16px;
height: 16px;
position: absolute;
right: 1em;
top: 1em;
overflow: hidden;
text-indent: 16px;
border: none;
z-index: 1001;
background: transparent;
color: transparent;
}
.close-button::before,
.close-button::after {
content: '';
position: absolute;
width: 2px;
height: 100%;
top: 0;
left: 50%;
background: #888;
}
.close-button::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close-button::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Menu */
.menu-wrap {
position: absolute;
bottom: 0;
left: 0;
z-index: 1001;
width: 100%;
height: 160px;
font-size: 1.15em;
-webkit-transform: translate3d(0,160px,0);
transform: translate3d(0,160px,0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
}
.menu {
position: absolute;
width: 100%;
z-index: 1000;
text-align: center;
top: 50%;
padding: 0 1.5em;
-webkit-transform: translate3d(0,-50%,0);
transform: translate3d(0,-50%,0);
}
.icon-list a,
.close-button {
opacity: 0;
-webkit-transform: translate3d(0,200px,0);
transform: translate3d(0,200px,0);
-webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
transition: opacity 0.4s, transform 0.4s;
}
.icon-list a {
display: inline-block;
padding: 0.8em;
}
.icon-list a i {
vertical-align: middle;
}
.icon-list a span {
display: inline-block;
margin-left: 10px;
font-size: 0.75em;
vertical-align: middle;
font-weight: 700;
letter-spacing: 1px;
}
/* Morph Shape */
.morph-shape {
position: absolute;
width: 100%;
width: calc(100% + 400px);
height: 100%;
top: 0;
left: 0;
fill: #373a47;
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transform: translate3d(-400px,0,0);
transform: translate3d(-400px,0,0);
}
/* Shown menu */
.show-menu .menu-wrap,
.show-menu .icon-list a,
.show-menu .close-button,
.show-menu .morph-shape,
.show-menu .content::before {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.show-menu .menu-wrap,
.show-menu .content::before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.show-menu .icon-list a,
.show-menu .close-button,
.show-menu .content::before {
opacity: 1;
}
.show-menu .icon-list a:nth-child(2) {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.show-menu .icon-list a:nth-child(3) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.show-menu .icon-list a:nth-child(4) {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.show-menu .icon-list a:nth-child(5) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.show-menu .icon-list a:nth-child(6) {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.show-menu .close-button {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.show-menu .content::before {
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
}
<link rel="stylesheet" type="text/css" href="https://tympanus.net/Development/OffCanvasMenuEffects/fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
<script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/snap.svg-min.js"></script>
<div class="menu-wrap">
<nav class="menu">
<div class="icon-list">
<i class="fa fa-fw fa-star-o"></i><span>Favorites</span>
<i class="fa fa-fw fa-bell-o"></i><span>Alerts</span>
<i class="fa fa-fw fa-envelope-o"></i><span>Messages</span>
<i class="fa fa-fw fa-comment-o"></i><span>Comments</span>
<i class="fa fa-fw fa-bar-chart-o"></i><span>Analytics</span>
<i class="fa fa-fw fa-newspaper-o"></i><span>Reading List</span>
</div>
</nav>
<button class="close-button" id="close-button">Close Menu</button>
<div class="morph-shape" id="morph-shape" data-morph-open="M0,100h1000V0c0,0-136.938,0-224,0C583,0,610.924,0,498,0C387,0,395,0,249,0C118,0,0,0,0,0V100z">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1000 100" preserveAspectRatio="none">
<path d="M0,100h1000l0,0c0,0-136.938,0-224,0c-193,0-170.235-1.256-278-35C399,34,395,0,249,0C118,0,0,100,0,100L0,100z"/>
</svg>
</div>
</div>
<button class="menu-button" id="open-button">Open Menu</button>
<script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/classie.js"></script>
<script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/main3.js"></script>
Currently the Menu opens from bottom to top.
My question is how is it possible to change the position of how the off canvas menu loads, default is bottom to top with wave effect convert to top to bottom, like this website: https://afriendofmine.nl
How can this be achieved?
I was tried to edit the menu but the result not good! I edit .menu-wrap class. I replace bottom: 0; with top: 0; as following:
.menu-wrap {
position: absolute;
top: 0; //edited
left: 0;
z-index: 1001;
width: 100%;
height: 160px;
font-size: 1.15em;
-webkit-transform: translate3d(0,160px,0);
transform: translate3d(0,160px,0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
}
After all, how can I make the menu to opens from top to bottom? like this website: https://afriendofmine.nl
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
html,
body,
.container,
.content-wrap {
overflow: hidden;
width: 100%;
height: 100%;
}
.container {
background: #373a47;
}
.menu-wrap a {
color: #b8b7ad;
}
.menu-wrap a:hover,
.menu-wrap a:focus {
color: #c94e50;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.content {
position: relative;
background: #b4bad2;
}
.content::before {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
content: '';
opacity: 0;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
-webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
transition: opacity 0.4s, transform 0s 0.4s;
}
/* Menu Button */
.menu-button {
position: fixed;
bottom: 0;
z-index: 1000;
margin: 1em;
padding: 0;
width: 2.5em;
height: 2.25em;
border: none;
text-indent: 2.5em;
font-size: 1.5em;
color: transparent;
background: transparent;
}
.menu-button::before {
position: absolute;
top: 0.5em;
right: 0.5em;
bottom: 0.5em;
left: 0.5em;
background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%);
content: '';
}
.menu-button:hover {
opacity: 0.6;
}
/* Close Button */
.close-button {
width: 16px;
height: 16px;
position: absolute;
right: 1em;
top: 1em;
overflow: hidden;
text-indent: 16px;
border: none;
z-index: 1001;
background: transparent;
color: transparent;
}
.close-button::before,
.close-button::after {
content: '';
position: absolute;
width: 2px;
height: 100%;
top: 0;
left: 50%;
background: #888;
}
.close-button::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close-button::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Menu */
.menu-wrap {
position: absolute;
top: 0; //edited
left: 0;
z-index: 1001;
width: 100%;
height: 160px;
font-size: 1.15em;
-webkit-transform: translate3d(0,160px,0);
transform: translate3d(0,160px,0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
}
.menu {
position: absolute;
width: 100%;
z-index: 1000;
text-align: center;
top: 50%;
padding: 0 1.5em;
-webkit-transform: translate3d(0,-50%,0);
transform: translate3d(0,-50%,0);
}
.icon-list a,
.close-button {
opacity: 0;
-webkit-transform: translate3d(0,200px,0);
transform: translate3d(0,200px,0);
-webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
transition: opacity 0.4s, transform 0.4s;
}
.icon-list a {
display: inline-block;
padding: 0.8em;
}
.icon-list a i {
vertical-align: middle;
}
.icon-list a span {
display: inline-block;
margin-left: 10px;
font-size: 0.75em;
vertical-align: middle;
font-weight: 700;
letter-spacing: 1px;
}
/* Morph Shape */
.morph-shape {
position: absolute;
width: 100%;
width: calc(100% + 400px);
height: 100%;
top: 0;
left: 0;
fill: #373a47;
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transform: translate3d(-400px,0,0);
transform: translate3d(-400px,0,0);
}
/* Shown menu */
.show-menu .menu-wrap,
.show-menu .icon-list a,
.show-menu .close-button,
.show-menu .morph-shape,
.show-menu .content::before {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.show-menu .menu-wrap,
.show-menu .content::before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.show-menu .icon-list a,
.show-menu .close-button,
.show-menu .content::before {
opacity: 1;
}
.show-menu .icon-list a:nth-child(2) {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.show-menu .icon-list a:nth-child(3) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.show-menu .icon-list a:nth-child(4) {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.show-menu .icon-list a:nth-child(5) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.show-menu .icon-list a:nth-child(6) {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.show-menu .close-button {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.show-menu .content::before {
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
}
<link rel="stylesheet" type="text/css" href="https://tympanus.net/Development/OffCanvasMenuEffects/fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
<script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/snap.svg-min.js"></script>
<div class="menu-wrap">
<nav class="menu">
<div class="icon-list">
<i class="fa fa-fw fa-star-o"></i><span>Favorites</span>
<i class="fa fa-fw fa-bell-o"></i><span>Alerts</span>
<i class="fa fa-fw fa-envelope-o"></i><span>Messages</span>
<i class="fa fa-fw fa-comment-o"></i><span>Comments</span>
<i class="fa fa-fw fa-bar-chart-o"></i><span>Analytics</span>
<i class="fa fa-fw fa-newspaper-o"></i><span>Reading List</span>
</div>
</nav>
<button class="close-button" id="close-button">Close Menu</button>
<div class="morph-shape" id="morph-shape" data-morph-open="M0,100h1000V0c0,0-136.938,0-224,0C583,0,610.924,0,498,0C387,0,395,0,249,0C118,0,0,0,0,0V100z">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1000 100" preserveAspectRatio="none">
<path d="M0,100h1000l0,0c0,0-136.938,0-224,0c-193,0-170.235-1.256-278-35C399,34,395,0,249,0C118,0,0,100,0,100L0,100z"/>
</svg>
</div>
</div>
<button class="menu-button" id="open-button">Open Menu</button>
<script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/classie.js"></script>
<script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/main3.js"></script>
This is what you need?
.morph-shape>svg {
transform:rotate3d(1, 0, 0, 180deg);
}
https://jsfiddle.net/g4pmr6ez/1/
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