I'm trying to do a WordCloud with zoom in-out of words. I'm using JavaScript to randomly set CSS to zoom the words, however the words just disappear and then appear.
This is my CSS code:
svg text.zoom {
/* Webkit for Chrome and Safari */
-webkit-transform: scale(1, 1); /*This is the scale for the normal size of the image. */
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease-in-out;
/* Webkit for Mozila Firefox */
-moz-transform: scale(1, 1);
-moz-transition-duration: 0.5s;
-moz-transition: ease-in-out;
/* Webkit for IE( Version: 11, 10 ) */
-ms-transform: scale(1, 1);
-ms-transition-duration: 0.5s;
-ms-transition-timing-function: ease-in-out;
}
Can someone help?
Looks like you have missed the standart transition property. Try adding the following CSS code
svg text.zoom{
transition: all 0.5s ease-in-out;
}
I hope this will help
Related
I'm doing a website and was using this slider for the website http://www.jqueryscript.net/slideshow/Lightweight-Background-Slideshow-Plugin-with-jQuery-CSS3-pureSlider.html ...but I'm unable to control the zooming speed of this slider..I tried various numbers for the animDuration: 8000 in the js file but it is not helping...Can anyone help with this?
In the file pureslider.css change the values of the transition-duration property as you want.
.stage .slide.on {
transition-property: opacity, transform, z-index;
transition-duration: 1000ms, 1000ms, 10ms;
transition-function: linear;
transition-delay: 0ms;
transform: scale(1);
opacity: 1;
z-index: 10;
}
I'm looking at http://voky.com.ua/showcase/sky-mega-menu/examples/demo-personal.html and I can't figure out what is making the subnavs expand. For example, hover over "Portfolio" and see the subnav expand. I've inspected all the elements around the nav items and I can't find any CSS3 transition and I also can't see Javascript adding any style attributes to the elements or adding any classes.
There are two parts to this;
The expanding effect is achieved by setting the scale property to (0,0) when the menu is closed and then (1,1) when its visible, and having a transition property for the animating timing. Here are the relevant lines;
/* line 60 */
.sky-mega-menu li > div {
...
-o-transition: -o-transform 0.4s, opacity 0.4s;
-ms-transition: -ms-transform 0.4s, opacity 0.4s;
-moz-transition: -moz-transform 0.4s, opacity 0.4s;
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
}
/* line 374 */
.sky-mega-menu-anim-scale li > div {
-o-transform: scale(0, 0);
-ms-transform: scale(0, 0);
-moz-transform: scale(0, 0);
-webkit-transform: scale(0, 0);
}
/* line 380 */
.sky-mega-menu-anim-scale li:hover > div {
-o-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
}
The visibility of the submenu on hover is achieved by setting it's opacity to 0 and then 1 when you hover on the respective li
/* line 60 */
.sky-mega-menu li > div {
...
opacity: 0;
}
/* line 101 */
.sky-mega-menu li:hover > div {
opacity: 1;
}
In the CSS sheet named "sky-mega-menu.css" the div next to the li tag being hovered is set to 1 which make it visible.
.sky-mega-menu li:hover > div {
left: 0;
opacity: 1;
-webkit-transform: translate(0, 0);
I have a script which display an img when we are attack by a monster.
So, the image is always in display="none" and when there is a monster it switch to display="";
I want the image do a 360° flip when it switch from display:none to display.
html : <img id="monster" style="display:none;">
js : var skinMonster = document.getElementById('monster');
When we are in fight, i do skinMonster.style.display="";
When the fight is over, i do skinMonster.style.display="none";
I don't how to detect the moment when the style change to rotate the picture.
You could add a CSS class at the same point where you change the display.
.rotate {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
overflow:hidden;
}
Which I slightly modified from this blog post: http://blog.vivekv.com/rotate-image-360deg-when-mouse-hover-using-css-3.html
I'd recommend using a CSS transition for the rotation.
HTML
<img id="monster" src="http://www.avatarsdb.com/avatars/mike_monsters_inc.jpg" />
<button id="show">Show monster</button>
CSS
#monster {
opacity: 0;
transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
}
#monster.show {
opacity: 1;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
JavaScript
var monsterImg = document.getElementById('monster'),
showMonsterButton = document.getElementById('show');
showMonsterButton.addEventListener('click', function() {
monsterImg.classList.add('show');
});
JSFiddle for demo purposes: http://jsfiddle.net/9wkA7/
i've got an image that i want to onclick animate the rotation 90degress, when its clicked again i want it to animate the rotation -90degrees.
For the rotation im using the css3 transform:
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
For the jquery I want to set a varable to check if the object has been rotated, then act accordingly.
I have been having a real difficult time trying to get it to work. I've put together a JsFiddle.
This is the code I am using:
var turn = true;
$("#button").click(function () {
$("#shape").css('transform', function(index) {
return index * 90;
});
});
Add some transitions and a rotate class, and just toggle that class:
css:
#shape { width: 100px;
height: 200px;
background:#000;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.rotate {-moz-transform: rotate(90deg);
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
}
js:
$("#button").click(function() {
$("#shape").toggleClass('rotate');
});
FIDDLE
If I understood correct, THIS should do it.
I think in general, if you're going to use transition's you should target the specific properties you want to affect. I would consider the use of "all" to be poor practice.
Target alternative:
css:
#shape {
width: 100px;
height: 200px;
background:#000;
-moz-transition: transform 1s ease;
-webkit-transition: transform 1s ease;
-o-transition: transform 1s ease;
transition: transform 1s ease;
}
.rotate {
-moz-transform: rotate(90deg);
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
}
///jquery
$("#button").click(function() {
$("#shape").toggleClass('rotate');
});
I have 3 objects (divs) that I want to transition simultaneously as soon as the page loads. To help animate this I am using a little bit of javascript which works perfectly with just the one object but I'm not sure how to rewrite the javascript to activate all 3 objects obey each objects individual styling.
I found an example of "Using transition events to animate an object" on the Mozilla Developer Network site ( https://developer.mozilla.org/en/CSS/CSS_transitions/ ), but unfortunately they disabled their forums so I couldn't find a solution.
Here is the basic HTML:
<body onload="runDemo()">
<div id="cloud-comtainter">
<div class="cloud1Right"></div>
<div class="cloud2Right"></div>
<div class="cloud3Right"></div>
</div>
</body>
I have 2 divs with an background-image, one to represent the object's styling while on the left and it's styling on the right positions.
Here is the CSS for the one object:
.cloud1Right {
width: 22em;
height: 9.375em;
background-image:url(../Images/header/clouds/clouds_biodesign-white.png);
background-position:center;
left:2%;
position:absolute;
top: 5%;
z-index:1;
-webkit-transition-property:left;
-webkit-transition-duration: 25s;
-moz-transition-property:left;
-moz-transition-duration: 25s;
-o-transition-property:left;
-o-transition-duration: 25s;
-ms-transition-property:left;
-ms-transition-duration: 25s;
}
.cloud1Left {
width: 22em;
height: 9.375em;
background-image:url(../Images/header/clouds/clouds_biodesign-white.png);
background-position:center;
left:90%;
position:absolute;
top: 5%;
z-index:1;
-webkit-transition-property:left;
-webkit-transition-duration: 25s;
-moz-transition-property:left;
-moz-transition-duration: 25s;
-o-transition-property:left;
-o-transition-duration: 25s;
-ms-transition-property:left;
-ms-transition-duration: 25s;
}
And here is the Javascript that calls up this object and animates it to move right across the screen and then back again:
function runDemo() {
var el = updateTransition();
// Set up an event handler to reverse the direction
// when the transition finishes.
el.addEventListener("transitionend", updateTransition, true);
}
function updateTransition() {
var el = document.querySelector("div.cloud1Left");
if (el) {
el.className = "cloud1Right";
} else {
el = document.querySelector("div.cloud1Right");
el.className = "cloud1Left";
}
return el;
}
Now, my other 2 elements I want to transition at the same time are named .cloud2Left (and .cloud2Right) and .cloud3Left (and .cloud3Right) each with it's own specific styling (position, left %, transition rate, etc).
I've scoured the web for a solution and have messed around with the js. I looked here and around the Web and found information about selectors and how to use multiple selectors with no luck. I've tried using the multiple selectors like such:
var el=document.querySelector("div.cloud1Left, div.cloud2Left, div.cloud3Left");
and
var el=document.querySelector("div.cloud1Left");
var el=document.querySelector("div.cloud2Left");
var el=document.querySelector("div.cloud3Left");
and the same for the el.className
If anyone has any ideas or knows how to rewrite the javascript function to include all 3 objects (divs) and have them work simultaneously as soon as the page loads I would be greatly appreciative. Thank you in advance.
I think I have solution for you. I was doing a small thing today, based on the same example and this worked for me.
Basically I have one 'opener' which clicked turns and lets 3 other divs transition when turn is finished. Each one with its own speed. And back - when clicked to close - first 3 divs are closing and when this is finished - 'opener' turns finishing animation.
HTML:
<div id="opener" onclick="switch_toolbox('open')" class="vertical">Food Toolbox</div>
<div id="tools">
<h2 id="toolbox_title" class="title">Appliances</h2>
</div>
<div id="freezer">
<h2 id="food_title" class="title">Food store</h2>
</div>
<div id="spicebox">
<h2 id="spices_title" class="title">Spices</h2>
</div>
CSS:
#opener{
display:block;
overflow:hidden;
width:8.8em;
background-color:#F00;
font-weight:600;
font-size:1.5;
padding:0 0.5em;
cursor:pointer;
transition:all 0.5s ease 0s;
-moz-transition:all 0.5s ease 0s; /* Firefox 4 */
-webkit-transition:all 0.5s ease 0s; /* Safari and Chrome */
-o-transition:all 0.5s ease 0s; /* Opera */
-ms-transition:all 0.5s ease 0s; /* IE */
}
.vertical{
-webkit-transform: rotate(90deg), translate(3em,3em);
-moz-transform: rotate(90deg) translate(3em,3em);
-o-transform: rotate(90deg) translate(3em,3em);
-ms-transform: rotate(90deg) translate(3em,3em);
transform: rotate(90deg) translate(3em,3em);
}
.horizontal{
-webkit-transform: rotate(0), translate(0,0);
-moz-transform: rotate(0) translate(0,0);
-o-transform: rotate(0) translate(0,0);
-ms-transform: rotate(0) translate(0,0);
transform: rotate(0) translate(0,0);
}
#tools{
display:block;
overflow:hidden;
height:1.2em;
width:0;
transition:width 1.5s ease 0s, height 1s ease 0s;
-moz-transition:width 1.5s ease 0s, height 1s ease 0s; /* Firefox 4 */
-webkit-transition:width 1.5s ease 0s, height 1s ease 0s; /* Safari and Chrome */
-o-transition:width 1.5s ease 0s, height 1s ease 0s; /* Opera */
-ms-transition:width 1.5s ease 0s, height 1s ease 0s; /* IE */
}
#freezer{
display:block;
overflow:hidden;
height:1.2em;
width:0;
transition:width 1s ease 0.5s, height 1s ease 0s;
-moz-transition:width 1s ease 0.5s, height 1s ease 0s; /* Firefox 4 */
-webkit-transition:width 1s ease 0.5s, height 1s ease 0s; /* Safari and Chrome */
-o-transition:width 1s ease 0.5s, height 1s ease 0s; /* Opera */
-ms-transition:width 1s ease 0.5s, height 1s ease 0s; /* IE */
}
#spicebox{
display:block;
overflow:hidden;
height:1.2em;
width:0;
transition:width 0.5s ease 1s, height 1s ease 0s;
-moz-transition:width 0.5s ease 1s, height 1s ease 0s; /* Firefox 4 */
-webkit-transition:width 1.5s ease 1s, height 1s ease 0s; /* Safari and Chrome */
-o-transition:width 0.5s ease 1s, height 1s ease 0s; /* Opera */
-ms-transition:width 0.5s ease 1s, height 1s ease 0s; /* IE */
}
And finally JS:
function switch_toolbox(direction){
var spicebox = document.getElementById('spicebox');
var opener = document.getElementById('opener');
if(direction=='close'){
closeem();
spicebox.addEventListener("transitionend", closeme, false);
}else{
openme();
opener.setAttribute('onclick','switch_toolbox("close")');
opener.addEventListener("transitionend", openem, false);
}
return false;
}
function openme(){
var opener = document.getElementById('opener');
opener.setAttribute('class','horizontal');
}
function closeme(){
var spicebox = document.getElementById('spicebox');
spicebox.removeEventListener("transitionend", closeme, false);
var opener = document.getElementById('opener');
opener.removeEventListener("transitionend", openem, false);
opener.setAttribute('class','vertical');
opener.setAttribute('onclick','switch_toolbox("open")');
var tools = document.getElementById('tools');
}
function openem(){
var opener = document.getElementById('opener');
opener.removeEventListener("transitionend", openem, false);
var spicebox = document.getElementById('spicebox');
spicebox.removeEventListener("transitionend", closeme, false);
var tools = document.getElementById('tools');
var freezer = document.getElementById('freezer');
tools.style.backgroundColor='#EBD3A3';
tools.style.width='20em';
freezer.style.width='20em';
freezer.style.backgroundColor='#B7CEEC';
spicebox.style.width='20em';
spicebox.style.backgroundColor='#FFA500';
}
function closeem(){
var tools = document.getElementById('tools');
var freezer = document.getElementById('freezer');
var spicebox = document.getElementById('spicebox');
freezer.style.height='1.2em';
spicebox.style.height='1.2em';
tools.style.height='1.2em';
tools.style.width='0';
freezer.style.width='0';
spicebox.style.width='0';
}
Hope this help, and this is what you were looking for
Best
Pifon