I am trying to add Fill animation from bottom to top of the box .box-inner-1 but CSS Rotate is not working properly!
$('.box-inner-1').css({
top: '0'
}).animate({
"height": 260
}, 4000);
.wrapper {
position: relative;
height: 260px;
width: 260px;
padding: 0px !important;
background: #ddd;
}
.box-inner-1 {
position: absolute;
height: 0px;
left: 0;
right: 0;
background-color: greenyellow;
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="box-inner-1"></div>
</div>
You can get the box to animate from the bottom to top by changing top: '0' to bottom: '0'.
$('.box-inner-1').css({
bottom: '0'
}).animate({
"height": 260
}, 4000);
.wrapper {
position: relative;
height: 260px;
width: 260px;
padding: 0px !important;
background: #ddd;
}
.box-inner-1 {
position: absolute;
height: 0px;
left: 0;
right: 0;
background-color: greenyellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="box-inner-1"></div>
</div>
Check transform-origin : center
In fact it is rotated, but right from the beginning - see my snippet, where I added some content to that DIV which is displayed upside down. Not sure what you expact - the rotation isn't animated, in case you expacted that - you don't set that anywhere (?)
$('.box-inner-1').css({
top: '0'
}).animate({
"height": 260
}, 4000);
.wrapper {
position: relative;
height: 260px;
width: 260px;
padding: 0px !important;
background: #ddd;
}
.box-inner-1 {
position: absolute;
height: 0px;
left: 0;
right: 0;
background-color: greenyellow;
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="box-inner-1">look here</div>
</div>
Related
I'm trying to learn to how to create something similar to this animation:
https://dribbble.com/shots/5311359-Diprella-Login
So currently the issue i have is when the "Green" or "Blue" in my case expands > moves > shrinks i cant get the same effect with using "Width" because it shrinks from right side, where i want it to shrink from left side after it moves.
Attaching my CodePen:
https://codepen.io/MariusZMM/pen/jJWebK
JS used:
var start = anime.timeline({
easing: 'easeInOutSine',
autoplay: false
});
start
.add({
targets: '.square',
width: 600,
duration: 500
})
.add(
{
targets: '.square',
translateX: 400,
duration: 500
},
'-=100'
)
.add({
targets: '.square',
width: 400,
duration: 500
});
document.querySelector('.btn').onclick = function() {
start.play();
if (start.began) {
start.reverse();
}
};
I have also tried using Padding but i think AnimeJS does not like the values 0 0 0 300px
Here's a CSS only version of the animation.
I'm using a visually hidden checkbox, the button is a label which controls the checkbox, and the CSS animations are being toggled on check state.
Only thing is that it does the initial animation in reverse on load.
Edit: I actually fixed this with a slight tweak to the CSS (:not(indeterminate)) and an additional piece of JS on load that sets the checkbox to indeterminate.
const checkbox = document.getElementById('sign-in-state');
checkbox.indeterminate = true;
#keyframes login {
0% {
left: 0;
width: 40%;
}
50% {
width: 60%;
}
100% {
left: 60%;
width: 40%;
}
}
#keyframes logout {
0% {
left: 60%;
width: 40%;
}
50% {
width: 60%;
}
100% {
left: 0%;
width: 40%;
}
}
.sign-in-checkbox:not(:indeterminate):not(:checked) + .box .square {
--animation-name: login;
}
.sign-in-checkbox:not(:indeterminate):checked + .box .square {
--animation-name: logout forwards;
}
.window {
position: absolute;
width: 100%;
height: 100%;
background: #c73030;
z-index: 9999;
}
.box {
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
transform: translate(-50%, -50%);
width: 100vw;
height: 100vh;
background-color: #f7986c;
z-index: -999;
}
.square {
animation: var(--animation-name) 600ms reverse ease-in-out;
position: absolute;
right: auto;
top: 0;
width: 40%;
height: 100%;
background-color: cornflowerblue;
}
.btn {
display: flex;
align-items: center;
justify-content: center;
color: white;
font-family: sans-serif;
position: absolute;
width: 200px;
height: 70px;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
background: #444;
}
.visually-hidden { /* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
position: absolute !important;
height: 1px; width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
<input type="checkbox" id="sign-in-state" class="visually-hidden sign-in-checkbox">
<div class="box">
<div class="square">
<label class="btn" for="sign-in-state">
<div class="sI">Sign In</div>
</label>
</div>
</div>
Check this out:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.window {
position: absolute;
width: 100%;
height: 100%;
background: #c73030;
z-index: 9999;
}
#box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 1000px;
height: 500px;
background-color: #f7986c;
z-index: -999;
}
#square {
position: absolute;
top: 0;
width: 400px;
height: 100%;
background-color: cornflowerblue;
}
#btn {
position: absolute;
width: 300px;
height: 70px;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
background: #444;
}
</style>
</head>
<body>
<div id="box">
<div id="square">
<button id="btn">
<div id="sI">Sign In</div>
</button>
</div>
</div>
<script>
var animated = false;
function animate() {
$('#square').animate({
width: '600',
right: '0'
}, 300, 'swing');
$('#square').animate({
width: '400'
}, 300, 'swing');
$('#square').css("left", "");
animated = true;
}
function reverseAnimate() {
$('#square').animate({
width: '600',
left: '0'
}, 300, 'swing');
$('#square').animate({
width: '400'
}, 300, 'swing');
$('#square').css("right", "");
animated = false;
}
$('#btn').click(function() {
if (!animated) { //If it has not been animated, animate!
animate();
} else {
reverseAnimate();
}
});
</script>
</body>
</html>
I used jQuery and changed a few things to look a bit more like the example. Also, I liked your use of .reverse() but I didn't use it in my case.
I created the circle with css and html and I want to have it repeat across the x-dimension of the browser (trying to replicate the image shown below). I know there's background-image: x-repeat, but this isn't a background image, so I cant use that and there will also be content inside the circle. I was originally trying to create 9 circles, then absolutely position them, but I realized that it may not be the best way and won't work if the browser shrinks. Then remembered the repeat-x property. Here's my code of my original line of thinking:
HTML Code
<div class="circles">
<div id="half-circle1"></div>
<div id="circle1"></div>
<div id="circle2"></div>
<div id="circle3"></div>
<div id="circle4"></div>
<div id="circle5"></div>
<div id="circle6"></div>
<div id="circle7"></div>
<div id="half-circle2"></div>
</div><!-- end of circles -->
CSS Code
.circles div { width: 199px; height: 199px; background-color: #60c5ca; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; position: absolute; top: 0; left: 0; }
#half-circle1 { top: 255px; left: 0px;; width: 100px; border-radius:0 100px 100px 0; opacity: 0.6;}
#half-circle2 { top: 0; left: 0; width: 100px; border-radius: 100px 0 0 100px; opacity: 0.6; }
#circle1 { top: 235px; left: 50px; opacity: 0.5; }
#circle2 { top: 285px; left: 200px; opacity: 0.6; }
#circle3 { top: 235px; left: 300px; opacity: }
#circle4 { top: 235px; left: 300px; opacity: }
#circle5 { top: 235px; left: 300px; opacity: }
#circle6 { top: 235px; left: 300px; opacity: }
#circle7 { top: 235px; left: 300px; opacity: }
You can utilize css calc() with vw, vh units
.circles div {
width: 199px;
height: 199px;
background-color: #60c5ca;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
position: absolute;
top: 0;
left: 0;
}
#half-circle1 {
top: 255px;
left: calc(0vw);
width: 100px;
border-radius: 0 100px 100px 0;
opacity: 0.6;
}
#half-circle2 {
top: 235px;
left: calc(90vw + 50px);
width: 100px;
border-radius: 100px 0 0 100px;
opacity: 0.6;
}
#circle1 {
top: 235px;
left: calc(10vw - 50px);
opacity: 0.5;
}
#circle2 {
top: 285px;
left: calc(20vw);
opacity: 0.6;
}
#circle3 {
top: 235px;
left: calc(30vw);
opacity: 0.7;
}
#circle4 {
top: 235px;
left: calc(40vw);
opacity: 0.5;
}
#circle5 {
top: 235px;
left: calc(50vw);
opacity: 0.5;
}
#circle6 {
top: 235px;
left: calc(60vw + 50px);
opacity: 0.6;
}
#circle7 {
top: 235px;
left: calc(70vw + 100px);
opacity: 0.7;
}
<div class="circles">
<div id="half-circle1"></div>
<div id="circle1"></div>
<div id="circle2"></div>
<div id="circle3"></div>
<div id="circle4"></div>
<div id="circle5"></div>
<div id="circle6"></div>
<div id="circle7"></div>
<div id="half-circle2"></div>
</div>
jsfiddle https://jsfiddle.net/Lu1xwkre/1/
I want to change my scrolltop value from 50px to something like lets say 1% of the user's screen. How could I possibly go about doing this. I was reading that a JS value can be a percentage, however it is not working for me. Here is a codepen I made to demonstrate the effect:
[link] (http://codepen.io/ericshio/pen/zBRbAY)
HTML:
<div class="filler"></div>
<img class="down-arrow" src="http://www.themainconcept.com/wp-content/uploads/2015/11/down-arrow-wht.png" alt="down arrow wht"/>
CSS:
.down-arrow {
position: fixed;
bottom: 1%;
left: 50%;
max-width: 3.5%;
min-width: 3.5%;
width: 3.5%;
box-shadow: none;
opacity: 0.6;
}
.down-arrow:hover {
opacity: 1;
}
.filler {
height: 10000px;
}
JS:
$(window).scroll(function() {
$(".down-arrow").css("opacity", 1 -
$(window).scrollTop() / 50);
});
Try This.
$(window).scroll(function() {
$(".down-arrow").css("opacity", 1 -
$(window).scrollTop() / $(document).height()*0.5);
});
try this
.down-arrow {
position: fixed;
bottom: 1%;
left: 50%;
max-width: 3.5%;
min-width: 3.5%;
width: 3.5%;
box-shadow: none;
opacity: 0.6;
}
.down-arrow:hover {
opacity: 1;
}
.filler {
height: 50%;
}
I'm guessing you're trying to fade out the arrow on scroll
$(window).scroll(function() {
$(".down-arrow").css("opacity", 1 - ($(window).scrollTop() / document.body.scrollHeight));
});
.down-arrow {
position: fixed;
bottom: 1%;
left: 50%;
max-width: 3.5%;
min-width: 3.5%;
width: 3.5%;
box-shadow: none;
opacity: 0.6;
}
.down-arrow:hover {
opacity: 1;
}
.filler {
height: 10000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filler"></div>
<a href="#introjump">
<img class="down-arrow" src="http://www.themainconcept.com/wp-content/uploads/2015/11/down-arrow-wht.png" alt="down arrow wht" />
</a>
I'm doing a site with a "hidden" image. I hide the image using a dark overlay, but now I want the cursor to see through the dark overlay.
An almost working example is here: https://jsfiddle.net/swx5x38j/
What I want to know is, how I make the light div look through the dark overlay div. Is this somehow possible, or should I go for different solution? And does some have a hint on such one?
The code follows here as well. First the CSS:
* {
margin: 0;
padding: 0;
}
#image {
background: url(https://placeimg.com/640/480/animals) center no-repeat;
width: 800px;
height: 600px;
}
#overlay {
opacity: 0.9;
background: #000;
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
}
#light {
opacity: 1;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
background: #fff;
}
The jquery is as follow
$(document).mousemove(function(event) {
$('#light').offset({
top: event.pageY - 50,
left: event.pageX - 50
});
});
And last the HTML
<div id="image"></div>
<div id="overlay"></div>
<div id="light"></div>
instead an overlay, you could use a box-shadow:
$(document).mousemove(function(event) {
$('#light').offset({
top: event.pageY - 50,
left: event.pageX - 50
});
});
* {
margin: 0;
padding: 0;
}
#image {
background: url(https://placeimg.com/640/480/animals) center no-repeat;
width: 800px;
height: 600px;
}
#light {
opacity: 1;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;box-shadow:0 0 0 3000px rgba(0,0,0,0.9);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image"></div>
<div id="light"></div>
You can create a fake image and calculate the offset of the background image like this:
CSS
* {
margin: 0;
padding: 0;
}
.image {
background: url(https://placeimg.com/640/480/animals) center no-repeat;
}
#image {
width: 800px;
height: 600px;
top:0px;
left:0px;
}
#overlay {
opacity: 0.9;
background: #000;
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
}
#fakeImage {
position:absolute;
width: 800px;
height: 600px;
}
#light {
opacity: 1;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
border-radius: 50%;
position: relative;
background: #fff;
overflow:hidden;
}
HTML
<div id="image" class="image"></div>
<div id="overlay"></div>
<div id="light" style="display:none;">
<div id="fakeImage" class="image"></div>
</div>
JS
$(document).mousemove(function(event) {
$('#light').offset({
top: event.pageY - 50,
left: event.pageX - 50
});
var _top = (- $('#light').offset().top) + 'px';
var _left = (- $('#light').offset().left) + 'px';
$('#fakeImage').css({'top': _top, 'left': _left });
});
The random image required a unique class with the same image.
JSFiddle example
Add a massive border to the #light and add a negative margin:
https://jsfiddle.net/mpcmvej6/
.
And remove #overlay.
This method seems the most simple to me.
The good part about this method is that there is no need to support box shadow and it does not require a second image element.
Another method is putting a copy of the image inside #light and move it in the opposite direction of #light.
I am having an issue centring a <div id='divTwo'> inside another <div id='divOne'>. This is normal an easy thing to do, however in this instance i have transform: scale(); with transform-origin: 50% 50% 0px; applied on 'divTwo'
#divOne {
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#divTwo {
width: 1024px;
height: 768px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
border-left: 131px solid #333333;
border-right: 131px solid #333333;
border-top: 47.5px solid #333333;
border-bottom: 47.5px solid #333333;
border-radius: 55px;
}
if the scale applied to the transform and the window is larger than the outerWidth(), 'divTwo' has no issue centring. However when the 'divTwo' is scaled and the window is smaller or equal to the outerWidth(). The div will no longer centre, instead it will place its centre point to be right side of the browser, resulting if half the of 'divTwo' being off the right hand-side of the browser. Changing transform-origin: 50% 50% 0px; to transform-origin: 0% 50% 0px; works so long as you don't scale vertically, and vice versa.
jsfiddle example : https://jsfiddle.net/yvyz49zp/
Thank you. I feel like am missing something of obvious.
I knocked this up relatively quickly in jsfiddle - no javascript needed. Just play around with the values until you get something you like.
Code:
body {
background: lightblue;
}
#container {
display: inline-block;
position: absolute;
width: 50%;
right: 50%;
top: 50%;
transform: translate(50%, -50%);
}
#dummy {
margin-top: 75%; /* Using the dummy is the trick - it locks the aspect ratio (at 4:3 in this case) */
}
#device {
position: absolute;
top: 10%;
bottom: 10%;
left: 0;
right: 0;
background-color: #333;
border-radius: 10%;
}
#screen {
position: absolute;
width: 70%;
height: 80%;
background: #0f0;
right: 50%;
top: 50%;
transform: translate(50%, -50%);
}
<div id="container">
<div id="dummy"></div>
<div id="device">
<div id="screen"></div>
</div>
</div>