I want to make a div go up to 0px from 100px smoothly with animejs.
I have this div:
<div class="div"></div>
And style:
.div{
border: 1px solid white;
padding: 10px;
translateY: 100px;
}
And this is the js code:
anime({
targets: [".div"],
duration: 1000,
easing: "easeOutElastic",
translateY: "0px",
})
I have tried doing the opposite like going down from 0px to 100px and its working well like that.But when I am trying like this the div is going to 0px straight.
Give translateY value as an array, first item being the start point and second being the end:
translateY: [100, 0]
anime({
targets: [".div"],
duration: 1000,
easing: "easeOutElastic",
translateY: [100, 0],
});
.div {
border: 1px solid white;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<div class="div">test</div>
Related
I'm trying to create a photo dispersion effect with the help of animejs.
Also, I've divided my background image in small blocks by keeping the background position fixed and till now its fine. like this:
But when I include anime js in it, my background doesn't seems to be a single one. Those all block takes same part of the image like this:
Here is the complete code:
let photoContainer = document.querySelector(".photoContainer")
for(let i = 0; i<100; i++){
let ele = document.createElement("div");
ele.classList.add("block");
photoContainer.appendChild(ele);
}
let block = document.querySelectorAll(".block")
let animation = anime.timeline({
targets: block,
easing: "easeInOutExpo",
loop: true,
delay: anime.stagger(20, {start:0}),
})
animation
.add({
delay: 4000,
scale: 0,
translateX: function(){return anime.random(-360,2100);},
translateY: function(){return anime.random(-360,2100);},
rotate: function(){return anime.random(360,-360);},
duration : function(){return anime.random(500,3000);}
})
.add({
scale: 1,
translateX:0,
translateY: 0,
rotate: 0,
duration : function(){return anime.random(2000,3000);}
})
.photoContainer{
position: relative;
display: flex;
flex-wrap: wrap;
transform-style: preserve-3d;
border: 2px solid red;
}
.photoContainer .block{
position: relative;
width: 5vh;
height: 5vh;
transform-style: preserve-3d;
perspective: 1000px;
box-sizing: border-box;
border: 2px solid green;
background-image: url(img.png);
background-color:red ;
background-size: 50vh 50vh;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top;
}
.dispersionContainer{
width: 50vh;
height: 50vh;
margin: 0px auto;
/* border-radius:50% ; */
background-color: black;
overflow: hidden;
border: 2px solid red;
}
<body>
<section id="spanContainer">
<div class="dispersionContainer">
<div class="photoContainer"></div>
</div>
</section>
</body>
Note: When I pushed this code to github previously, it was fine but when I cloned it again this problem arised.
Thanks in advance.
I'm moving a 20px square around a circle path in SVG, using Anime.js. The square, however, is not perfectly centered in it's circular path:
anime({
targets: '.square',
translateX: path('x'),
translateY: path('y'),
rotate: path('angle'),
easing: 'linear',
duration: 10000,
loop: true,
});
https://codepen.io/gremo/pen/wvKjrMW
I've found similar examples, but I can't understand the math for making this work:
Here the object is centered using top/left/margin (even with negative values)
Here the object is centered using only top/left (with negative values)
This happens because your object (square) is indeed following the path. However, the object is translated based on the first pixel on the top left value (so if you make a 1px x 1px square, you should see that the square is following the path nicely). That is why the object's top left-hand corner is always sticking to the line. What you want is for the middle section of the object to stick to the line.
Using a statically and manually computed value (50% of the box's original width and height) is plausible (e.g. giving -10px to both top and left). However, you might not want to do this when there are many objects being animated (as you'll need to update all the CSS codes when change happens). Instead, we can use the pseudo-element ::after on your .square and translate it by 50% of its width to the left and 50% of its height to the top. This way, the object's point which will stick to the line is the center part of the square. Now, when you update the width and height of your original .square element, you need not update the top and left value. You can't simply add the transform: translate(-50%, -50%) value to the original .square div because it will be animated using Anime.js and the initial transform value will be lost. Getting the computed initial transform value from the JS is tricky.
document.addEventListener('DOMContentLoaded', function() {
const path = anime.path('.circle path');
anime({
targets: '.square',
translateX: path('x'),
translateY: path('y'),
easing: 'linear',
duration: 10000,
loop: true,
});
});
body {
background-color: #001f3f;
}
.container {
position: relative;
margin: 0 auto;
max-width: 500px;
}
.circle {
fill: none;
stroke: #b10dc9;
}
.square {
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 20px;
height: 20px;
}
.square::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
background-color: #f012be;
}
<script src="https://unpkg.com/animejs#3.2.0/lib/anime.min.js"></script>
<div class="container">
<svg class="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<path d="M400,250c0,82.84-67.16,150-150,150s-150-67.16-150-150s67.16-150,150-150S400,167.16,400,250z" />
</svg>
<span class="square"></span>
</div>
To understand the logic add another element with a different width/height to see the reference for each object:
document.addEventListener('DOMContentLoaded', function() {
const path = anime.path('.circle path');
anime({
targets: '.square',
translateX:path('x'),
translateY: path('y'),
easing: 'linear',
duration: 10000,
loop: true,
});
anime({
targets: '.square2',
translateX: path('x'),
translateY: path('y'),
easing: 'linear',
duration: 10000,
loop: true,
});
});
body {
background-color: #001f3f;
}
.container {
position: relative;
margin: 0 auto;
max-width: 500px;
}
.circle {
fill: none;
stroke: #b10dc9;
}
.square {
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 20px;
height: 20px;
background-color: #f012be;
}
.square2 {
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 40px;
height: 40px;
background-color: blue;
}
<script src="https://unpkg.com/animejs#3.2.0/lib/anime.min.js"></script>
<div class="container">
<svg class="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<path d="M400,250c0,82.84-67.16,150-150,150s-150-67.16-150-150s67.16-150,150-150S400,167.16,400,250z" />
</svg>
<span class="square2"></span>
<span class="square"></span>
</div>
As you can see, the top/left corner is following the path. To avoid this you can either use negative left/top to offset the element and have it centred or consdier a different CSS to make something generic.
I made the element with a 0 dimension and considered a box-shadw to create the square shape:
document.addEventListener('DOMContentLoaded', function() {
const path = anime.path('.circle path');
anime({
targets: '.square',
translateX:path('x'),
translateY: path('y'),
easing: 'linear',
duration: 10000,
loop: true,
});
anime({
targets: '.square2',
translateX: path('x'),
translateY: path('y'),
easing: 'linear',
duration: 10000,
loop: true,
});
});
body {
background-color: #001f3f;
}
.container {
position: relative;
margin: 0 auto;
max-width: 500px;
}
.circle {
fill: none;
stroke: #b10dc9;
}
.square {
content:"";
position: absolute;
left:0;
right:0;
width: 0;
height: 0;
box-shadow:0 0 0 10px #f012be;
}
.square2 {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
box-shadow:0 0 0 20px blue;
}
<script src="https://unpkg.com/animejs#3.2.0/lib/anime.min.js"></script>
<div class="container">
<svg class="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<path d="M400,250c0,82.84-67.16,150-150,150s-150-67.16-150-150s67.16-150,150-150S400,167.16,400,250z" />
</svg>
<span class="square2"></span>
<span class="square"></span>
</div>
I have a page with both fixed and non fixed elements. I am using a div to make the background blue, and then fading it out to reveal the black background behind it in the html css. The problem is, my skyline image is not fixed, and nothing can push it above the fixed elements, not even z-indexing. What's the appropriate way to push this element above the fixed background div.
The problem in short, is I want my blue sky behind my cities.
Here's the css for the blue background div
.blue {
position:fixed;
height: 100%;
width: 100%;
background-color: #6e8eb5;
}
Here's how I'm fading it out.
$( ".blue" ).delay( 12000 ).fadeOut(2000);
Here's my jsfiddle.
http://jsfiddle.net/wzrjL68s/
Here: http://jsfiddle.net/ctwheels/wzrjL68s/5/
I've also fixed position of elements, etc. as I suppose you intended to position them
HTML
<body>
<div class="blue"></div>
<h2 id="text1">a web design demonstration</h2>
<h3 id="text2">by cory</h3>
<img id="cloud2" src="http://www.rapitech.net/wp-content/uploads/2013/11/tumblr_ms59qmrRWf1s5jjtzo1_r1_500.png">
<img id="jacksonville" src="http://upload.wikimedia.org/wikipedia/commons/f/fc/Cincinnati_Skyline_Outline.png" class="img-responsive" alt="Responsive image">
</body>
CSS
html {
background-color: black;
overflow-x: hidden;
}
body {
display: none;
background-color: #6e8eb5;
}
#cloud2 {
margin-top:800px;
left: -100px;
height:150px;
opacity: 0.4;
}
#text1, #text2 {
opacity: 0.0;
color: black;
font-family: Georgia, serif;
color: white;
position: fixed;
margin-bottom: 200px;
width: 75%;
left: 50%;
margin: 0 0 0 -37.5%;
text-align:center;
}
.blue {
position:fixed;
height: 100%;
width: 100%;
background-color: #6e8eb5;
z-index:-100;
}
JS
$("body").fadeIn(2000);
$("html, body").animate({
scrollTop: $(document).height()
}, 8000);
$("#cloud2").animate({
opacity: 0.8,
marginLeft: "110%"
}, 30000);
$("#text1").delay(1500).animate({
opacity: 0.5,
marginTop: "15%"
}, 4000);
$("#text2").delay(5000).animate({
opacity: 0.5,
marginTop: "20%"
}, 4000);
$("#text1").delay(500).animate({
opacity: 0.0,
marginLeft: "60%"
}, 2000);
$("#text2").delay(1500).animate({
opacity: 0.0,
marginLeft: "30%"
}, 2000);
$(".blue").delay(12000).fadeOut(2000);
I'm not the greatest with java. I have a few jQuery animations that excecute when the page loads. The last (so far) being a hidden div that slides out. There is another div nested within it for the purpose of clicking to close and then partially hide the div. I would like at this point be able to click on that same div that closed it to open or close as I wish.
You can see what I have so far here. http://www.gregtaylordesignstudio.com/Great-Lakes-Project/actions.html
the jquery I 'm using is
$(document).ready(function(){
var slideout = $('#actionsBlurb');
$('#dots').hide();
$('#mapBack').delay(1000).animate({top:"45px"},800).fadeOut(400);
$('#mapBackTop').delay(1000).fadeOut(1000);
slideout.delay(4000).animate({ right: 75, }, { duration: 1000, easing: 'easeOutExpo'});
$(".close").click(function () {
slideout.animate({ right: '75px'}, { queue: false, duration: 500}); }, function () {
slideout.animate({ right: '-475px'}, { queue: false, duration: 500 });
});
});
my css
#actionsBlurb {
width:50%;
padding:20px;
position:absolute;
top:0;
right:-525px;
background: rgb(255, 255, 255) transparent;
background: rgba(255, 255, 255, 0.8);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#fad59f, endColorstr=#fa9907);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#fad59f, endColorstr=#fa9907)";
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 6px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
border:#036 solid 4px;
z-index:200;
}
.close{
width:40px;
height:40px;
background-image: url(../images/close.png);
background-repeat: no-repeat;
background-position: right top;
position: absolute;
bottom: -40px;
left: -20px;
z-index:300;
}
#topSection {
width:900px;
height:749px;
position:relative;
margin: 0 auto;
overflow:hidden;
}
Give something like this a shot....
var open = true;
$(".close").click(function () {
if(open === false) {
open = true;
slideout.animate({ right: '-475px'}, { queue: false, duration: 500 });
} else if(open === true) {
open = false;
slideout.animate({ right: '75px'}, { queue: false, duration: 500});
}
});
The 'open' variable will give us a means to know whether or not our slide out is hidden or not. Thus giving the click event a means to know how it should animate the slide out. It's set initially to true sense the slide out starts out visible to the user. I wasn't sure which of your animates was sliding out vs sliding in, so you may need to switch them around based on the existing logic. But I hope this gives you some idea of what to aim for and try out.
I'm enlarging images on click and moving them so they don't go off the page. I have a parent div behind each that is black pic so that when I hover, I can change the opacity of the pic to make it look like it's darkening. All of this works fine, however, when I enlarge and move the photo there is a black box left behind. I need that to disappear but when I try it makes the child pic disappear too.
here's the code, jsfiddle posted beneath
HTML
<div id="Gpic1">
<img class='galleryPics' id='pic1' src='http://i.imgur.com/urxD24P.jpg?1'>
</div>
CSS
#Gpic1 {
float: left;
width: 187px;
height: 280px;
margin-left: 5%;
display: inline-block;
background: black;
padding: 0;
}
#pic1{
width: 187px;
height: 280px;
}
.enlarged {
border: 10px solid #e5dbcc;
position: absolute;
-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);`
}
JQUERY
$('#Gpic1').hover(function () {
if (!$(this).find('img').hasClass('enlarged')) {
$(this).find('img').fadeTo(500, 0.5);
}
}, function () {
$(this).find('img').fadeTo(500, 1);
});
$('#pic1').click(function () {
$(this).fadeTo(0, 1);
if ($(this).hasClass('enlarged')) {
$(this).removeClass('enlarged');
$(this).stop().animate({
width: 187,
height: 280
}, 0,
function () {
$(this).parent().removeClass('ontop');
});
} else {
$(this).addClass('enlarged')
$(this).parent().addClass('ontop');
$(this).stop().animate({
width: 533,
height: 800,
left: +590,
bottom: +50
}, 200);
}
});
Add this at the end of the animate for the pic onClick Event
$('#Gpic1').css('background','none');
Here is a fiddle.
http://jsfiddle.net/Td6tT/3/
When you try to remove #Gpic1, all children are removed even if they are absolutely positioned.
If you just want the black background to go away, you can remove the black background from the containing div.
$("#Gpic1").css("background-color", "transparent");
Or, if you really want to remove the containing div, then you will need to make the image a child of some other object on the page. If you're using absolute positioning, then you could just make the image a child of the body object instead of #Gpic1 so then you can remove #Gpic1 and the image won't disappear.
// move pic1 to be a child of the body so we can remove Gpic1
$("#pic1").appendTo(document.body);
$("#Gpic1").remove();
$('#Gpic1').css('background','none');