animation Flip div when clicked - javascript

I am trying to make the divs flip whenever I click on them. I'm not sure why it doesn't work. Please help.
Here is the demo of this code. http://langbook.co/testicles-1-2-flashcards/
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#flip3D{ width:240px; height:200px; margin:10px; float:left; }
#flip3D > #front{
position:absolute;
transform: perspective( 600px ) rotateY( 0deg );
background:#FC0; width:240px; height:200px; border-radius: 7px;
backface-visibility: hidden;
transition: transform .5s linear 0s;}
#flip3D > #back{
position:absolute;
transform: perspective( 600px ) rotateY( 180deg );
background: #80BFFF; width:240px; height:200px; border-radius: 7px;
backface-visibility: hidden;
transition: transform .5s linear 0s;}
</style>
<script>
function flip(el){
el.children[1].style.transform = "perspective(600px) rotateY(-180deg)";
el.children[0].style.transform = "perspective(600px) rotateY(0deg)";}
var vlib = document.getElementById('front');
vlib.addEventListener(click, flip(el));
</script>
<title>Flashcards</title>
</head>
<body>
<div id="flip3D">
<div id="back">Box - Back</div>
<div id="front">Box - Front </div>
</div>
</body>
</html>

First, I would move your JS to the end of the page.
It also seems like you want to be calling flip() on #flip3D, because you are trying to access it's child elements, like so:
var vlib = document.getElementById('flip3D');
vlib.addEventListener('click', flip(vlib));
To flip back, you could just keep the object's state in an attribute to know which side it's on. Also note that flip(vlib) will be called immediately; to wait for the click event, you'll need to pass a reference to the function:
vlib.addEventListener('click', flip);
Seems to work: JSFiddle

http://www.w3schools.com/css/css3_2dtransforms.asp
http://www.w3schools.com/css/css3_3dtransforms.asp
Not sure if you have tried this but this my solve your problem. Using just CSS you can do the exact same thing (by the sounds of what you are trying to achieve).
Hope this helps.

ex:
http://www.w3schools.com/cssref/playit.asp?filename=playcss_backface-visibility
easy one CSS line :
animation:mymove 3s infinite;
where mymove is:
#keyframes mymove
{
from {transform:rotateY(0deg);}
to {transform:rotateY(360deg);}
}
#-moz-keyframes mymove /* Firefox */
{
from {-moz-transform:rotateY(0deg);}
to {-moz-transform:rotateY(360deg);}
}
#-webkit-keyframes mymove /* Opera, Safari, Chrome */
{
from {-webkit-transform:rotateY(0deg);}
to {-webkit-transform:rotateY(360deg);}
}
#-ms-keyframes mymove /* Internet Explorer */
{
from {-ms-transform:rotateY(0deg);}
to {-ms-transform:rotateY(360deg);}
}
example:
div#myDIV
{
animation:mymove 3s infinite;/* <== HERE */
/* Firefox */
-moz-animation:mymove 3s infinite;
-moz-animation-timing-function:linear;
/* Opera, Safari, Chrome */
-webkit-animation:mymove 3s infinite;
-webkit-animation-timing-function:linear;
}

You had a few mistakes with syntax and declarations in the JS part.
Hope this is what you are looking for:
https://jsfiddle.net/xrtvhvgf/2/
function flip(){
if(vlib_front.style.transform){
el.children[1].style.transform = "";
el.children[0].style.transform = "";
} else {
el.children[1].style.transform = "perspective(600px) rotateY(-180deg)";
el.children[0].style.transform = "perspective(600px) rotateY(0deg)";
}
}
var vlib_front = document.getElementById('front');
var el = document.getElementById('flip3D');
el.addEventListener('click', flip);

Related

How to access the #keyframes selector and catch the value from there

There is code in css
#shape {
-webkit-animation: spin 50s infinite linear;
}
#-webkit-keyframes spin {
0% { transform: rotateY(0); }
100% { transform: rotateY(-360deg); }
}
I need to catch the moment of turning. Example : If the Y - axis rotation is -30 degrees , do the action
I tried a lot of things, but nothing came out. Used js and jquery
Keyframes generates only this events giving any information to JS:
animationstart
animationend
animationiteration
animationcancel
#keyframes sk-logo-main{
0% { transform: rotate(-360deg); }
100% { transform: rotate(0deg); }
}
#my-div-animated{
background:#666699;
color:#fff;
border-radius:50%;
width:100px;
height:100px;
line-height:100px;
text-align:center;
font-size:25px;
position:absolute;
animation-name: sk-logo-main;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
<div class='container'>
<div id="my-div-animated">
text
</div>
</div>
<script>
function AnimationListener( e ){
console.log ( e ) ;
}
window.addEventListener ( 'load', ()=>{
let animDiv = document.getElementById ( 'my-div-animated' );
animDiv.addEventListener( "animationstart", AnimationListener);
animDiv.addEventListener( "animationiteration", AnimationListener);
} );
</script>
You can not check animation progress state between this "states"/"events".
If you want to have full contronl at animated elements that you can do this animation in JS.

How do I fade 2 images with jQuery on mouseenter and mouseleave?

I have a custom button (code below). I want it to:
rotate quickly 360 on mouseenter (currently working fine)
fade quickly to a darker image on mouseenter (also currently working fine)
NOT un-rotate on mouseleave (currently working fine)
I can't yet figure out how to:
fade back to the original image on mouseleave (not working yet)
I have tried so many variations of jQuery including .hover, .fadeToggle, fadeIn, fadeOut as well as animate but none have seemed to work for me.
Am I missing something really simple and obvious?
NOTE: I have just used the Apple logo for demonstration here. If I can get the 'fade back on mouseleave' working I can just transfer it to my real life situation.
var thevalue = 1;
$("div.main").mouseenter(function() {
thevalue = thevalue + 1;
if (thevalue % 2 == 0) {
$(this).addClass("myopacity");
} else {
$(this).removeClass("myopacity");
}
$(this).addClass("change").delay(500).queue(function() {
$(this).removeClass("change").dequeue();
});
});
div.main {
width: 100px;
height: 100px;
}
div.main img {
width: 100%;
height: 100%;
}
.change {
-ms-transform: rotate(360deg);
/* IE 9 */
-webkit-transform: rotate(360deg);
/* Chrome, Safari, Opera */
transform: rotate(360deg);
transition-duration: .5s;
}
.myopacity {
opacity: 0.6;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="main">
<img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg">
</div>
<p id="dis"></p>
</body>
</html>
Thanks in advance!
is this what you want. hope this will help to you.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<style type="text/css">
div.main{
width: 100px;
height: 100px;
}
div.main img{
width: 100%;
height: 100%;
}
.change{
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
transition-duration: 5s;
}
</style>
<body>
<div class="main">
<img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg">
</div>
<p id="dis"></p>
<script type="text/javascript">
var thevalue = 1;
$("div.main").mouseenter(function(){
$(this).addClass("change").fadeTo('fast',0.7).delay(5000).queue(function(){
$(this).removeClass("change").fadeTo('slow',1.0).dequeue();
});
});
</script>
</body>
</html>
I'm not 100% certain what you are after... I think this is close. Rotates 360° and opacity dims to 60%, then rotates back to 0° and full opacity.
No clue why you even needed the opacity class or the associated jQuery for it.
$("div.main").hover(
function() {
$(this).addClass('change').addClass('myopacity');
},
function() {
$(this).removeClass('myopacity')
});
body { padding: 40px; }
div.main {
width: 100px;
height: 100px;
opacity: 1;
transition: all .5s;
transition: all .5s;
background: url(https://image.freepik.com/free-icon/apple-logo_318-40184.jpg) no-repeat center center;
background-size: cover;
}
div.main img {
width: 100%;
height: 100%;
}
.main.change {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
transition: all .5s;
background: url(https://image.freepik.com/free-icon/windows-8-logo_318-40228.jpg) no-repeat center center;
background-size: cover;
}
.change.myopacity {
opacity: .6; }
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="main">
</div>
<p id="dis"></p>
</body>
</html>
If you want the images in the actual HTML, then you can use the jQuery hover function to alter the image sources.
Found it.
Trying to manage two transitions on the exact same element was making it too complicated.
I ended up having to add one class to the img element and another to the div element. The img element now manages the rotation and the div element manages the fade through simple CSS :hover transitions.
This makes the jQuery much more simple.
See updated code below:
$("div.main").mouseenter(function() {
$(".image").addClass("change").delay(500).queue(function() {
$(".image").removeClass("change").dequeue();
});
});
// jQuery now much more simple. No need for variables or the if/else statement
div.main {
width: 100px;
height: 100px;
-webkit-transition: all .5s ease-in;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-in;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-in;
-o-transition: all .5s ease-out;
}
/* This will take care of the fade transition on :hover */
div.main img {
width: 100%;
height: 100%;
}
.change {
-ms-transform: rotate(360deg);
/* IE 9 */
-webkit-transform: rotate(360deg);
/* Chrome, Safari, Opera */
transform: rotate(360deg);
transition-duration: .5s;
}
/* .myopacity {
opacity: 0.6;
} */
/* The .myopacity class is no longer necessary as it's taken care of through the div.main:hover class below */
div.main:hover, div.main:active, div.main:focus {
opacity: 0.6;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="main">
<img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg" class="image">
</div>
<p id="dis"></p>
</body>
</html>
Kind of cheated with not using jQuery for the fade transition (as originally hoped for) but this works equally as well!

How to make the text content in a div increase and decrease in font size repeatedly?

I’m wondering if it’s possible to have the text content of a div increase and decrease in font size repeatedly every second. This would give an effect where the text seems to move closer to the viewer before moving back, ideally it would be a smooth transition and wouldn’t look like a 2 frame gif.
This is my attempt using Javascript to change the font size every second:
<div id="textdiv">ZOOM</div>
<script>
function zoomtext(){
var textdiv = document.getElementById("textdiv");
textdiv.style.fontSize = "20px";
textdiv.style.fontSize = "25px";
setTimeout(zoomtext, 1000);
}
</script>
This isn’t working, and I’m not sure that this code would result in a smooth transition.
Perhaps it’s possible to make a smooth transition by changing the font by tenths of a pixel (for example: 20px, 20.1px, 20.2px …and so on until 25px, and then decreasing it back to 20px in the same way).
I’m worried that method might result in a Javascript function running constantly, which might slow down my page.
Is there a better way to get this effect?
Use CSS transitions with scale transformation. Font-size transitions are never smooth, and transitions on transform are cheap.
.grow {
transition: all .2s ease-in-out;
}
.grow:hover {
transform: scale(1.5);
}
Repetition can be accomplished through CSS3 animations:
.grow {
width: 100px;
text-align: center;
animation: grow-animation 2s linear infinite;
}
#keyframes grow-animation {
0% { transform: scale(1); }
50% {transform: scale(2); }
100% {transform: scale(1); }
}
You can achieve the same effect using CSS Animations. It's pretty easy, too, and far better than using Javascript for that.
You need to assign your element the animation property, which you then define.
#textdiv {
animation: textgrowth 1s infinite alternate;
}
#keyframes textgrowth {
0% {
font-size: 20px;
}
100% {
font-size: 25px;
}
}
Be sure to add alternate at the end of your CSS rule to make the animation go back and forth.
if it is only zoom at screen , and not growing the container too, then scale(); should be what you look for:
#textdiv {
-webkit-animation: zoom1-2 infinite 1s;
animation: zoom1-2 infinite 1s;
-webkit-transform-origin:0 0 ;
transform-origin:0 0 ;
font-size:20px;
}
#-webkit-keyframes zoom1-2 {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
#keyframes zoom1-2 {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
<div id="textdiv">ZOOM</div>
<div>don't push me</div>
Instead of javascript you could use CSS animations.
Some example HTML:
<!DOCTYPE html>
<head>
<title>keyframes text size animation test</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<p id="textdiv">ZOOM</p>
</body>
</html>
And the CSS
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
#textdiv {
-webkit-animation: adjustText 1s infinite alternate;
-moz-animation: adjustText 1s infinite alternate;
-o-animation: adjustText 1s infinite alternate;
animation: adjustText 1s infinite alternate;
}
#keyframes adjustText {
from {
font-size: 20px;
}
to {
font-size: 25px;
}
}
Here's a working codepen of this example
Try this one:
function zoomtext(){
var textdiv = document.getElementById("textdiv");
var fontSize = textdiv.style.fontSize;
if (fontSize !== '48px') {
textdiv.style.fontSize = '48px';
}
else {
textdiv.style.fontSize = '21px';
}
setTimeout(zoomtext, 1000);
}
zoomtext();
<div id="textdiv">ZOOM</div>

Animate marginLeft to element's -width

I have element with long inline text and want to make animation that will move this text from off-screen right (whole text behind right border of window) to the left off-screen.
My idea is to move element by setting margin-left to minus(width) of element:
var element = $(this);
$("p").animate({
'marginLeft': - element;
}, 4000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>element with long long long long inline text....</p>
But this does not work. Any ideas?
In that context, as far as I can tell, $(this) is the window. You want to animate the $("p") itself, and you need to specify you're animating based on it's width, not the general DOM element. There also was a rogue ; in your object that you were sending to the animate function (you can see errors like this in your Developer Tools Console).
var $element = $("p");
$element.animate({
'marginLeft': -($element.outerWidth())
}, 4000);
body {
margin: 0;
font-family: sans-serif;
font-size: 12px;
overflow-x: hidden; /* no horizontal scrollbar */
}
p {
white-space: nowrap;
background: #ccc;
display: inline-block;
margin-left: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>element with long long long long inline text....</p>
EDIT
Or, here it is with pure CSS. This is the more effective route to take, if the browsers you're developing for support it. It causes the browser to "repaint" less, and runs on the GPU instead of CPU like JS does.
body {
margin: 0;
font-family: sans-serif;
font-size: 12px;
overflow-x: hidden; /* no horizontal scrollbar */
}
#-webkit-keyframes offscreenLeft {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
#-moz-keyframes offscreenLeft {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
#-o-keyframes offscreenLeft {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
#keyframes offscreenLeft {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
p {
white-space: nowrap;
background: #ccc;
display: inline-block;
padding-left: 100%; /* translate uses the inner width of the p tag, so the thing pushing it offscreen needs to be *inside* the p, not outside (like margin is) */
-webkit-animation: offscreenLeft 4s forwards; /* Safari 4+ */
-moz-animation: offscreenLeft 4s forwards; /* Fx 5+ */
-o-animation: offscreenLeft 4s forwards; /* Opera 12+ */
animation: offscreenLeft 4s forwards; /* IE 10+, Fx 29+ */
}
<p>element with long long long long inline text....</p>
If I were you, I would toggle a class on the element and using CSS's transform: translateX() combined with transition to move the element off screen.
codepen
css
p {
transform: translateX(0);
transition: transform 0.3s ease;
}
p.off-screen-right {
transform: translateX(100%)
}
js
$(document).ready(function () {
$('button').click(function () {
$('p').toggleClass('off-screen-right')
})
})
Steps
Get the <p> width and save it in a variable.
Then, sets the initial margin-left to the $(window).width()
After that, you can call the animate function to set the margin-left to the negative value of the width you've saved in the variable initially
Working code
$(function() {
var width = $("p").width();
$("p")
.css('margin-left', $(window).width())
.animate({ 'margin-left': -width }, 4000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>element with long long long long inline text....</p>

How to link after the CSS-Animation?

I have a simple loading-bar, that gets fuller and fuller after entering my homepage (animated with CSS-animations). When the bar is completly filled, the user should be linked to the next site.
HTML is short:
<div id="loadingbar">
<div id="loadingprogress">
</div>
</div>
I found this JS-Code but it just doesnt work:
$("#loadingprogress").bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(e){
window.location.href = "http://www.google.com";
});
What is wrong?
Apply it to loadingprogress, the one you're animating, instead of its parent
$("#loadingprogress").bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(e){
window.location.href = "http://www.google.com";
});
Updated jsFiddle
First I have some small questions. What jQuery and browser are u testing this on? I did a small fiddle with jQuery 1.10. Here I used "on" instead of "bind" and got it to work. I hope my code can help u some.
Tested on:
Google chrome Version 31.0.1650.57 FF 25.0.1 Safari 6.1.1
HTML
<div id="loadingbar">
<div id="loadingprogress">
</div>
</div>
CSS
#loadingbar{
background-color:black;
overflow:hidden;
width:200px;
height:20px;
}
#loadingprogress {
width:100%;
height:100%;
background-color:green;
-webkit-animation: moveFromLeft 1.5s ease both;
-moz-animation: moveFromLeft 1.5s ease both;
animation: moveFromLeft 1.5s ease both;
}
#-webkit-keyframes moveFromLeft {
from { -webkit-transform: translateX(-100%); }
}a
#-moz-keyframes moveFromLeft {
from { -moz-transform: translateX(-100%); }
}
#keyframes moveFromLeft {
from { transform: translateX(-100%); }
}
javascript
(function($){
var animEndEventNames = ['webkitAnimationEnd',
'oAnimationEnd',
'MSAnimationEnd',
'animationend'].join(" ");
$("#loadingbar").on(animEndEventNames, function(e){
window.location.href = "/test.htm";
});
}(jQuery));
Here is a link to my jsfiddle. I hope it helps!

Categories

Resources