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
Related
I want to change my images with javascript and add an fade effect.
This is my css for the fade effect:
var image=document.getElementById("image");
var currentPos = 0;
var images = ["foto1.jpg","foto2.jpg","foto3.jpg"]
function volgendefoto() {
if (++currentPos >= images.length) currentPos = 0;
image.src = images[currentPos];
}
setInterval(volgendefoto, 4100);
#map {
height:1000px;
width:1000px;
background:black;
}
#overlay {
z-index:2;
background:white;
height:1000px;
width:1000px;
opacity:0;
-webkit-transition: opacity 0.1s;
-ms-transition: opacity 0.1s;
-moz-transition: opacity 0.1s;
-o-transition: opacity 0.1s;
transition: opacity 1s;
margin-top:-1000px;
transition-delay: 0.1s;
-webkit-transition-delay: 0.1s;
}
#overlay:hover {
opacity:.8;
transition-delay: 0s;
-webkit-transition-delay: 0s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='map'>
<img id="image" src="foto1.jpg">
<div id='overlay'></div>
</div>
It is for a school project where we are making a responsive website, so I am going to add this to that site.
Tried your piece of code which gives fade-out effect for the image on hover.
[You can see the output below][1]
[1]: https://jsfiddle.net/cxLjLnu8/1/ "Output here"
Is this what you did and expected?
Which effect you are in need of fade-in
or fade-out?
and
do you need the effect on Hover or on sliding the images?
I am looking for a native JS solution to toggle div display using display:'none' and display:'block' properties. I have the first part done. I only need the part to do a simple fadeIn and fadeOut animation.
I need to use native JS and display:block,none.
var e = document.getElementById('calendarPickerContainer');
if (e.className == 'visible') {
e.className = 'hidden';
} else {
e.className = 'visible';
}
need to adapt to this css
.visible{
display:block;
}
.hidden {
display:none;
}
If you wanna use a pure JavaScript fadeIn and fadeOut, try this:
transition: opacity 1s linear;
This is a pure CSS method.
#cont {-webkit-transition: opacity 1s linear; -o-transition: opacity 1s linear; transition: opacity 1s linear;}
#cont.hidden {opacity: 0;}
<button onclick="cont.classList.add('hidden'); setTimeout('cont.style.display=\'none\'', 1000);">Click</button>
<div id="cont">
Hello
</div>
Working Snippet (includes toggle):
#cont {-webkit-transition: opacity 1s linear; -o-transition: opacity 1s linear; transition: opacity 1s linear; opacity: 1;}
#cont.hidden {opacity: 0; -webkit-transition: opacity 1s linear; -o-transition: opacity 1s linear; transition: opacity 1s linear;}
<button onclick="if (cont.style.display != 'none') { cont.classList.add('hidden'); setTimeout('cont.style.display=\'none\'', 1000); } else {cont.style.display='block'; setTimeout('cont.classList.remove(\'hidden\')', 10);}">Click</button>
<div id="cont">
Hello
</div>
You can achieve this easily with CSS3
.visible {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
Native JS fade function:
var s = document.getElementById('calendarPickerContainer').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();
You can simplfy this with classList
document.querySelector('.toggle').addEventListener('click',function(e) {
e.target.classList.toggle('hide');
})
Css:
div {
transition:all 0.3s ease-in;
}
.hide {
opacity: 0;
}
We're using opacity since display cannot be animated.
Example
I'm animating the images so that when hovered over the opacity goes up to 1, that part is working perfectly fine however when images are hovered over in chrome the 2nd column flickers a tiny bit to the side. I've tested it in IE and Firefox aswell and have no issues.
Check it for yourself here: http://abmenzel.com/work/
HTML:
<body class="blue4">
<div class="content">
<div class="work-item blue4">
<img src="img/Template-2-Intro.png"/>
</div>
</div>
</body>
CSS:
.work-item{
width:25%;
opacity:0.8;
overflow:hidden;
display:block;
float:left;
}
img{
width:100%
}
.work-item:hover{
opacity:1;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
I'm also using a script to set the height equal to the dynamic width, which might have something to do with it but I am unsure..
SCRIPT:
$(function() {
var div = $('.work-item');
var width = div.width();
div.css('height', width-5);
});
First of all, put your transition properties in normal element, not on :hover state.
Then, if you need only transition on opacity, use :
opacity 0.2s ease-in-out 0s
That flicker is a known bug in Webkit browsers, it happens when you animate opacity on fluid elements (here 25%).
Here's a workaround:
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0);
I know it sounds like a hack, but it works...
I use translate3D instead of translateX:
img {-webkit-transform: translate3D(0,0,0);}
Hi I would like to blink an image. There is a demo here.
In my website it makes all the images blinking. I would like to blink only one certain image.
Do you have any idea how to do that?
Thanks.
If you inspect it, the blinking is in the css:
-moz-animation: blink normal 2s infinite ease-in-out;
-webkit-animation: blink normal 2s infinite ease-in-out;
-ms-animation: blink normal 2s infinite ease-in-out;
animation: blink normal 2s infinite ease-in-out;
we can provide blinking image illusion through javascript coding by changing the display property of the image to block / none with periodic time intervals...
however, this will increase load at the client side as we need a script to run continously to blink an image...
i would prefer to prepare a GIF blinking image and place it on the website... ( if the requirements permits)
In the tutorial, the effect is set to every image on the page, because the "img" selector selects every image on the page.
img {
border:1px solid #000;
-moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
/* order: name, direction, duration, iteration-count, timing-function */
-moz-animation:blink normal 2s infinite ease-in-out; /* Firefox */
-webkit-animation:blink normal 2s infinite ease-in-out; /* Webkit */
-ms-animation:blink normal 2s infinite ease-in-out; /* IE */
animation:blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
}
Use a class instead; replace img with .blink and add this class to your image:
<img src="..." class="blink" />
From the demo link that you have given, you can apply a class for images or multiple images that you want to blink or unblink.
Here is the Working fiddle for the same.
The HTML
<div>
<img width="350px" height="237px" alt="Don't Blink" src="http://www.websitecodetutorials.com/code/images/dont-blink.jpg">
<img class="abc" width="350px" height="237px" alt="Don't Blink" src="http://www.websitecodetutorials.com/code/images/dont-blink.jpg">
<img width="350px" height="237px" alt="Don't Blink" src="http://www.websitecodetutorials.com/code/images/dont-blink.jpg">
<img width="350px" height="237px" alt="Don't Blink" src="http://www.websitecodetutorials.com/code/images/dont-blink.jpg">
<div>
The CSS:
#-moz-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Firefox */
#-webkit-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Webkit */
#-ms-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* IE */
#keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Opera and prob css3 final iteration */
img {
border:1px solid #000;
-moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
/* order: name, direction, duration, iteration-count, timing-function */
-moz-animation:blink normal 2s infinite ease-in-out; /* Firefox */
-webkit-animation:blink normal 2s infinite ease-in-out; /* Webkit */
-ms-animation:blink normal 2s infinite ease-in-out; /* IE */
animation:blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
}
img {
animation: 2s ease-in-out 0s normal none infinite blink;
border: 1px solid #000000;
transition: all 1s ease-in-out 0s;
}
img.abc {
animation: none;
transition: none;
}
So by default all the images are blinking, you just need to apply class .abc (from this example) to unblink the images that you do not want to blink and vice-versa.
Hope this Helps.
As seen here:
How do you make an image blink?
#keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
img {
animation: blink 1s;
animation-iteration-count: infinite;
}
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');
});