How to use removeClass according to multiple conditions? - javascript

Can someone help me out with this animation? I have been trying to replicate this one. I got so close to completing it but just can't find a way to make the animation endless on every click. Huge, Thanks in advance!
Problem: After two clicks my animation transitioning of div elements away from the window does not seem to be working.
Expected Result: One every click the Background should transitioning into the window just like the reference from Instagram that I have linked you with.
Reference
Here is the Demo Link
<div class="bg">
<div id="blue" class="skew"></div>
<div id="red" class="skew"></div>
<div id="blue_2" class="skew"></div>
</div>
<button>Toggle</button>
$skew: skew(-10deg);
html,
body {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.bg {
position: relative;
background: red;
width: inherit;
height: inherit;
overflow: hidden;
}
.skew {
position: relative;
width: 100%;
height: inherit;
transform: translateX(-110%);
animation-fill-mode: forwards;
&.blue_wrapper {
background: blue;
animation: slideRight 1s forwards;
}
&.red_wrapper {
background: red;
animation: slideRight 1s forwards;
}
&::before,
&::after {
content: "";
position: absolute;
top: 0;
width: 250px;
height: inherit;
background: inherit;
transform: $skew;
}
&::before {
left: -5%;
}
&::after {
right: -5%;
}
}
#red,
#blue_2 {
position: absolute;
top: 0;
left: 0;
}
blue_2.blue_wrapper_2 {
background: blue;
animation: slideRight 1s forwards;
}
button {
position: fixed;
right: 30px;
bottom: 30px;
}
#keyframes slideRight {
from {
transform: translateX(-110%);
}
to {
transform: translateX(0);
}
}
$(document).ready(function() {
$("button").on("click", function() {
if (
$("#blue").hasClass("blue_wrapper")
) {
$("#red").addClass("red_wrapper");
} else if (
$("#blue").hasClass("skew blue_wrapper") &&
$("#red").hasClass("skew red_wrapper")
) {
$("skew red_wrapper").removeClass("red_wrapper");
$("skew blue_wrapper").removeClass("blue_wrapper");
$("blue_2").addClass("blue_wrapper_2");
} else if {
$("#blue_2").hasClass("blue_wrapper_2")
) {
$("#red").removeClass("red_wrapper");
$("#blue").removeClass("blue_wrapper");
} else {
$("#blue").addClass("blue_wrapper");
}
});
});


You logic makes no sense for
else if (
$("#blue").hasClass("") +
$("#red").hasClass("") +
$("#blue_2").hasClass("blue_wrapper_2")
) {
$("#red").removeClass("red_wrapper");
$("#blue").removeClass("blue_wrapper");
In the above you are checking if the classes have no class then removing the class that is lnt there.
Also you are using + when I assume you meant && or ||


Your Demo link isn't working because you aren't removing the blue Wrapper or red wrapper, this will get the demo to work:
$(document).ready(function() {
$("button").on("click", function() {
if ($("#blue").hasClass("blue_wrapper")) {
$("#red").addClass("red_wrapper");
$("#blue").removeClass("blue_wrapper");
} else {
$("#blue").addClass("blue_wrapper");
$("#red").removeClass("red_wrapper");
}
});
});
For your regular code, you should replace + with && or || as needed, and remove wrappers that you add.


Some syntax issues, some selector issues. Compiled the CSS to test. Removed one odd CSS thing that would not compile. Note I modified to use lime to start to better illustrate.
$(function() {
$("button.toggle").on("click", function() {
if (
$("#blue").hasClass("blue_wrapper") && !$("#red").hasClass("red_wrapper")
) {
$("#red").addClass("red_wrapper");
} else if (
$("#blue").hasClass("blue_wrapper") &&
$("#red").hasClass("red_wrapper")
) {
$(".red_wrapper").removeClass("red_wrapper");
$(".blue_wrapper").removeClass("blue_wrapper");
$("#blue_2").addClass("blue_wrapper_2");
} else if (
$("#blue_2").hasClass("blue_wrapper_2")
) {
$("#red").removeClass("red_wrapper");
$("#blue").removeClass("blue_wrapper");
$("#blue_2").removeClass("blue_wrapper_2")
} else {
$("#blue").addClass("blue_wrapper");
}
});
});
.skew {
transform: skew(-10deg);
}
html,
body {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.bg {
position: relative;
background: lime;
width: inherit;
height: inherit;
overflow: hidden;
}
.skew {
position: relative;
width: 100%;
height: inherit;
transform: translateX(-110%);
animation-fill-mode: forwards;
}
.skew.blue_wrapper {
background: blue;
animation: slideRight 1s forwards;
}
.skew.red_wrapper {
background: red;
animation: slideRight 1s forwards;
}
.skew::before,
.skew::after {
content: "";
position: absolute;
top: 0;
width: 250px;
height: inherit;
background: inherit;
transform: $skew;
}
.skew::before {
left: -5%;
}
.skew::after {
right: -5%;
}
#red,
#blue_2 {
position: absolute;
top: 0;
left: 0;
}
#blue_2.blue_wrapper_2 {
background: blue;
animation: slideRight 1s forwards;
}
button {
position: fixed;
right: 30px;
bottom: 30px;
}
#keyframes slideRight {
from {
transform: translateX(-110%);
}
to {
transform: translateX(0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="bg">
<div id="blue" class="skew">blue</div>
<div id="red" class="skew">red</div>
<div id="blue_2" class="skew">blue_2</div>
</div>
<button class="toggle">Toggle</button>

Related

How to add random position of image in css by the x

I need to make a random position of image ".block" and make the auto reset of function when it flies down. Big thanks to everybody who will help. :)
var player = document.getElementById("player");
var block = document.getElementById("block");
function goleft(argument) {
player.classList.add("animatel");
setTimeout(function() {
player.classList.remove("animatel");
}, 1);
console.log("left");
}
function goright(argument) {
player.classList.add("animater");
console.log("right");
}
body {
background-color: lightblue;
}
.player {
height: 50px;
width: 50px;
position: relative;
top: 450px;
}
.block {
height: 30px;
width: 30px;
position: relative;
top: -50px;
animation: block 1s infinite linear;
}
#game {
width: 500px;
height: 500px;
border: 2px solid black;
}
#keyframes block {
0% {
top: -50;
}
100% {
top: 420;
}
}
#keyframes gor {
0% {
left: 0px;
}
50% {
left: 450px;
}
100% {
left: 0px;
}
}
#keyframes gol {
0% {
right: 450px;
}
50% {
right: 0px;
}
100% {
right: 450px;
}
}
.animater {
animation: gor 1s;
position: relative;
}
.animatel {
animation: gol 1s;
position: relative;
}
<body>
<div id="game">
<div id="player"><img class="player" src="https://via.placeholder.com/50" alt="player box"></div>
<div id="block"><img class="block" src="https://via.placeholder.com/80" alt="bogdan"></div>
<button onclick="goleft()">left</button>
<button onclick="goright()">right</button>
<script type="text/javascript" src="script.js"></script>
</div>
</body>

how to make an element stay in place when position changes from absolute to fixed

I have this button that on click reveals and expands a div element using a css transition, giving the illusion that the button itself expands. In order to have the div positioned on top of the button i set it to position: absolute but when open needs to be position: fixed. The problem i have with this is that when it switches between absolute to fixed it moves ruining the expantion effect. Here is the jsfiddle to my example.
function big() {
document.getElementById("content").classList.add('show');
document.getElementById("content").classList.add('bigger');
document.getElementById("content").classList.add('position');
}
function small() {
document.getElementById("content").classList.remove('bigger');
document.getElementById("content").classList.remove('position');
setTimeout(() => {
document.getElementById("content").classList.remove("show");
}, 1000);
document.getElementById("testo").classList.remove('show');
document.getElementById("close").classList.remove('show');
}
function delayed() {
setTimeout(function() {
document.getElementById("testo").classList.add('show');
}, 1100);
setTimeout(function() {
document.getElementById("close").classList.add('show');
}, 1100);
}
.button {
position: relative;
width: 100%;
height: 100%;
}
.button>button {
position: absolute;
left: 50vw;
top: 50vw;
color: white;
background-color: pink;
border: none;
padding: 30px;
cursor: pointer;
}
.button>button:hover {
background-color: purple;
}
.fixed {
position: absolute;
background-color: pink;
left: 50vw;
top: 50vw;
text-align: center;
width: 100px;
height: 75px;
transition: width 1s, height 1s, left 1s, top 1s, position 1s;
}
.position {
position: fixed;
}
.hidden {
visibility: hidden;
}
.show {
visibility: visible!important;
}
.bigger {
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.close {
border: none;
visibility: hidden;
background-color: red;
position: absolute;
top: 5px;
right: 5px;
color: white;
cursor: pointer;
}
.close:hover {
background-color: yellow;
color: black;
}
#testo {
visibility: hidden;
}
body {
height: 1000px;
}
<div class="button">
<button onclick="big(); delayed()">expand</button>
<div id="content" class="fixed hidden">
<p id="testo">just testing this thing</p>
<button id="close" class="close" onclick="small()">X</button>
</div>
</div>

You can set an opacity or a transform: translate() on the .button parent container to make a fixed position child relative to the parent vs. the root of the document.
Doing this should give you the effect you're looking for.
function big() {
document.getElementById("content").classList.add('show');
document.getElementById("content").classList.add('bigger');
document.getElementById("content").classList.add('position');
}
function small() {
document.getElementById("content").classList.remove('bigger');
document.getElementById("content").classList.remove('position');
setTimeout(() => {
document.getElementById("content").classList.remove("show");
}, 1000);
document.getElementById("testo").classList.remove('show');
document.getElementById("close").classList.remove('show');
}
function delayed() {
setTimeout(function() {
document.getElementById("testo").classList.add('show');
}, 1100);
setTimeout(function() {
document.getElementById("close").classList.add('show');
}, 1100);
}
html,body {
width: 100%;
height: 100%;
}
.button {
position: relative;
/* opacity: 1; */
transform: translate(0, 0);
width: 100%;
height: 100%;
}
.button > button {
position: fixed;
left: 50%;
top: 50%;
color: white;
background-color: pink;
border: none;
padding: 30px;
cursor: pointer;
transform: translate(-50%, -50%);
}
.button > button:hover {
background-color: purple;
}
.fixed {
position: absolute;
background-color: pink;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 100px;
height: 75px;
transition: width 1s, height 1s, left 1s, top 1s, position 1s;
}
.position {
position: fixed;
}
.hidden {
visibility: hidden;
}
.show {
visibility: visible !important;
}
.bigger {
width: 100%;
height: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.close {
border: none;
visibility: hidden;
background-color: red;
position: absolute;
top: 5px;
right: 5px;
color: white;
cursor: pointer;
}
.close:hover {
background-color: yellow;
color: black;
}
#testo {
visibility: hidden;
}
<div class="button">
<button onclick="big(); delayed()">expand</button>
<div id="content" class="fixed hidden">
<p id="testo">just testing this thing</p>
<button id="close" class="close" onclick="small()">X</button>
</div>
</div>

you can place fixed position to content after your animation is done
so your animation effect wont ruin . i have edited your fiddle see if this works as you like
edited fiddle
function big() {
document.getElementById("content").classList.add('show');
document.getElementById("content").classList.add('bigger');
setTimeout(function(){
document.getElementById("content").classList.add('position');
},1000)
}
function small() {
document.getElementById("content").classList.remove('bigger');
document.getElementById("content").classList.remove('position');
setTimeout(()=>{
document.getElementById("content").classList.remove("show");
}, 1000);
document.getElementById("testo").classList.remove('show');
document.getElementById("close").classList.remove('show');
}
function delayed() {
setTimeout(function(){document.getElementById("testo").classList.add('show');},1100);
setTimeout(function(){document.getElementById("close").classList.add('show');},1100);
}

anchors overlaying and not properly changing color, because not fully clickable

I'm trying to change the color every image on click but they are not properly selectable because of overlying each other with positioning and z-index...
code is working as you can check by clicking on top right corner it change color...tried different methods of CSS, not JavaScript... newbie in JavaScript.
body,div,p,h1,h2,h3,h4,h5,h6,span {
margin: 0;
}
div.nav {
height: 100px;
width: 100%;
padding: 20px 0;
background-color: #615d5d;
text-align: center;
}
.screens_wrap {
display: inline-block;
margin: 0 auto;
height: 100%;
position: relative;
}
.screen_inner {
position: relative;
height: 100%;
margin: 0 auto;
width: 150px;
}
.screen {
position: absolute;
width:100px;
height: 58px;
border: 3px solid #aeaeae;
}
/* transparent style -------------------------------------------------------------------*/
.nav .screen.screen1 {
bottom: 0;
left: 0;
z-index: 3;
background-color: #00ad63;
}
.nav a .screen.screen2 {
bottom: 15px;
left: 15px;
z-index: 2;
background-color: transparent;
}
.nav a .screen.screen2:hover{
background-color: #4f025a;
}
.nav .screen.screen3 {
bottom: 30px;
left: 30px;
z-index: 1;
background-color: transparent;
}
.nav .screen.screen3:hover{
background-color: #ffec36;
}
.nav .screen2:hover, .screen3:hover {
-webkit-animation-name: hover;
-webkit-animation-duration: 1s;
animation-name: hover;
animation-duration: 4s;
-webkit-animation-fill-mode: forwards;
opacity: 1;
width: 100px;
}
.nav.nav6 {
height: 200px;
}
.screen_inner a.screenanchors:first-child img {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.screen_inner a.screenanchors:nth-child(2) img{
position: absolute;
left: 20px;
top: 20px;
z-index: 2;
}
.screen_inner a.screenanchors:nth-child(3) img{
position: absolute;
left: 40px;
top: 40px;
z-index: 3;
}
.screenanchors img {
overflow: hidden;
}
#keyframes spinning {
from {
transform: translateZ(-5em) rotateY(0deg);
}
to {
transform: translateZ(-5em) rotateY(180deg);
}
}
#keyframes skewing {
from {
transform: translateZ(-5em) skew(-3deg, -25deg);
}
to {
transform: translateZ(-5em) skew(-3deg, 0deg);
width: 100%;
height: 100px;
z-index: 9999999;
bottom: 0;
}
}
/* Standard syntax */
#keyframes hover {
0% {
margin-bottom:+10px;
bottom: unset;
}
100% {
margin-bottom:+10px;
bottom: unset;
}
}
<div class="nav nav6" style="margin-top: 25px;">
<div class="screens_wrap">
<div class="screen_inner">
<img id="imgName" src="https://imageshack.com/i/plylrZh4p" onclick="changeSrc()" width="100px">
<img id="imgName1" src="https://imageshack.com/i/pljaZE0Gp" onclick="changeSrc1()" width="100px">
<img id="imgName2" src="https://imageshack.com/i/plm9slyTp" onclick="changeSrc2()" width="100px">
</div>
</div>
</div>
<script>
function changeSrc(){
document.getElementById("imgName").src="https://imageshack.com/i/plm9slyTp";
document.getElementById("imgName1").src="https://imageshack.com/i/plylrZh4p";
document.getElementById("imgName2").src="https://imageshack.com/i/pljaZE0Gp";
}
function changeSrc1(){
document.getElementById("imgName").src="https://imageshack.com/i/pljaZE0Gp";
document.getElementById("imgName1").src="https://imageshack.com/i/plm9slyTp";
document.getElementById("imgName2").src="https://imageshack.com/i/plylrZh4p";
}
function changeSrc2(){
document.getElementById("imgName").src="https://imageshack.com/i/plylrZh4p";
document.getElementById("imgName1").src="https://imageshack.com/i/pljaZE0Gp";
document.getElementById("imgName2").src="https://imageshack.com/i/plm9slyTp";
}
</script>
it should work by clicking every where on single image, no overlay effecting clickable space...

Just to Help out others, I fixed the issue using area mapping...

Hide and show same element on click with javascript [duplicate]

This question already has answers here:
How to create javascript delay function [duplicate]
(3 answers)
What is the JavaScript version of sleep()?
(91 answers)
Closed 4 years ago.
I am trying to get a bar to hide and then show again in one click. Do I need to put some kind of time out when re-adding the class?
var button = document.querySelector('.btn');
button.addEventListener('click', function() {
document.querySelector('.bar').classList.remove('animateBar');
document.querySelector('.bar').classList.add('animateBar');
});
* {
padding: 0;
margin: 0;
}
.wrap {
width: 100%;
height: 100vh;
overflow: hidden;
position: relative
}
.bar {
position: absolute;
bottom: 0;
height: 100px;
width: 100%;
background-color: black;
transform: translateY(100%);
transition: transform 1s;
}
.animateBar {
transform: translateY(0);
transition: transform 1s;
}
.btn {
position: relative;
display: block;
text-align: center;
cursor: pointer;
}
<div class="wrap">
<div class="bar animateBar"></div>
<div class="btn">hide/show</div>
</div>

use setTimeout() between removing and adding the class
var button = document.querySelector('.btn');
button.addEventListener('click', function() {
document.querySelector('.bar').classList.remove('animateBar');
setTimeout(function(){
document.querySelector('.bar').classList.add('animateBar');
}, 1000);
});
* {
padding: 0;
margin: 0;
}
.wrap {
width: 100%;
height: 100vh;
overflow: hidden;
position: relative
}
.bar {
position: absolute;
bottom: 0;
height: 100px;
width: 100%;
background-color: black;
transform: translateY(100%);
transition: transform 1s;
}
.animateBar {
transform: translateY(0);
transition: transform 1s;
}
.btn {
position: relative;
display: block;
text-align: center;
cursor: pointer;
}
<div class="wrap">
<div class="bar animateBar"></div>
<div class="btn">hide/show</div>
</div>

Yes you need to use setTimeout with a delay. Try the following.
var button = document.querySelector('.btn');
button.addEventListener('click', function() {
document.querySelector('.bar').classList.remove('animateBar');
setTimeout(() => {
document.querySelector('.bar').classList.add('animateBar');
}, 800);
});
* {
padding: 0;
margin: 0;
}
.wrap {
width: 100%;
height: 100vh;
overflow: hidden;
position: relative
}
.bar {
position: absolute;
bottom: 0;
height: 100px;
width: 100%;
background-color: black;
transform: translateY(100%);
transition: transform 1s;
}
.animateBar {
transform: translateY(0);
transition: transform 1s;
}
.btn {
position: relative;
display: block;
text-align: center;
cursor: pointer;
}
<div class="wrap">
<div class="bar animateBar"></div>
<div class="btn">hide/show</div>
</div>

var button = document.querySelector('.btn');
button.addEventListener('click', function() {
document.querySelector('.bar').classList.remove('animateBar');
setTimeout(() => {
document.querySelector('.bar').classList.add('animateBar');
}, 1000);
});
This should work

Animate divs(off screen) to a position with CSS

When you get in to the site I want some divs animating(offscreen) to a position. I found something like this :
$( document ).ready(function() {
$('.box-wrapper').each(function(index, element) {
setTimeout(function(){
element.classList.remove('loading');
}, index * 500);
});
});
body {
overflow-x: hidden;
}
.box-wrapper {
-webkit-transition-duration: 600ms;
transition-duration: 600ms;
}
.box-wrapper.loading:nth-child(odd) {
transform: translate(100%);
-webkit-transform: translate(100%);
}
.box-wrapper.loading:nth-child(even) {
transform: translate(-100%);
-webkit-transform: translate(-100%);
}
.box-wrapper.loading:nth-child(?) {
transform: translate(-100%);
-webkit-transform: translate(-100%);
}
.box-wrapper:nth-child(odd) #box1 {
}
.box-wrapper:nth-child(even) #box2 {
}
.box-wrapper:nth-child(?) #box3 {
}
#box1 {
position: relative;
display: block;
margin: auto;
width: 100px;
height: 100px;
background-color: aqua;
}
#box2 {
position: relative;
display: block;
left:200px;
width: 200px;
height: 150px;
background-color: aqua;
}
#box3 {
position: relative;
display: block;
left:400px;
width: 600px;
height: 150px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="box-wrapper loading"><div id="box1"></div></div>
<div class="box-wrapper loading"><div id="box2"></div></div>
<div class="box-wrapper loading"><div id="box3"></div></div>
It works but I want to control over each box with different animations. But I don't know how. If I replace the "?" with "box3" or something it doesnt work. It has to be "even" or "odd" but I want a different animation.
Thanks!

Use this.
$(document).ready(function () {
var typeAnimation = ["style1", "style2"];
$('.box-wrapper').each(function (index, element) {
setTimeout(function () {
var animClassName = typeAnimation[Math.random(typeAnimation.length)];
element.classList.remove(animClassName);
}, index * 500);
});
});

Categories