Develop Reference

Trigger css class onclick with javascript

this question is newbie but i'm stuck in this thing. I hope someone can help me.
I have this code:
HTML:
<div class='zone11'>
<div class='book11'>
<div class='cover11'></div>
<div class='page11'></div>
<div class='page11'></div>
<div class='page11'></div>
<div class='page11'></div>
<div class='page11'></div>
<div class='last-page11'></div>
<div class='back-cover11'></div>
</div>
</div>
CSS:
.zone11{
height: 700px;
display: flex;
align-items: center;
justify-content: center;
perspective: 1000px;
}
.book11{
display: flex;
align-items: center;
cursor: pointer;
}
.book11:hover .cover11{
transform: rotateX(10deg) rotateY(-180deg);
}
.book11:hover .page11{
transform: rotateX(10deg) rotateY(-180deg);
z-index: 2;
}
.cover11{
z-index: 1;
transition: all 3.5s;
}
.back-cover11{
z-index: -3;
}
.cover11, .back-cover11{
height: 450px;
width: 360px;
background: #3f0035;
border-radius: 2px 20px 20px 2px;
position: absolute;
box-shadow: 1px 1px 10px gray;
transform: rotateX(10deg);
transform-origin: center left;
}
.page11{
height: 430px;
width: 350px;
background: white;
position: absolute;
border-radius: 2px 10px 10px 2px;
transform: rotateX(10deg);
transform-origin: center left;
z-index: -1;
}
.last-page11{
height: 430px;
width: 350px;
background: white;
position: absolute;
border-radius: 2px 10px 10px 2px;
transform: rotateX(10deg);
transform-origin: center left;
z-index: -2;
}
.page11:nth-child(2){
transition-duration: 3s;
}
.page11:nth-child(3){
transition-duration: 2.6s;
}
.page11:nth-child(4){
transition-duration: 2.2s;
}
.page11:nth-child(5){
transition-duration: 1.8s;
}
.page11:nth-child(6){
transition-duration: 1.4s;
}
.book11:hover .page11:nth-child(2){
transition-duration: 6s;
}
.book11:hover .page11:nth-child(3){
transition-duration: 5.6s;
}
.book11:hover .page11:nth-child(4){
transition-duration: 5.2s;
}
.book11:hover .page11:nth-child(5){
transition-duration: 4.8s;
}
.book11:hover .page11:nth-child(6){
transition-duration: 4.4s;
}
Now, this way I have an animation of a book that when you hover, it opens to one page (with 5 pages scrolling before you get there). I want to remove the hover and make sure that it opens and closes on click.
I removed the hover from the classes. For example the cover:
.cover11__open{
transform: rotateX(10deg) rotateY(-180deg);
}
And then in the javascript:
var cover11 = document.querySelector('.cover11');
var book11= document.querySelector('.book11');
book11.addEventListener( 'click', function() {
cover11.classList.toggle('cover11__open');
});
The latter thing has worked on other occasions but it doesn't work here. I also tried something else found on the internet but nothing. Thanks.

You can try adding this to your css:
.book11 .cover11__open {
transform: rotateX(10deg) rotateY(-180deg);
}
.book11__open .page11 {
transform: rotateX(10deg) rotateY(-180deg);
z-index: 2;
}
.book11__open .page11:nth-child(2) {
transition-duration: 6s;
}
.book11__open .page11:nth-child(3) {
transition-duration: 5.6s;
}
.book11__open .page11:nth-child(4) {
transition-duration: 5.2s;
}
.book11__open .page11:nth-child(5) {
transition-duration: 4.8s;
}
.book11__open .page11:nth-child(6) {
transition-duration: 4.4s;
}
and keep every hover removes/commented there is no need for it
and add this too in the javascript instead of the current onclick
book11.addEventListener( 'click', function() {
cover11.classList.toggle('cover11__open');
book11.classList.toggle('book11__open')//this is the added line.
});
basically I just added the classes .cover11__open and .book11__open to the css with the properties given to the hover. now when clicking on the cover these two classes get added/removed. and great animation btw.

Circle that transforms to a box

i was wondering how to make a circle that transforms into a wider box in html/css.
I have tried this but it does not transform properly
If you guys have any ideas on how to make this, i would really appreaciate it very much thank you!
.circle{
width: 700px;
height:700px;
margin:0 auto;
background-color: #14b1e7;
animation-name: stretch;
animation-duration:6s;
animation-timing-function:ease-out;
animation-delay:0s;
animation-duration:alternate;
animation-iteration-count: 1;
animation-fill-mode:forwards;
animation-play-state: running;
opacity: 100%;
text-align: center;
text-shadow: 5px;
font-size: 60px;
font-weight: bold;
border-radius: 30px;
}
#keyframes stretch {
0%{
transform: scale(.1);
background-color:#14b1e7;
border-radius: 100%;
}
50%{
background-color: #14b1e7;
}
100%{
transform:scale(.7);
background-color: #14b1e7;
}
}

Here's a live example: https://codesandbox.io/s/interesting-https-yhtpoe?file=/src/styles.css
.circle {
width: 100px;
border-radius: 50%;
transition: all 1s;
}
.circle:hover {
border-radius: 0;
width: 200px;
}
In the example, the circle initially has 50% border-radius and 100px width. On hover, border-radius is set to 0 and width to 200px. Because of the transition property, the change is animated.
The transition: all 1s property makes every property change gradually and last for 1 second. Check the docs for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

You can simply change border-radius according to the keyframes.
.animation {
margin: 0 auto;
margin-top: 20px;
width: 100px;
height: 100px;
background-color: black;
border: 1px solid #337ab7;
border-radius: 100% 100% 100% 100%;
animation: circle-to-square 1s .83s infinite cubic-bezier(1,.015,.295,1.225) alternate;
}
#keyframes circle-to-square {
0% {
border-radius:100% 100% 100% 100%;
background:black;
}
25% {
border-radius:75% 75% 75% 75%;
background:black;
}
50% {
border-radius:50% 50% 50% 50%;
background:black;
}
75% {
border-radius:25% 25% 25% 25%;
background:black;
}
100% {
border-radius:0 0 0 0;
background:black;
}
<div class="container animated zoomIn">
<div class="row">
<div class="animation"></div>
</div>
</div>

CSS3 Creative Div Box Design | CSS Animation Effects

I was making a CSS box design. when I'm done I saw my website keep moving up and down at below, then I saw my background color had 2 but just a little at the bottom. when I try to delete coding #keyframes animate my website was stopping moving and down. can you help me
here my coding at CSS file
.square {
position: relative;
height: 400px;
width: 400px;
display: flex;
justify-content: center;
align-items: center;
}
.square span:nth-child(1) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid rgb(228, 43, 73);
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
transition: 0.5s;
animation: animate 6s linear infinite;
}
.square:hover span:nth-child(1) {
border: none;
background: rgb(233, 112, 132);
}
.square span:nth-child(2) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid rgb(228, 43, 73);
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
transition: 0.5s;
animation: animate 4s linear infinite;
}
.square:hover span:nth-child(2) {
border: none;
background: rgb(233, 112, 132);
}
.square span:nth-child(3) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid rgb(228, 43, 73);
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
transition: 0.5s;
animation: animate2 10s linear infinite;
}
.square:hover span:nth-child(3) {
border: none;
background: rgb(233, 112, 132);
}
#keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes animate2 {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
.content1 {
position: relative;
padding: 40px 60px;
color: black;
text-align: center;
transition: 0.5s;
z-index: 1000;
}
<div class="square">
<span></span>
<span></span>
<span></span>
<div class="content1">
<p>“My friend, Elizabeth Shealy, owns this one room spa and I left her little oasis just this morning. If you have ever spotted a coffee shop off the beaten track or a cafe in an unexpected area, you know the feeling of finding a gem that perhaps no
one else in the city knows about. Elizabeth’s nook is that sort of find. Its as if you’re in another part of the world-it has a different kind of feel.”</p>
</div>
</div>
I hope I can get feedback very soon for my assignment

for your case, best way is to control your width and height and reduce value of them or make a box and use overflow:hidden in parent div because borders that you set absolute position for them, they are bigger from your page.
NOTE:
if you want add more content below this code or you have content above it, use overflow-x:hidden for this div, if it dosen't work, use overflow-x:hidden for your body tag.
sorry for my grammar.
body{
/*overflow-x:hidden*/
}
.square{
position: relative;
height: 400px;
width: 400px;/*if using overflow-x for body set width to 100vw or if use overflow:hidden for .square set width to 400px*/
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.square span:nth-child(1){
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid rgb(228, 43, 73);
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
transition: 0.5s;
animation: animate 6s linear infinite ;
}
.square:hover span:nth-child(1){
border: none;
background: rgb(233, 112, 132);
}
.square span:nth-child(2){
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid rgb(228, 43, 73);
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
transition: 0.5s;
animation: animate 4s linear infinite;
}
.square:hover span:nth-child(2){
border: none;
background: rgb(233, 112, 132);
}
.square span:nth-child(3){
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid rgb(228, 43, 73);
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
transition: 0.5s;
animation: animate2 10s linear infinite;
}
.square:hover span:nth-child(3){
border: none;
background: rgb(233, 112, 132);
}
#keyframes animate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
#keyframes animate2{
0%{
transform: rotate(360deg);
}
100%{
transform: rotate(0deg);
}
}
.content1{
position: relative;
padding: 40px 60px;
color: black;
text-align: center;
transition: 0.5s;
z-index: 1000;
}
<div class="square">
<span></span>
<span></span>
<span></span>
<div class="content1">
<p>“My friend, Elizabeth Shealy, owns this one room spa and I left her little oasis just this morning.
If you have ever spotted a coffee shop off the beaten track or a cafe in an unexpected area, you
know the feeling of finding a gem that perhaps no one else in the city knows about. Elizabeth’s nook is
that sort of find. Its as if you’re in another part of the world-it has a different kind of feel.”</p>
</div>
</div>

Ball page loader animation

I was wondering if anyone knew how to make an object in this case my ball div appears like it is coming at the screen. Something that is sort of a 3D effect if that makes sense. My code is attached to the bottom.
var ballMotion = gsap.timeline();
ballMotion
.to(".circle", {duration: 3, transform: 'scale(14)'})
body {
width: 300px;
margin: 20px auto;
}
.circle {
display: block;
background: black;
border-radius: 100%;
height: 300px;
width: 300px;
margin: 0;
background: radial-gradient(circle at 100px 100px, #FE0, #FAFAD2);
}
<figure class="circle"></figure>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js"></script>

I see you are using gsap.js, I am unsure exactly how this is working but in pure css you can use transform-style: preserve-3d; and the use perspective() and translateZ() and the #keyframes. I am sure with knowledge of Green Sock you can getting this working. see code below:
CSS
.wrapper--outer {
display: flex;
justify-content: center;
position: relative;
margin: 0;
width: 100%;
height: 100%;
padding: 1px;
}
.snowman {
display: flex;
justify-content: center;
position: absolute;
top: 18vh;
height: 200px;
width: 200px;
}
.snowball {
width: 20px;
height: 20px;
border-radius: 10px;
background-color: blue;
position: absolute;
top: 10%;
left: 50%;
perspective: 550px;
transform-style: preserve-3d;
animation-name: snowball;
animation-duration: 2s;
animation-timing-function: ease-out;
animation-delay: 2s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
}
#keyframes snowball {
0% {
transform: perspective(550px) translateZ(200px);
}
100% {
transform: perspective(1000px) translateZ(999px);
}
}
<body>
<div class="wrapper--outer">
<div class="snowman">
<div class="snowball"></div>
</div>
</div>
</body>
JSBin
https://jsbin.com/ropomoquxu/edit?html,css,output

Multiple CSS animations: How to avoid re-triggering one of them?

I am trying to build an animated menu for mobile apps similar to Pinterest's radial menu. I have managed to get the behaviour to where I want it except for one minor detail: when the menu opens, the items shoot out as I want them to, and when you hover on them, they transform as I want them to. problem is, after the cursor leaves the items, they re-trigger their original animation, instead of just returning to their previous state. I realise this is a problem to do with the class being used for the animation and I have tried a number of solutions, including deleting the class and adding a new one .onmouseover() and changing animation running state on hover/mousover. I am probably missing something simple and idiotic, but I just cannot see it. can anybody help?
The following code is just the way I had it before trying to implement solutions.
HTML:
<!--Footer-->
<div class="footer">
<!--RADIAL NAV MENU-->
<div id="navContainer">
<!--Buttons-->
<div id="workouts" class="sml smlOne">Go there</div>
<div id="home" class="sml smlTwo">Go here</div>
<div id="profile" class="sml smlThree">Go somewhere</div>
<!--Burger-->
<div class="burger-menu">
<div id="top" class="bar barTop"></div>
<div id="middle" class="bar barMid"></div>
<div id="bottom" class="bar barBot"></div>
</div>
</div>
</div>
CSS:
.footer
{
position: fixed;
bottom: 0%;
width: 100%;
height: 50px;
background-color: #d36363;
box-shadow: 0px -6px 6px #888888;
z-index: +2;
}
/* Burger menu section */
#navContainer
{
text-align: center;
font-size: 10px;
}
.burger-menu
{
position: relative;
margin: auto;
height: 100%;
width: 50px;
}
.bar
{
height: 6px;
width: 100%;
background-color: white;
}
#top
{
position: relative;
top: 5px;
}
#middle
{
position: relative;
top: 15px;
}
#bottom
{
position: relative;
top: 25px;
}
.barTop, .barMid, .barBot
{
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.barTopOn
{
transform: rotate(45deg) translateY(12px) translateX(11px);
}
.barMidOn
{
opacity: 0;
}
.barBotOn
{
transform: rotate(-45deg) translateY(-12px) translateX(11px);
}
/* Navigation buttons section */
#navContainer
{
position: relative;
margin: auto;
width: 50px;
}
.sml
{
border: 2px solid #58a7dd;
height: 50px;
width: 50px;
border-radius: 50%;
background-color: white;
box-shadow: 6px 6px 6px #888888;
transform: scale(0);
}
#workouts
{
position: absolute;
bottom: 10px;
left: -60px;
}
#home
{
position: absolute;
bottom: 50px;
}
#profile
{
position: absolute;
bottom: 10px;
left: 60px;
}
.smlOnOne
{
animation: pop, slideOne 0.1s ease-in;
animation-fill-mode: forwards;
}
.smlOnTwo
{
animation: pop, slideTwo 0.1s ease-in;
animation-fill-mode: forwards;
}
.smlOnThree
{
animation: pop, slideThree 0.1s ease-in;
animation-fill-mode: forwards;
}
.smlOnOne:hover
{
background-color: red;
border: none;
box-shadow: 6px 10px 18px #686868;
animation: whopL 0.2s;
animation-fill-mode: forwards;
}
.smlOnTwo:hover
{
background-color: red;
border: none;
box-shadow: 6px 10px 18px #686868;
animation: whopC 0.2s;
animation-fill-mode: forwards;
}
.smlOnThree:hover
{
background-color: red;
border: none;
box-shadow: 6px 10px 18px #686868;
animation: whopR 0.2s;
animation-fill-mode: forwards;
}
#keyframes pop
{
100%
{
transform: scale(1,1);
}
}
#keyframes slideOne
{
0%
{
bottom: -20px;
left: 0px;
}
100%
{
bottom: 10px;
left: -60px;
}
}
#keyframes slideTwo
{
0%
{
bottom: -20px;
}
100%
{
bottom: 50px;
}
}
#keyframes slideThree
{
0%
{
bottom: -20px;
left: 0px;
}
100%
{
bottom: 10px;
left: 60px;
}
}
#keyframes whopL
{
0%
{
transform: scale(1,1) translateY(0px) translateX(0px);
}
100%
{
transform: scale(1.5) translateY(-10px) translateX(-10px);
}
}
#keyframes whopC
{
0%
{
transform: scale(1,1) translateY(0px) translateX(0px);
}
100%
{
transform: scale(1.5) translateY(-10px);
}
}
#keyframes whopR
{
0%
{
transform: scale(1,1) translateY(0px) translateX(0px);
}
100%
{
transform: scale(1.5) translateY(-10px) translateX(10px);
}
}
JS/jQuery:
$(".burger-menu").click(function()
{
$(".barTop").toggleClass("barTopOn");
$(".barMid").toggleClass("barMidOn");
$(".barBot").toggleClass("barBotOn");
$(".smlOne").toggleClass("smlOnOne");
$(".smlTwo").toggleClass("smlOnTwo");
$(".smlThree").toggleClass("smlOnThree");
});
Here is a working demo:
https://codepen.io/BGGrieco/pen/NgjxXq

You have an element that is a set of #-webkit-keyframes to animate in. On hamburger-menu click, these keyframes run, and that works well.
Next, you have a second set of #-webkit-keyframes on hover, so on hover works well too.
However, the instant the mouse is away from the element, the first (intro) set of keyframes gets run again. You don't want it to run after it first runs.
Here is what I was able to accomplish:
https://codepen.io/CapySloth/pen/RgxKEb
<div id="workouts" class="sml smlOne">
<div class="test1">
Go there
</div>
</div>
Instead of stacking classes which contain keyframe animations onto the one ".sml" class, I have split the task between two elements. ".sml" now acts as a wrapper which takes care of the "hamburger-menu open" animation and "test1 a" takes care of the "whop" animation.
If you can find a way to hide/show parents of the "test1 a/test2 a/test3 a" then you will have what you want.

You can use .stop() before your .toggleClass.
$("#example").stop().toggleClass("class");