I want to create a L shape with lines (div element). I also want to animate it. The problem is that when I try to rotate it (using transform rotate), the whole line gets rotated. How do I get it done? Can anyone help? Below is the code snippet. How do I make it a L.
.line {
width: 100px;
background: #ff0000;
animation: animate-line 2s;
height: 2px;
}
#keyframes animate-line {
0% {
width: 50px;
}
100% {
width: 300px;
}
}
<div class="line"></div>
Simply without using JS or an SVG image you can animate the elements width and height and use borders
.line {
position: absolute;
width: 0px;
height: 0px;
background: transprent;
border-top: 2px solid red;
border-right: 2px solid red;
animation: animate-line 2s linear forwards;
}
#keyframes animate-line {
0% {
width: 50px;
height: 0px;
}
50% {
width: 300px;
height: 0px;
}
100% {
width: 300px;
height: 300px;
}
}
<div class="line"></div>
If that isn't what you wanted please provide an image with an example.
Related
So I have a door animation using vanilla JS with CSS for the styling. Is there a way to hid the backside of the door when it's open?
As well as making the door not clickable. (I don't have it as toggle, but you can still interact with the button.)
Basically I just want a back background and not see the backwards "1" when the door is open.
Any ideas on how to make that happen? I imagine it's adding another div with style, but I really am not sure after goofing around with this for a while.
Cheers!
Codepen here: https://codepen.io/LovelyAndy/pen/LYZKEvB
HTML:
<div>
<div class="door-back">
<button class="door">1</button>
</div>
</div>
CSS
.door-back {
position: relative;
height: 105px;
width: 105px;
background-image: url("https://i.redd.it/e84gxikhoul21.jpg");
border-radius: 50px;
background-size: cover;
margin: 0 auto;
margin-top:50px;
}
.door {
position: absolute;
height: 105px;
width: 105px;
font-size: 1.5em;
color: white;
border: 2px solid goldenrod;
border-radius: 50px;
background: black;
cursor: pointer;
transform-origin: left;
transition: all 0.5s ease-in-out;
}
.doorOpen {
transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px)
rotateY(-150deg);
}
.d1 {
top: 100px;
left: 60px;
}
JS
const doorEl = document.querySelector(".door");
doorEl.addEventListener('click', openTheDoor)
function openTheDoor() {
doorEl.classList.add("doorOpen");
}
Possible solution: change the text color on transition:
const doorEl = document.querySelector(".door");
doorEl.addEventListener('click', openTheDoor)
function openTheDoor() {
doorEl.classList.toggle("doorOpen");
}
.door-back {
position: relative;
height: 105px;
width: 105px;
background-image: url("https://i.redd.it/e84gxikhoul21.jpg");
border-radius: 50px;
background-size: cover;
margin: 0 auto;
margin-top: 50px;
}
.door {
position: absolute;
height: 105px;
width: 105px;
font-size: 1.5em;
color: white;
border: 2px solid goldenrod;
border-radius: 50px;
background: black;
cursor: pointer;
transform-origin: left;
transition: transform .5s ease-in-out,
color 0s .3s linear
}
.doorOpen {
transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px) rotateY(-150deg);
color:black;
}
.d1 {
top: 100px;
left: 60px;
}
<div>
<div class="door-back">
<button class="door">1</button>
</div>
</div>
You can achieve both disable the click on door button and not to show the '1' after the door is open in CSS.
.doorOpen {
...other css
// you just need add this property which disables click
pointer-events: none;
color: black;
}
Making the text color black will make it complete black.
If you completely want to remove the text '1' then you can do like below.
const doorEl = document.querySelector(".door");
doorEl.addEventListener('click', openTheDoor)
function openTheDoor() {
doorEl.classList.add("doorOpen");
doorEl.textContent='';
}
These are two ways I can think of.
You can try to do something like this https://codepen.io/dom-the-dev/pen/MWeqaJq just have a button on the opposite side that acts like the back of the door
<div>
<div class="door-back">
<button class="door front">1</button>
<button class="door back">2</button>
</div>
I'm learning jQuery, testing its functionality, and have some problem with an example I made.
https://codepen.io/MaxVelichkin/pen/pBJeZy
/*remove animate2 class and assign animate1 class to target*/
$(function() {
$('#trigger').on('click', function() {
$('#target').removeClass('animate2');
$('#target').addClass('animate1');
});
});
/*remove animate1 class and assign animate2 class to target*/
$(function() {
$('#trigger2').on('click', function() {
$('#target').removeClass('animate1');
$('#target').addClass('animate2');
});
});
/*just a container around*/
#container {
margin: 10px;
width: 350px;
height: 350px;
border: solid green 1px;
}
/*green button*/
#trigger {
width: 50px;
height: 50px;
border-radius: 100%;
background-color: green;
margin: 20px auto;
}
/*red button*/
#trigger2 {
width: 50px;
height: 50px;
border-radius: 100%;
background-color: red;
margin: 20px auto;
}
/*Target div which will be changing*/
#target {
width: 100px;
height: 100px;
border: solid blue 1px;
margin: 10px auto;
}
/*Keyframes for green button*/
#keyframes myfirst {
0% {
background: white;
width: 100px;
height: 100px;
border-radius: 0%;
}
100% {
background: blue;
width: 150px;
border-radius: 100%;
}
}
/*Keyframes for red button*/
#keyframes mysecond {
0% {
background: blue;
width: 150px;
border-radius: 100%;
}
100% {
background: white;
width: 100px;
height: 100px;
border-radius: 0%;
}
}
/*cusstom class to be assigned by green button*/
.animate1 {
-webkit-animation: myfirst 3s;
animation: myfirst 3s;
height: 100px;
background: blue;
width: 150px;
border-radius: 100%;
margin: 10px auto;
}
/*cusstom class to be assigned by red button*/
.animate2 {
-webkit-animation: mysecond 3s;
animation: mysecond 3s;
height: 100px;
width: 150px;
border: solid red 1px;
border-radius: 0%;
margin: 10px auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="trigger"></div>
<div id="trigger2"></div>
<div id="target"></div>
</div>
There are:
2 buttons, green and red.
2 sets of keyframes.
2 custom classes which start the animation of corresponding keyframes and applies the styles from the last keyframe.
target div, which style I want to change on button click.
When I click on the button, it assigns a class to the target div and removes the class, assigned by another button.
Question 1: Why the width of the target div is changing back to 100px after the green button animation ends (why it doesn't remain 150px)?
Question 2: Do I do everything right or there is a better jQuery approach?
Your #target is taking precedence since it is a id selector. This has a width of 100px. Your class animate1 is getting overwritten, so that's why you aren't seeing 150px.
you can code like this animation: myfirst 3s forwords;
I made a div with some class and height 0px and on clicking something, I run classList.add to add the class where height is 150px (popup). When the function adds the class, div is supposed to make an animation from height: 0px to height: 150px.
Can someone tell me why this isn't working?
function issPopup() {
var ist = document.getElementById("ist");
iss.classList.toggle("istopen");
}
#keyframes isani1 {
from {
height: 0px;
}
to {
height: 130px;
}
}
#-webkit-keyframes isani1 {
from {
height: 0px;
}
to {
height: 130px;
}
}
.inputsubmittextdiv.istopen {
width: 100%;
height: auto;
min-height: 130px;
float: left;
-webkit-animation: isani1 1s;
animation: isani1 1s;
}
.inputsubmittextdiv {
width: 100%;
height: 0px;
min-height: 0px;
float: left;
overflow: hidden;
}
<div id="ist" class="inputsubmittextdiv">
</div>
You can simply do something like the following:
function addClass(elem) {
elem.classList.add('istopen');
}
//here are you are basically telling your onCLick event to add the .istopen class whenever "something" is clicked.
//you can do the same when you hover over something etc.
.istopen {
width: 100%;
height: auto;
min-height: 130px;
float: left;
-webkit-animation: isani1 1s;
animation: isani1 1s;
background: red;
}
<div id="ist" onclick="addClass(this)"> Something
</div>
Could anybody, please, explain how to change the transition-property of the collapsing element in a standard bootstrap-3 navbar? I want the transition to be something like this, but with the 'top' property when clicked on the hamburger menu: http://jsfiddle.net/2vLjU/1/
<div class="wrapper">
<img id="slide" src="http://lorempixel.com/output/cats-q-c-100-100-4.jpg" />
</div>
.wrapper {
position: relative;
overflow: hidden;
width: 100px;
height: 100px;
border: 1px solid black;
}
#slide {
position: absolute;
left: -100px;
width: 100px;
height: 100px;
background: blue;
transition: 1s;
}
.wrapper:hover #slide {
transition: 1s;
left: 0;
}
Please see this following example i made here:
http://jsfiddle.net/f5jzo25t/
I used css3 ':target' that worked well with 'a' elements.
img:target {
left: 0;
transition: 1s;
}
You can read more about it:
https://www.w3schools.com/cssref/sel_target.asp
Hope that will help you
I want a script/css such that on hovering a image which is taller than the container it is in will auto scroll inside the container and will come back to its original position on hover out.
I am really bad at javascript still I have found a code for this but it does not seem to work.
The HTML
<span class="keymel dhiraj">
<img width="300px" height="auto" src="http://dribbble.s3.amazonaws.com/users/197532/screenshots/1145931/freebie-1.png" style="top: 0px" /></span>
The CSS
.keymel {
border-radius: 5px 5px 5px 5px;
float: left;
height: 80px;
margin-left: 3px;
overflow: hidden;
position: relative;
width: 300px;
border:5px solid #DDD;}
img {
position: absolute;
transition: top 1s ease-out 0s;}
The JS
$( document ).ready(function() {
var xH
$('.dhiraj').hover(
function() {
xH = $(this).children("img").css("height");
xH = parseInt(xH);
xH = xH - 150;
xH = "-" + xH + "px";
$(this).children( "img" ).css("top",xH);
}, function() {
$(this).children( "img" ).css("top","0px");
}
);
});
I have created a small example in Jsfiddle at http://jsfiddle.net/VuTYx/1/
Please help me out.
Not Need Jquery Only By Css
see this link
Css only :
.komal {
border-radius: 5px 5px 5px 5px;
float: left;
height: 80px;
margin-left: 3px;
overflow: hidden;
position: relative;
width: 300px;
border:5px solid #DDD;
}
img {
position: absolute;
transition: all 0.2s ease 0s;
}
.komal:hover >img
{
-moz-animation: border-bounce 3000ms linear;
-webkit-animation: border-bounce 3000ms linear;
}
#-moz-keyframes border-bounce {
0% { margin-top: -10px; }
25% { margin-top: -50px; }
50% { margin-top: -100px; }
75% { margin-top: -50px; }
100% { margin-top: -0px; }
}
#-webkit-keyframes border-bounce {
0% { margin-top: -10px; }
25% { margin-top: -50px; }
50% { margin-top: -100px; }
75% { margin-top: -50px; }
100% { margin-top: -0px; }
}
Your JS appears to have been working, but the code included jQuery while the Fiddle didn't have jQuery enabled. I enabled jQuery and it seems to work as you described: http://jsfiddle.net/VuTYx/2/
Make sure that jQuery is correctly included in your project by adding something like:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>