Circle mask in css when zooming

Circle mask in css when zooming - javascript

I would like to use this zooming effect on a project of mine
http://tympanus.net/Tutorials/OriginalHoverEffects/index10.html
I am using an image shaped as a circle (png) . I tried to make the containing div circular using border radius
.view {
width: 132px;
height: 132px;
margin-left: 20px;
float: left;
overflow: hidden;
position: relative;
text-align: center;
-moz-border-radius: 66px;
-webkit-border-radius:66px;
-khtml-border-radius:66px;
border-radius: 66px;
cursor: default;
}
.view .mask,.view .content {
width: 132px;
height: 132px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-tenth img {
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.view-tenth .mask {
background-color: rgba(255, 231, 179, 0.3);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth h2 {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
color: #333;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth p {
color: #333;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.5s linear;
}
.view-tenth a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.view-tenth:hover img {
-webkit-transform: scale(10);
-moz-transform: scale(10);
-o-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
but when the image zoom, it shows rectangular margin. Any help on how to mask as a circle would be much appreciated!

.view: hover {
-moz-transform: scaleX(2);
-o-transform: scaleX(2);
-ms-transform: scaleX(2);
-webkit-transform: scaleX(2);
transform: scaleX(2);
}
Here, the image/images with the classname view gets scaled 2X every time user hovers over the same.

Try use percentges (%) instead of pixels (px).
-moz-border-radius: 25%;
-webkit-border-radius:25%;
-khtml-border-radius:25%;
border-radius: 25%;

Related

Div doesn't work when it's added more than once

I am using this code to create a gift box and it works fine when there is only one box.
However, when I add a new gift box next to the current one horizontally, I can see the added one but I am unable to open it. Gift boxes seem to work as intended until a user tries to open the added box/boxes.
How can I fix this?
Thanks for your time!
var to = 'Friend!';
var gift_url = 'https://stackoverflow.com/';
var gift_image_url = 'https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png';
var nametag = document.getElementById("nametag");
var present = document.getElementById("present");
var presentImage = document.getElementById("present-image");
function init() {
var _giftLink,
_giftImg;
if (gift_url) {
_giftLink = document.createElement("a");
_giftLink.href = gift_url;
_giftLink.target = "_blank";
presentImage.appendChild(_giftLink);
}
if (gift_image_url) {
_giftImg = document.createElement("img");
_giftImg.src = gift_image_url;
if (_giftLink) {
_giftLink.appendChild(_giftImg);
} else {
presentImage.appendChild(_giftImg);
}
}
present.addEventListener("click", function(e) {
present.classList.toggle("open");
}, false);
nametag.innerText = to;
}
init();
html,
body {
margin: 0;
}
.above-fold {
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
-webkit-perspective: 800px;
perspective: 800px;
-webkit-perspective-origin: 50% 200px;
perspective-origin: 50% 200px;
display: -webkit-box;
display: flex;
flex-wrap: wrap;
position: relative;
}
.above-fold .info-text {
width: 100%;
display: block;
text-align: center;
margin: 0;
padding: 0;
color: #555;
font-family: 'Avenir';
font-weight: 100;
font-size: 13px;
height: 25px;
align-self: flex-end;
}
.wrap-present {
width: 100%;
display: -webkit-box;
display: flex;
align-self: flex-end;
}
.present-box {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 200px;
height: 200px;
margin: auto;
-webkit-animation: rotate 11s alternate linear infinite;
animation: rotate 11s alternate linear infinite;
cursor: pointer;
}
.present-box:hover {
-webkit-animation: staticFront 700ms ease forwards;
animation: staticFront 700ms ease forwards;
}
.present-box.open {
/*&>.side.top{
opacity: .2;
}*/
-webkit-animation: zoomIn 1s ease-in forwards;
animation: zoomIn 1s ease-in forwards;
-webkit-transform: rotateX(-103deg) rotateY(-180deg);
transform: rotateX(-103deg) rotateY(-180deg);
-webkit-transition: -webkit-transform 400ms;
transition: -webkit-transform 400ms;
transition: transform 400ms;
transition: transform 400ms, -webkit-transform 400ms;
}
.present-box.open .present {
pointer-events: auto;
visibility: visible;
}
.present-box.open .present .img-wrap {
opacity: 1;
-webkit-transition: opacity 800ms 200ms, -webkit-transform 600ms 800ms;
transition: opacity 800ms 200ms, -webkit-transform 600ms 800ms;
transition: transform 600ms 800ms, opacity 800ms 200ms;
transition: transform 600ms 800ms, opacity 800ms 200ms, -webkit-transform 600ms 800ms;
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
}
.present-box.open > .side {
opacity: .3;
-webkit-transition: opacity 500ms 600ms;
transition: opacity 500ms 600ms;
}
.present-box.open > .side.back {
opacity: 0.7;
-webkit-transform: translateZ(-101px) rotateY(180deg);
transform: translateZ(-101px) rotateY(180deg);
}
.present-box.open > .side.front {
-webkit-transition: opacity 500ms 600ms, -webkit-transform 800ms 0s;
transition: opacity 500ms 600ms, -webkit-transform 800ms 0s;
transition: transform 800ms 0s, opacity 500ms 600ms;
transition: transform 800ms 0s, opacity 500ms 600ms, -webkit-transform 800ms 0s;
-webkit-transform: translateZ(100px) rotateY(190deg) translateX(0px);
transform: translateZ(100px) rotateY(190deg) translateX(0px);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 0.3;
}
.present-box .present {
position: absolute;
width: 200px;
height: 200px;
z-index: 50;
-webkit-transform: rotateY(-180deg) rotateX(180deg) translateZ(-100px);
transform: rotateY(-180deg) rotateX(180deg) translateZ(-100px);
display: -webkit-box;
display: flex;
-webkit-perspective: 600px;
perspective: 600px;
pointer-events: none;
visibility: hidden;
}
.present-box .present > .img-wrap {
width: 200px;
align-self: center;
-webkit-transition: -webkit-transform 400ms;
transition: -webkit-transform 400ms;
transition: transform 400ms;
transition: transform 400ms, -webkit-transform 400ms;
opacity: 0;
-webkit-transform: translateZ(-80px);
transform: translateZ(-80px);
}
.present-box .present > .img-wrap a {
-webkit-transition: -webkit-transform 300ms;
transition: -webkit-transform 300ms;
transition: transform 300ms;
transition: transform 300ms, -webkit-transform 300ms;
position: relative;
display: block;
-webkit-transform: scale(0.94);
transform: scale(0.94);
}
.present-box .present > .img-wrap a:hover {
-webkit-transform: scale(1);
transform: scale(1);
}
.present-box .present > .img-wrap img {
max-width: 100%;
height: auto;
}
.present-box > .side {
width: 200px;
height: 200px;
position: absolute;
display: block;
background: repeating-linear-gradient(45deg, #cc2000, #cc2000 20px, #ffffff 20px, #ffffff 40px);
top: 0;
left: 0;
-webkit-transition: -webkit-transform 400ms;
transition: -webkit-transform 400ms;
transition: transform 400ms;
transition: transform 400ms, -webkit-transform 400ms;
}
.present-box > .side.back {
-webkit-transform: translateZ(-100px) rotateY(180deg);
transform: translateZ(-100px) rotateY(180deg);
}
.present-box > .side.right {
-webkit-transform: rotateY(-270deg) translateX(100px);
transform: rotateY(-270deg) translateX(100px);
-webkit-transform-origin: top right;
transform-origin: top right;
}
.present-box > .side.left {
-webkit-transform: rotateY(270deg) translateX(-100px);
transform: rotateY(270deg) translateX(-100px);
-webkit-transform-origin: center left;
transform-origin: center left;
}
.present-box > .side.top {
-webkit-transform: rotateX(-90deg) translateY(-100px);
transform: rotateX(-90deg) translateY(-100px);
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 100px;
perspective: 100px;
text-align: center;
}
.present-box > .side.top .to {
display: inline-block;
font-family: cursive;
position: relative;
padding: 10px 10px 30px 10px;
border: 5px dotted #ff6666;
border-width: 2px;
background: #fff;
margin: auto;
-webkit-transform: translateZ(-2px) translateY(50px);
transform: translateZ(-2px) translateY(50px);
}
.present-box > .side.top .to:after {
content: 'Merry Christmas';
display: inline-block;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
color: #990000;
}
.present-box > .side.top .to .name {
display: block;
position: absolute;
-webkit-transform: translateY(20px) rotateY(180deg) translateX(10px);
transform: translateY(20px) rotateY(180deg) translateX(10px);
text-align: center;
width: 100%;
font-size: 1.1rem;
color: green;
}
.present-box > .side.bottom {
-webkit-transform: rotateX(90deg) translateY(100px);
transform: rotateX(90deg) translateY(100px);
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.present-box > .side.front {
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
#-webkit-keyframes rotate {
100% {
-webkit-transform: rotateY(-360deg) rotateX(180deg);
transform: rotateY(-360deg) rotateX(180deg);
}
}
#keyframes rotate {
100% {
-webkit-transform: rotateY(-360deg) rotateX(180deg);
transform: rotateY(-360deg) rotateX(180deg);
}
}
#-webkit-keyframes staticFront {
100% {
-webkit-transform: rotateX(-100deg) rotateY(-180deg);
transform: rotateX(-100deg) rotateY(-180deg);
}
}
#keyframes staticFront {
100% {
-webkit-transform: rotateX(-100deg) rotateY(-180deg);
transform: rotateX(-100deg) rotateY(-180deg);
}
}
#-webkit-keyframes zoomIn {
50% {
-webkit-transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
}
100% {
-webkit-transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
}
}
#keyframes zoomIn {
50% {
-webkit-transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
}
100% {
-webkit-transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
}
}
<section class="above-fold">
<div class="wrap-present">
<div class="present-box" id="present">
<div class="present">
<div class="img-wrap" id="present-image">
</div>
</div>
<div class="side front"></div>
<div class="side back"></div>
<div class="side left"></div>
<div class="side right"></div>
<div class="side top">
<span class="to">
<span class="name" id="nametag">
</span>
</span>
</div>
<div class="side bottom"></div>
</div>
</div>
<p class="info-text">Click to Open</p>
</section>

Coderman was close, but there is not a singular form of GetElementsByClassName in Javascript.
You need to iterate over all of the instances of the class and add a handler to each of them.
var to = 'Friend!';
var gift_url = 'https://stackoverflow.com/';
var gift_image_url = 'https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png';
var nametag = document.getElementById("nametag");
var present = document.getElementsByClassName("present-box");
var presentImage = document.getElementById("present-image");
function init() {
var _giftLink,
_giftImg;
if (gift_url) {
_giftLink = document.createElement("a");
_giftLink.href = gift_url;
_giftLink.target = "_blank";
presentImage.appendChild(_giftLink);
}
if (gift_image_url) {
_giftImg = document.createElement("img");
_giftImg.src = gift_image_url;
if (_giftLink) {
_giftLink.appendChild(_giftImg);
} else {
presentImage.appendChild(_giftImg);
}
}
for (var i = 0; i < present.length; i++) {
present[i].addEventListener("click", function(e) {
this.classList.toggle("open");
}, false);
}
nametag.innerText = to;
}
init();
html,
body {
margin: 0;
}
.above-fold {
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
-webkit-perspective: 800px;
perspective: 800px;
-webkit-perspective-origin: 50% 200px;
perspective-origin: 50% 200px;
display: -webkit-box;
display: flex;
flex-wrap: wrap;
position: relative;
}
.above-fold .info-text {
width: 100%;
display: block;
text-align: center;
margin: 0;
padding: 0;
color: #555;
font-family: 'Avenir';
font-weight: 100;
font-size: 13px;
height: 25px;
align-self: flex-end;
}
.wrap-present {
width: 100%;
display: -webkit-box;
display: flex;
align-self: flex-end;
}
.present-box {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 200px;
height: 200px;
margin: auto;
-webkit-animation: rotate 11s alternate linear infinite;
animation: rotate 11s alternate linear infinite;
cursor: pointer;
}
.present-box:hover {
-webkit-animation: staticFront 700ms ease forwards;
animation: staticFront 700ms ease forwards;
}
.present-box.open {
/*&>.side.top{
opacity: .2;
}*/
-webkit-animation: zoomIn 1s ease-in forwards;
animation: zoomIn 1s ease-in forwards;
-webkit-transform: rotateX(-103deg) rotateY(-180deg);
transform: rotateX(-103deg) rotateY(-180deg);
-webkit-transition: -webkit-transform 400ms;
transition: -webkit-transform 400ms;
transition: transform 400ms;
transition: transform 400ms, -webkit-transform 400ms;
}
.present-box.open .present {
pointer-events: auto;
visibility: visible;
}
.present-box.open .present .img-wrap {
opacity: 1;
-webkit-transition: opacity 800ms 200ms, -webkit-transform 600ms 800ms;
transition: opacity 800ms 200ms, -webkit-transform 600ms 800ms;
transition: transform 600ms 800ms, opacity 800ms 200ms;
transition: transform 600ms 800ms, opacity 800ms 200ms, -webkit-transform 600ms 800ms;
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
}
.present-box.open > .side {
opacity: .3;
-webkit-transition: opacity 500ms 600ms;
transition: opacity 500ms 600ms;
}
.present-box.open > .side.back {
opacity: 0.7;
-webkit-transform: translateZ(-101px) rotateY(180deg);
transform: translateZ(-101px) rotateY(180deg);
}
.present-box.open > .side.front {
-webkit-transition: opacity 500ms 600ms, -webkit-transform 800ms 0s;
transition: opacity 500ms 600ms, -webkit-transform 800ms 0s;
transition: transform 800ms 0s, opacity 500ms 600ms;
transition: transform 800ms 0s, opacity 500ms 600ms, -webkit-transform 800ms 0s;
-webkit-transform: translateZ(100px) rotateY(190deg) translateX(0px);
transform: translateZ(100px) rotateY(190deg) translateX(0px);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 0.3;
}
.present-box .present {
position: absolute;
width: 200px;
height: 200px;
z-index: 50;
-webkit-transform: rotateY(-180deg) rotateX(180deg) translateZ(-100px);
transform: rotateY(-180deg) rotateX(180deg) translateZ(-100px);
display: -webkit-box;
display: flex;
-webkit-perspective: 600px;
perspective: 600px;
pointer-events: none;
visibility: hidden;
}
.present-box .present > .img-wrap {
width: 200px;
align-self: center;
-webkit-transition: -webkit-transform 400ms;
transition: -webkit-transform 400ms;
transition: transform 400ms;
transition: transform 400ms, -webkit-transform 400ms;
opacity: 0;
-webkit-transform: translateZ(-80px);
transform: translateZ(-80px);
}
.present-box .present > .img-wrap a {
-webkit-transition: -webkit-transform 300ms;
transition: -webkit-transform 300ms;
transition: transform 300ms;
transition: transform 300ms, -webkit-transform 300ms;
position: relative;
display: block;
-webkit-transform: scale(0.94);
transform: scale(0.94);
}
.present-box .present > .img-wrap a:hover {
-webkit-transform: scale(1);
transform: scale(1);
}
.present-box .present > .img-wrap img {
max-width: 100%;
height: auto;
}
.present-box > .side {
width: 200px;
height: 200px;
position: absolute;
display: block;
background: repeating-linear-gradient(45deg, #cc2000, #cc2000 20px, #ffffff 20px, #ffffff 40px);
top: 0;
left: 0;
-webkit-transition: -webkit-transform 400ms;
transition: -webkit-transform 400ms;
transition: transform 400ms;
transition: transform 400ms, -webkit-transform 400ms;
}
.present-box > .side.back {
-webkit-transform: translateZ(-100px) rotateY(180deg);
transform: translateZ(-100px) rotateY(180deg);
}
.present-box > .side.right {
-webkit-transform: rotateY(-270deg) translateX(100px);
transform: rotateY(-270deg) translateX(100px);
-webkit-transform-origin: top right;
transform-origin: top right;
}
.present-box > .side.left {
-webkit-transform: rotateY(270deg) translateX(-100px);
transform: rotateY(270deg) translateX(-100px);
-webkit-transform-origin: center left;
transform-origin: center left;
}
.present-box > .side.top {
-webkit-transform: rotateX(-90deg) translateY(-100px);
transform: rotateX(-90deg) translateY(-100px);
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 100px;
perspective: 100px;
text-align: center;
}
.present-box > .side.top .to {
display: inline-block;
font-family: cursive;
position: relative;
padding: 10px 10px 30px 10px;
border: 5px dotted #ff6666;
border-width: 2px;
background: #fff;
margin: auto;
-webkit-transform: translateZ(-2px) translateY(50px);
transform: translateZ(-2px) translateY(50px);
}
.present-box > .side.top .to:after {
content: 'Merry Christmas';
display: inline-block;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
color: #990000;
}
.present-box > .side.top .to .name {
display: block;
position: absolute;
-webkit-transform: translateY(20px) rotateY(180deg) translateX(10px);
transform: translateY(20px) rotateY(180deg) translateX(10px);
text-align: center;
width: 100%;
font-size: 1.1rem;
color: green;
}
.present-box > .side.bottom {
-webkit-transform: rotateX(90deg) translateY(100px);
transform: rotateX(90deg) translateY(100px);
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.present-box > .side.front {
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
#-webkit-keyframes rotate {
100% {
-webkit-transform: rotateY(-360deg) rotateX(180deg);
transform: rotateY(-360deg) rotateX(180deg);
}
}
#keyframes rotate {
100% {
-webkit-transform: rotateY(-360deg) rotateX(180deg);
transform: rotateY(-360deg) rotateX(180deg);
}
}
#-webkit-keyframes staticFront {
100% {
-webkit-transform: rotateX(-100deg) rotateY(-180deg);
transform: rotateX(-100deg) rotateY(-180deg);
}
}
#keyframes staticFront {
100% {
-webkit-transform: rotateX(-100deg) rotateY(-180deg);
transform: rotateX(-100deg) rotateY(-180deg);
}
}
#-webkit-keyframes zoomIn {
50% {
-webkit-transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
}
100% {
-webkit-transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
}
}
#keyframes zoomIn {
50% {
-webkit-transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
}
100% {
-webkit-transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
}
}
<section class="above-fold">
<div class="wrap-present">
<div class="present-box" id="present">
<div class="present">
<div class="img-wrap" id="present-image">
</div>
</div>
<div class="side front"></div>
<div class="side back"></div>
<div class="side left"></div>
<div class="side right"></div>
<div class="side top">
<span class="to">
<span class="name" id="nametag">
</span>
</span>
</div>
<div class="side bottom"></div>
</div>
</div>
<p class="info-text">Click to Open</p>
</section>
<section class="above-fold">
<div class="wrap-present">
<div class="present-box" id="present2">
<div class="present">
<div class="img-wrap" id="present-image">
</div>
</div>
<div class="side front"></div>
<div class="side back"></div>
<div class="side left"></div>
<div class="side right"></div>
<div class="side top">
<span class="to">
<span class="name" id="nametag">
</span>
</span>
</div>
<div class="side bottom"></div>
</div>
</div>
<p class="info-text">Click to Open</p>
</section>

Jquery SVG circle navigation

The navigation works well, but the active status should show in a better way:
-- If the circle was active it stay active.(
-- Going back the a class active goes.
so, if page down remain active if page up(going back) remove active class.
At the moment just a a class active works,
I hope makes sense. Please ask question, this is a really nice animation but need a bit of more work.
I will post the code with a Demo.
Also . FIDDLE
$(document).ready(function() {
var $half = $(".circle .half"),
halfLen = $half[0].getTotalLength(),
$nav = $(".circle .active-nav"),
navLen = $nav[0].getTotalLength(),
$pages = $(".pages"),
scrolling = false,
curPage = 1,
numOfPages = $(".page").length,
headingH = $(".heading").height(),
SPHASE1 = 500,
SPHASE2 = 300,
SPHASE3 = 900,
SDELAY = SPHASE1 + SPHASE2 + SPHASE3,
SDUR = 500,
SDOTS = SDELAY + SDUR,
DOTTRANSTIME = 300,
SDOTSRDY = SDOTS + DOTTRANSTIME + (numOfPages - 2) * 100,
PAGETRANSITION = 500;
TweenMax.to($half, .5, {strokeDasharray: halfLen, strokeDashoffset: halfLen, ease:Power1.easeOut}, 0)
TweenMax.to($nav, .5, {strokeDasharray: navLen, strokeDashoffset: navLen, ease:Power1.easeOut}, 0)
$half.delay(SDELAY).velocity({strokeDashoffset: 0}, {duration: SDUR, easing: "ease-in"});
setTimeout(function() {
$(".nav-el").addClass("showing visible");
}, SDOTS);
setTimeout(function() {
$(".nav-el").removeClass("showing").addClass("white");
$(".nav-el-1").addClass("active");
$(".heading").removeClass("invisible");
$pages.removeClass("removed");
setTimeout(function() {
activateHandlers();
}, PAGETRANSITION + 300);
}, SDOTSRDY);
function pagination(page) {
scrolling = true;
curPage = page;
$(".nav-el").removeClass("active");
$(".nav-el-" + page).addClass("active");
var newNavLen = navLen - navLen / 5 * (page - 1);
$nav.velocity({strokeDashoffset: newNavLen}, {duration: PAGETRANSITION});
$(".numbers").css("transform", "translateY("+ (0 - (page - 1) * headingH) +"px)");
$pages.css("transform", "translate3D(0,"+ (0 - (page - 1) * 100) +"%,0)");
setTimeout(function() {
scrolling = false;
}, PAGETRANSITION);
if($(".nav-el-").hasClass('active')){
console.log('if active')
}else{
console.log('else active')
}
}
function activateHandlers() {
$(document).on("click", ".nav-el", function() {
var pg = +$(this).attr("data-page");
pagination(pg);
});
$(window).resize(function() {
headingH = $(".heading").height();
});
}
var diff = 0;
});
#font-face {
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/polar.otf");
font-family: Polar;
}
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
}
.instant {
transition: all 0 0 !important;
}
html, body {
font-size: 62.5%;
height: 100%;
overflow: hidden;
background: #90CAF9;
}
#media (max-width: 960px) {
html, body {
font-size: 50%;
}
}
#media (max-width: 768px) {
html, body {
font-size: 40%;
}
}
#media (max-width: 480px) {
html, body {
font-size: 30%;
}
}
.scene {
position: relative;
height: 100%;
}
.circle {
z-index: 4;
position: fixed;
top: calc(50% - 20rem);
left: calc(50% - 20rem);
width: 40rem;
height: 40rem;
opacity: 1;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.rotater {
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
width: 500rem;
height: 500rem;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: #020202;
border-radius: 50%;
}
.rotater.phase1 {
width: 0.1rem;
height: 0.1rem;
transition: width 0.5s, height 0.5s;
}
.rotater.phase2 {
width: 2.5rem;
height: 2.5rem;
transition: width 0.3s cubic-bezier(0.72, 0.17, 0.68, 1.46), height 0.3s cubic-bezier(0.72, 0.17, 0.68, 1.46);
}
.rotater.phase3 {
width: 1rem;
height: 1rem;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(180deg);
transform: translateX(-50%) translateY(-50%) rotate(180deg);
transition: width 0.1s, height 0.1s, opacity 0.4s 1.3s, -webkit-transform 0.6s 0.87s ease-in;
transition: width 0.1s, height 0.1s, transform 0.6s 0.87s ease-in, opacity 0.4s 1.3s;
transition: width 0.1s, height 0.1s, transform 0.6s 0.87s ease-in, opacity 0.4s 1.3s, -webkit-transform 0.6s 0.87s ease-in;
opacity: 0;
}
.rotater.phase3 .rotater--line {
max-width: 20rem;
}
.rotater.phase3 .rotater--line:after {
-webkit-transform: scale(1);
transform: scale(1);
}
.rotater--line {
position: absolute;
top: calc(50% - 0.1rem);
left: 50%;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
width: 20rem;
max-width: 0;
height: 0.2rem;
background: #020202;
transition: max-width 0.5s 0.1s;
will-change: max-width;
}
.rotater--line:after {
content: "";
position: absolute;
top: -0.4rem;
left: 19.4rem;
width: 1rem;
height: 1rem;
background: #020202;
border-radius: 50%;
-webkit-transform: scale(0);
transform: scale(0);
transition: -webkit-transform 0.2s 0.55s cubic-bezier(0.72, 0.17, 0.68, 1.46);
transition: transform 0.2s 0.55s cubic-bezier(0.72, 0.17, 0.68, 1.46);
transition: transform 0.2s 0.55s cubic-bezier(0.72, 0.17, 0.68, 1.46), -webkit-transform 0.2s 0.55s cubic-bezier(0.72, 0.17, 0.68, 1.46);
}
.rotater--line.left {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.nav-elems {
z-index: 5;
position: fixed;
top: calc(50% - 20rem);
left: calc(50% - 20rem);
width: 40rem;
height: 40rem;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.heading {
position: absolute;
top: 50%;
left: 50%;
font-size: 9rem;
width: 40rem;
height: 9rem;
line-height: 1;
font-family: Polar;
text-transform: uppercase;
text-align: center;
color: rgba(255, 255, 255, 0.5);
margin-left: -3rem;
-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
transform: translateX(-50%) translateY(-50%) scale(1);
overflow: hidden;
transition: opacity 0.3s 0.7s, -webkit-transform 0.3s 0.7s cubic-bezier(0.72, 0.17, 0.68, 1.46);
transition: opacity 0.3s 0.7s, transform 0.3s 0.7s cubic-bezier(0.72, 0.17, 0.68, 1.46);
transition: opacity 0.3s 0.7s, transform 0.3s 0.7s cubic-bezier(0.72, 0.17, 0.68, 1.46), -webkit-transform 0.3s 0.7s cubic-bezier(0.72, 0.17, 0.68, 1.46);
}
.heading.invisible {
opacity: 0;
-webkit-transform: translateX(-50%) translateY(-50%) scale(0);
transform: translateX(-50%) translateY(-50%) scale(0);
}
.numbers {
position: absolute;
top: 0;
right: 5rem;
width: 1rem;
display: inline-block;
vertical-align: top;
height: 90rem;
line-height: 1;
word-break: break-all;
transition: -webkit-transform 0.7s;
transition: transform 0.7s;
transition: transform 0.7s, -webkit-transform 0.7s;
will-change: transform;
}
.nav-el {
position: absolute;
width: 1rem;
height: 1rem;
border-radius: 50%;
background: #020202;
-webkit-transform: scale(0);
transform: scale(0);
transition: background-color 0.7s, -webkit-transform 0.3s cubic-bezier(0.72, 0.17, 0.68, 1.46);
transition: transform 0.3s cubic-bezier(0.72, 0.17, 0.68, 1.46), background-color 0.7s;
transition: transform 0.3s cubic-bezier(0.72, 0.17, 0.68, 1.46), background-color 0.7s, -webkit-transform 0.3s cubic-bezier(0.72, 0.17, 0.68, 1.46);
cursor: pointer;
}
.nav-el:after {
content: "";
position: absolute;
top: calc(50% - 0.2rem);
left: calc(50% - 0.2rem);
width: 0.4rem;
height: 0.4rem;
background: #020202;
border-radius: 50%;
-webkit-transform: scale(0);
transform: scale(0);
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}
.nav-el.visible {
-webkit-transform: scale(1);
transform: scale(1);
}
.nav-el.white {
background: #fff;
}
.nav-el.active, .nav-el:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.nav-el.active:after, .nav-el:hover:after {
-webkit-transform: scale(1);
transform: scale(1);
}
.nav-el-1 {
left: 19.5rem;
top: -0.4rem;
}
.nav-el-1.showing {
transition-delay: 0s;
}
.nav-el-2 {
left: 38.42602rem;
top: 13.35056rem;
}
.nav-el-2.showing {
transition-delay: 0.1s;
}
.nav-el-3 {
left: 31.19693rem;
top: 35.59944rem;
}
.nav-el-3.showing {
transition-delay: 0.2s;
}
.nav-el-4 {
left: 7.80307rem;
top: 35.59944rem;
}
.nav-el-4.showing {
transition-delay: 0.3s;
}
.nav-el-5 {
left: 0.57398rem;
top: 13.35056rem;
}
.nav-el-5.showing {
transition-delay: 0.4s;
}
.pages {
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: translateX(0);
transform: translateX(0);
transition: -webkit-transform 0.7s;
transition: transform 0.7s;
transition: transform 0.7s, -webkit-transform 0.7s;
will-change: transform;
}
.pages.removed {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.pages.removed .scroll-down {
-webkit-transform: scale(0);
transform: scale(0);
}
.page {
position: relative;
width: 100%;
height: 100%;
}
.page:after {
content: "";
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
}
.page.page-1 {
position: relative;
background: #F44336;
}
.page.page-2 {
background: #009688;
}
.page.page-3 {
background: #3F51B5;
}
.page.page-4 {
background: #FFA726;
}
.page.page-5 {
background: #795548;
}
.page.page-6 {
background: #607D8B;
}
.page.page-7 {
position: relative;
background: #000000;
padding: 10rem;
}
.scroll-down {
position: absolute;
bottom: 5rem;
left: 50%;
-webkit-transform: translateX(-50%) scale(1);
transform: translateX(-50%) scale(1);
font-size: 5rem;
font-family: Polar;
color: #fff;
transition: -webkit-transform 0.3s 0.7s cubic-bezier(0.72, 0.17, 0.68, 1.46);
transition: transform 0.3s 0.7s cubic-bezier(0.72, 0.17, 0.68, 1.46);
transition: transform 0.3s 0.7s cubic-bezier(0.72, 0.17, 0.68, 1.46), -webkit-transform 0.3s 0.7s cubic-bezier(0.72, 0.17, 0.68, 1.46);
}
#media (max-width: 768px) {
.scroll-down {
display: none;
}
}
#media (max-height: 610px) and (min-width: 769px) {
.scroll-down {
display: none;
}
}
.check-out {
z-index: 10;
position: relative;
font-size: 5rem;
font-family: Polar;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdn.jsdelivr.net/velocity/1.2.0/velocity.min.js"></script>
<div class="scene">
<svg class="circle" viewBox="0 0 400 400">
<path class="half" stroke="rgba(255,255,255,0.5)" stroke-width="2" fill="none" d="M1,200 a199,199 0 0,1 398,0"/>
<path class="half" stroke="rgba(255,255,255,0.5)" stroke-width="2" fill="none" d="M399,200 a199,199 0 0,1 -398,0"/>
<path class="active-nav" stroke="#fff" stroke-width="2" fill="none" d="M200,1 a199,199 0 0,1 0,398 a199,199 0 0,1 0,-398"/>
</svg>
<div class="rotater">
<div class="rotater--line left"></div>
<div class="rotater--line right"></div>
</div>
<div class="nav-elems">
<div data-page="1" class="nav-el nav-el-1"></div>
<div data-page="2" class="nav-el nav-el-2"></div>
<div data-page="3" class="nav-el nav-el-3"></div>
<div data-page="4" class="nav-el nav-el-4"></div>
<div data-page="5" class="nav-el nav-el-5"></div>
</div>
<div class="pages removed">
<div class="page page-1">
<p class="scroll-down">Scroll down</p>
</div>
<div class="page page-2"></div>
<div class="page page-3"></div>
<div class="page page-4"></div>
<div class="page page-5"></div>
</div>
</div>

Rotate CSS card on button click

I want to rotate CSS card by click on specific button.
Right now I can rotate it by clicking anywhere.
How should I make it change only on button click?
I try to change in javascript code ('.card') to ('#rotate') and add that id to the button, but it doesn't work.
$('.card').click(function(){
$(this).toggleClass('flipped');
});
.animation {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.cardContainer
{
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
/*depth of the elements */
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
/*border: 1px solid #ff0000;*/
padding-left: 1%;
}
.card
{
width: 99%;
height: 200px;
cursor: pointer;
/*transition effects */
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card.flipped
{
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
.card.flipped:
{
}
.card .front,
.card .back {
display: block;
height: 100%;
width: 100%;
line-height: 60px;
color: white;
text-align: center;
font-size: 4em;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
}
.card .back {
width: 100%;
padding-left: 3%;
padding-right: 3%;
font-size: 16px;
text-align: left;
line-height: 25px;
}
.card .back {
background: #03446A;
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<div class="col-md-3 cardContainer">
<div class="card red">
<div class="front"><h3 class="cardTitle">Flip me!</h3></div>
<div class="back">
<div class="content">
<h3 class="cardTitle">Back side</h3>
<br/>
<p id="happy"></p>
</div>
</div>
</div>
</div>
<br>
<button type="button">Rotate card</button>

Simply change your click handler:
$('button').click(function(){
$('.card').toggleClass('flipped');
});

$('#rotate').click(function(){
$(".card").toggleClass('flipped');
});
.animation {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.cardContainer
{
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
/*depth of the elements */
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
/*border: 1px solid #ff0000;*/
padding-left: 1%;
}
.card
{
width: 99%;
height: 200px;
cursor: pointer;
/*transition effects */
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card.flipped
{
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
.card.flipped:
{
}
.card .front,
.card .back {
display: block;
height: 100%;
width: 100%;
line-height: 60px;
color: white;
text-align: center;
font-size: 4em;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
}
.card .back {
width: 100%;
padding-left: 3%;
padding-right: 3%;
font-size: 16px;
text-align: left;
line-height: 25px;
}
.card .back {
background: #03446A;
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- begin snippet: js hide: false -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<div class="col-md-3 cardContainer">
<div class="card red">
<div class="front"><h3 class="cardTitle">Flip me!</h3></div>
<div class="back">
<div class="content">
<h3 class="cardTitle">Back side</h3>
<br/>
<p id="happy"></p>
</div>
</div>
</div>
</div>
<br>
<button id="rotate" type="button">Rotate card</button>
Here your solution, you just trying to rotate button when you click with id with $(this), you need to rotate the div

Here You go:
$('.turnIt').click(function(){
$(".card").toggleClass('flipped');
});
http://codepen.io/damianocel/pen/QjZGjV

hover colour transition slide effect

I have a link that changes colour when mouse hovers over it and i am fully conformable with the coding for this however i would like the however effect to slide down as oppose to just change colour. how is this possible with css. I have looked around stack overflow but only able to find instances where people use background images and alter the its position. Is that the only way to make this possible?
It is difficult to articualte what i am trying to achieve but it is on show on this website weblounge.be the effect that i am trying to achieve is on the two links on the homepage
#contactlink {
display: inline-block;
font-weight: 700;
text-transform: uppercase;
padding: 11px 51px;
border: 1px solid #fff;
-webkit-transition: .2s;
transition: .2s;
margin-left: 78px;
margin-top: 40px;
float: left;
color: #FFF;
text-decoration: none;
-webkit-transition: .2s;
transition: .2s;
text-decoration: none;
opacity: 0;
}
#contactlink:hover {
background-color: #FFF;
color: #666;
border: 1px solid #fff;
-webkit-transition: .2s;
transition: .2s;
}
Let's talk
https://jsfiddle.net/6t3quy4w/5/

The website you linked does theirs by having the :before pseudo-element transition its scale over top of the button. It also required having a span inside the button so that its z-index could be set on top of the :before element. Here is an example:
a.color-change {
display: inline-block;
padding: 15px;
color: black;
background-color: white;
position: relative;
padding: 15px;
border: 1px solid black;
text-decoration: none;
z-index: 0;
}
a.color-change:before {
content: ' ';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #777;
transform: scale(1, 0);
transition: all .25s ease-out;
transform-origin: center top;
z-index: 0;
}
a.color-change:hover:before {
transform: scale(1);
}
a.color-change span {
z-index: 1;
position: relative;
}
<span>Hover Over Me</span>

Not sure why your using whit on white, anyway based on my understanding i have provide some thing for you
#contactlink {
background: #1568b6;
color: #fff;
display: inline-block;
line-height: normal;
padding: 17px 20px 16px 20px;
position: relative;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
font-size: 14px;
letter-spacing: 1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: background .15s;
-moz-transition: background .15s;
-ms-transition: background .15s;
-o-transition: background .15s;
transition: background .15s
}
#contactlink span {
position: relative;
z-index: 1;
-webkit-transition: color .25s;
-moz-transition: color .25s;
-ms-transition: color .25s;
-o-transition: color .25s;
transition: color .25s
}
#contactlink:before {
background: #6c6c6c;
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
z-index: 0;
display: block;
padding: 0;
-webkit-transform: scale(1, 0);
-moz-transform: scale(1, 0);
-ms-transform: scale(1, 0);
-o-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: center top;
transform-origin: center top;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out
}
#contactlink:hover:before {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
<a href="#contact" class="smoothScroll" id="contactlink">
<span>Let's talk</span>
</a>

Disable animation effect with CSS

I am working on a slide-out menu for my website.
When the menu icon is clicked, I'd like to disable the way the menu animates upwards and just have it static. How do I do this?
http://jsfiddle.net/3w539Lct/
I believe the answer is in my CSS, but trial & error has failed so far:
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;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
/* Menu Button */
.menu-button {
position: fixed;
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: 1em;
height: 1em;
position: absolute;
right: 1em;
top: 1em;
overflow: hidden;
text-indent: 1em;
font-size: 0.75em;
border: none;
background: transparent;
color: transparent;
}
.close-button::before,
.close-button::after {
content: '';
position: absolute;
width: 3px;
height: 100%;
top: 0;
left: 50%;
background: #bdc3c7;
}
.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;
z-index: 1001;
width: 300px;
height: 100%;
background: #373a47;
padding: 2.5em 1.5em 0;
font-size: 1.15em;
-webkit-transform: translate3d(-320px,0,0);
transform: translate3d(-320px,0,0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.menu,
.icon-list {
height: 100%;
}
.icon-list {
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}
.icon-list a {
display: block;
padding: 0.8em;
-webkit-transform: translate3d(0,500px,0);
transform: translate3d(0,500px,0);
}
.icon-list,
.icon-list a {
-webkit-transition: -webkit-transform 0s 0.4s;
transition: transform 0s 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.icon-list a:nth-child(2) {
-webkit-transform: translate3d(0,1000px,0);
transform: translate3d(0,1000px,0);
}
.icon-list a:nth-child(3) {
-webkit-transform: translate3d(0,1500px,0);
transform: translate3d(0,1500px,0);
}
.icon-list a:nth-child(4) {
-webkit-transform: translate3d(0,2000px,0);
transform: translate3d(0,2000px,0);
}
.icon-list a:nth-child(5) {
-webkit-transform: translate3d(0,2500px,0);
transform: translate3d(0,2500px,0);
}
.icon-list a:nth-child(6) {
-webkit-transform: translate3d(0,3000px,0);
transform: translate3d(0,3000px,0);
}
.icon-list a span {
margin-left: 10px;
font-weight: 700;
}
/* Shown menu */
.show-menu .menu-wrap {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform 0.8s;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.show-menu .icon-list,
.show-menu .icon-list a {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform 0.8s;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.show-menu .icon-list a {
-webkit-transition-duration: 0.9s;
transition-duration: 0.9s;
}
.show-menu .content::before {
opacity: 1;
-webkit-transition: opacity 0.8s;
transition: opacity 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

remove these transitions:
.show-menu .icon-list a {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);/*
-webkit-transition: -webkit-transform 0.8s;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);*/
}
.show-menu .icon-list a { /*
-webkit-transition-duration: 0.9s;
transition-duration: 0.9s; */
}

Since the menu items are referenced by the .icon-list class, just remove the relevant styles:
.icon-list {
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}
.icon-list a {
display: block;
padding: 0.8em;
-webkit-transform: translate3d(0,500px,0);
transform: translate3d(0,500px,0);
}
.icon-list,
.icon-list a {
-webkit-transition: -webkit-transform 0s 0.4s;
transition: transform 0s 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.icon-list a:nth-child(2) {
-webkit-transform: translate3d(0,1000px,0);
transform: translate3d(0,1000px,0);
}
.icon-list a:nth-child(3) {
-webkit-transform: translate3d(0,1500px,0);
transform: translate3d(0,1500px,0);
}
.icon-list a:nth-child(4) {
-webkit-transform: translate3d(0,2000px,0);
transform: translate3d(0,2000px,0);
}
.icon-list a:nth-child(5) {
-webkit-transform: translate3d(0,2500px,0);
transform: translate3d(0,2500px,0);
}
.icon-list a:nth-child(6) {
-webkit-transform: translate3d(0,3000px,0);
transform: translate3d(0,3000px,0);
}
You might want to keep the following style so that the menu position is not affected:
.icon-list a {
display: block;
padding: 0.8em;
}

Develop Reference

JavaScript is the programming language of the Web.

Circle mask in css when zooming - javascript

.view: hover { -moz-transform: scaleX(2); -o-transform: scaleX(2); -ms-transform: scaleX(2); -webkit-transform: scaleX(2); transform: scaleX(2); } Here, the image/images with the classname view gets scaled 2X every time user hovers over the same.

Try use percentges (%) instead of pixels (px). -moz-border-radius: 25%; -webkit-border-radius:25%; -khtml-border-radius:25%; border-radius: 25%;

Related

Div doesn't work when it's added more than once

Jquery SVG circle navigation

Rotate CSS card on button click

hover colour transition slide effect

Disable animation effect with CSS

Categories

Resources