I want to move div when every click to change_photo button but this code run only one time ,I don't need infinite loop ,i want div moves when every click.
this is css:
<style>
#-webkit-keyframes myfirst
{
0% {left:0px}
100% {left:100%}
}
#images {
width: 1000px;
height: 300px;
overflow: hidden;
position: relative;
margin: 20px auto;
}
#im{ position:relative;}
</style>
this is html code:
<div id="images" style="">
<img id="im" src="images/banner.jpg"
style="width: 833px; height: 179px;" />
</div>
<input type="button" value="change_photo" onclick="animate();" />
</div>
<script>
function animate() {
var im = document.getElementById("im");
im.style.webkitAnimation = "myfirst 3s";
}
</script>
Use css3 transitions-
#image{
-webkit-transition:all 2s;
}
#image:hover{
left:100px;
}
Remove Javascript and the keyframes rule and this will work
EDIT:
jsfiddle using jquery.animate()
#-webkit-keyframes myfirst
{
0% {left:0}
50% {left:100%}
100% {left:0}
}
Related
This is my simple code, which I want it to scale my whole document (html) with a delay of 1s (with javascript) and it should animate slowly the scale of the whole website.
In this fiddle, it is not really working at all - but on my file it actually animates it, but only when the user moves the mouse constantly.
html {
height: 100%;
width:100%;
transition: transform 15s linear;
transform: scale(0.6)
setTimeout(function(){
document.querySelector("html").style.transform = "scale(0.7)";
},1000)
html {
height: 100%;
width:100%;
transition: transform 15s linear;
transform: scale(0.6); background:url("https://www.toptal.com/designers/subtlepatterns/patterns/moroccan-flower-dark.png");
}
<html>
<body></body>
</html>
I could not make it work with your code so I modified it like this:
<script>
setTimeout(function(){
document.querySelector("#test").style.transform = "scale(0.7)";
},1000)
</script>
<style>
html {
height: 100%;
width:100%;
}
#test{
height: 100%;
width:100%;
transition: transform 15s linear;
transform: scale(0.6);
background:url("https://www.toptal.com/designers/subtlepatterns/patterns/moroccan-flower-dark.png");
}
</style>
<html>
<body>
<div id="test"></div>
</body>
</html>
And it seems to work as expected for me, whether I move the mouse or not. The issue is that the background on html or body tag will fill the full size of the screen even if zooming in and out or resizing.
EDIT:
If you want the background to fit the full window while the content is growing: I just added a div in your body to see easier what is happening. Is this what you want to have?
setTimeout(function(){
document.querySelector("html").style.transform = "scale(0.8)";
},1000)
html {
height: 100%;
width:100%;
transition: transform 15s linear;
transform: scale(0.6);
background:url("https://www.toptal.com/designers/subtlepatterns/patterns/moroccan-flower-dark.png");
}
body{
height: 100%;
width:100%;
}
div{
height: 100%;
width:100%;
background-color: #000;
}
<body>
<div></div>
</body>
I want to make an auto scrolling image. Here is what I've tried.
Scrolling image
Here is my code.
<style>
.scroll_container {
width: 100%;
height: 200px;
/* background-color: #ddd; */
overflow: hidden;
}
.ads_box_holder {
width: 100%;
white-space: nowrap;
min-width:100%;
width: auto !important;
width: 100%;
}
.ads_box {
display: inline-block;
position: relative;
top: 0;
left: 0;
width: 190px;
height: 200px;
padding: 10px 10px;
margin-right: 10px;
}
.ads_box img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
animation: slide 20s infinite;
}
#keyframes slide {
0%{ transform:translateX(0px) }
10%{ transform:translateX(-200px) }
20%{ transform:translateX(-400px) }
30%{ transform:translateX(-600px) }
40%{ transform:translateX(-800px) }
50%{ transform:translateX(-1000px) }
60%{ transform:translateX(-1200px) }
70%{ transform:translateX(-1400px) }
80%{ transform:translateX(-1600px) }
90%{ transform:translateX(-1800px) }
100%{ transform:translateX(0px) }
}
<style>
<div class="scroll_container">
<div class="ads_box_holder">
<div class="ads_box"><img src="images/ads.png"></div>
<div class="ads_box"><img src="images/blur.jpg"></div>
<div class="ads_box"><img src="images/foot.jpg"></div>
<div class="ads_box"><img src="images/body.jpg"></div>
<div class="ads_box"><img src="images/s.png"></div>
<div class="ads_box"><img src="images/menu.jpg"></div>
<div class="ads_box"><img src="images/face.jpg"></div>
<div class="ads_box"><img src="images/c.jpeg"></div>
<div class="ads_box"><img src="images/foot2.jpg"></div>
<div class="ads_box"><img src="images/b.jpg"></div>
</div>
</div>
Now, I used keyframe css. So, when images move to left one after another, there has empty space in the right side as shown in below
---------
| |
| image | empty space are left here
| |
---------
In the reality, I want to add my images dynamically and images may be over 20 images. So, I'm not sure this keyframes is ok or not when images add dynamically.
I want to replace that empty space to the all of the images inside this box.
So, there is no empty space left and images are always scroll one after another.
But, I don't know how to replace images when space found inside ads_box_holder div.
And I remove css animation and also tried with javascript like this.
<script>
$(document).ready(function(){
var childCount = $(".ads_box_holder :visible").children().length;
var move = 0;
var hideImageTime = 0;
window.setInterval(function(){
hideImageTime += 1;
move += 200;
$(".ads_box_holder").css({
"margin-left":-move+"px",
});
if(hideImageTime > childCount) {
jQuery('.ads_box_holder .ads_box').each(function(){
var next = jQuery(this).next();
count += 1;
if (!next.length) {
next = jQuery(this).siblings(':first');
}
next.children(':first-child').clone().appendTo(jQuery(this));
});
}
},2000);
});
</script>
But it is the same result when I use keyframe css.
NOTE: The image moving style is ok but I just want to place all images when empty space found inside ads_box_holder.
I have no idea how to achieve what I want. I'm really appreciate for any suggestion.
Finally I got what I want. Clone first child and append at last of ads_box_holder and remove first child.
$(document).ready(function(){
function animation() {
$('.ads_box_holder').children(':first').clone().appendTo(".ads_box_holder");
$('.ads_box_holder').children(':first').css({
"margin-left":"-204px",
"-webkit-transition": "all 0.7s ease-out",
"-moz-transition": "all 0.7s ease-out",
"-ms-transition": "all 0.7s ease-out",
"-o-transition": "all 0.7s ease-out",
"transition": "all 0.7s ease-out"
});
setTimeout(function(){$('.ads_box_holder').children(':first').remove()},1500);
}
window.setInterval(animation,2000);
});
I hope it will help for someone.
So I have this problem: I append a div into a div at 50px top then try to animate to 0px but the animation never works, even if the div is moved to 0%.
Here is the very simple code
HTML
<div id="toto"></div>
JS
$('#toto').append('<div id="test" class="test">test</div>');
$('#test').css('top', '0px');
CSS
#toto{
display:block;
}
.test{
display:block;
position:absolute;
transition:all 3s;
top:50px;
}
FIDDLE
Link
Any idea how to have it move with CSS transitions? Thanks.
The CSS is being applied too fast for the top change to trigger the transition. You can wrap the class change in a fast setTimeout() https://jsfiddle.net/nb0fty1b/1/
$('#toto').append('<div id="test" class="test">test</div>');
setTimeout(function() {
$('#test').css('top', '0px');
},100);
#toto{
display:block;
min-height:200px;
}
.test{
display:block;
position:absolute;
transition:all 3s;
top:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toto">
</div>
Don't change the top on page load like:
setTimeout(function(){
$('#test').css('top', 0);
},2000);
You can do that with CSS animation and #keyframes.
$('#toto').append('<div id="test" class="test">test</div>');
#toto {
min-height: 200px;
position: relative;
}
.test {
position: absolute;
top: 50px;
animation: move 3s forwards;
}
#keyframes move {
to {
top: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toto"></div>
I have this PNG:
http://imgur.com/DbVFiyW
And I'm trying to make an animation with this png through CSS, I want the images to crossfade so it creates the illusion of only the petals fading in. For now the images do change correctly, but I have no idea how to make the new petals fade in. At this point I'll accept any approach with Javascript/jquery, although css only would be perfect.
This is my Code:
<!DOCTYPE html>
<html>
<head>
<title>CSS Sprite Animation</title>
</head>
<style type="text/css">
#spriteContainer {
width: 700px;
height: 507px;
display: block;
background-image: url("karuna_animation.png");
animation: sprite 3s steps(12) infinite;
}
#keyframes sprite {
100% {
background-position: -8520px;
}
}
</style>
<body>
<div id="spriteContainer"></div>
</body>
</html>
Maybe you could use several divs with different opacities?
.spriteContainer {
position: absolute;
top: 0;
left: 0;
width: 700px;
height: 507px;
display: block;
background-image: url("http://i.imgur.com/DbVFiyW.png");
animation: sprite 3s steps(12) infinite;
}
#spriteContainer1 {
opacity: 0.3;
animation-delay: 0.08s;
}
#spriteContainer2 {
opacity: 0.6;
animation-delay: 0.16s;
}
#spriteContainer3 {
opacity: 1;
animation-delay: 0.24s;
}
HTML:
<div id="spriteContainer1" class="spriteContainer"></div>
<div id="spriteContainer2" class="spriteContainer"></div>
<div id="spriteContainer3" class="spriteContainer"></div>
jsfiddle
Maybe a way to do the fadeIn is to cut your sprite as many pictures you have with petals and then use a function in jQuery to fade them ?
So you will have a structure like this :
<div id="spriteContainer">
<img src="yourFirstPetal" alt="1st-petal" />
<img src="yourSecondPetal" alt="2nd-petal" />
<!-- and so on -->
</div>
And in CSS, you position your images in absolute position, one above the precedent one and play with fadeIn() and fadeOut() to show them with jQuery (or CSS but I don't know the method) ?
See an example of what I'm meaning here
i am trying to make "memory game" using html5, CSS3 and JS. I have completed the view and model part of this game and now trying to make the Controller. What i want is call a function i.e. flip in JS and want that function to perform transition instead of using hover effect of CSS3. Basically i am trying to follow this approach. I checked that flipping in css3 using hover as can be seen in sass code below, but for the game, the user decides where to click. For simplicity, i have concised the code in html5 since it repeats for all other divs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>I Don't Know</title>
<link rel="stylesheet" href="trapStyle.css">
</head>
<body>
<div class = "container" >
<div class="sub1" >
<div class="front" id="card1" onclick="flip(card1)">card1</div>
<div class="back" id="card1_1">what the hell?</div>
</div> <--sub1 Ends-->
<div class="sub1">
<div class="front" id="card2" onclick="flip(this)">card2</div>
<div class="back" id="card2_2">what the hell?
</div> <--sub1 Ends-->
</div> <-- container Ends -->
<script src ="script.js"></script>
</body>
</html>
and the SASS code for css
.container {
position: absolute;
left: 115px;
width: 1150px;
height: 700px;
background-color: silver;
/* SUB-CONTAINER to stack two cards */
.sub1 {
width: 200px; height: 200px;
float:left; margin: 5px;
.front {
position:absolute; width: 200px; height: 200px;
background-color: #498010;
transform: perspective( 600px) rotateY(0deg);
backface-visibility: hidden;
transition: transform 0.5s linear 0s;
}
.back {
position: absolute; width: 200px; height: 200px;
float:left; background-color: #689;
transform: perspective( 600px) rotateY(180deg);
backface-visibility: hidden;
transition: transform 0.5s linear 0s;
}
}
.sub1:hover > .front {
/* transform: perspective(600px) rotateY(-180deg); */
}
.sub1:hover > .back {
/* transform: perspective(600px) rotateY(0deg); */
}
}
and JavaScript
function flip(front) {
document.getElementById("front").style.transition = opacity 0.5s linear 0s;
document.getElementById("front").style.opacity = 0;
}
Note: the link, above, is trying to pass id to JS function where the transition takes place. Exactly same is being done here, just to get input from user instead of just hovering, but nothing happens! I copy/pasted the link code in my editor and smooth transitions are performed but when it comes of my code, nothing! Could you tell me where is my flaw?
Change your CSS from the hover state to a class, for iunstance change .sub1:hover to .hovered:
.container .hovered > .front {
transform: perspective(600px) rotateY(-180deg); }
.container .hovered > .back {
transform: perspective(600px) rotateY(0deg); }
And now, on click, add this class to the element clicked:
$(".sub1").click(function() {
$(this).addClass ('hovered');
})
fiddle
this function in javascript would be
function change(element) {
element.className = element.className + " hovered";
}
provided that you send the element in the function call
onclick="change(this)"
fiddle - function set only in the first div