Adding a css attribute to a class after transitionend - javascript

I am doing some animation works with css keyframes.First i need to keep the element's opacity zero then after the animation is end then it would be one(1).I have wrote some jQuery codes and still not works.
Css codes
.slider_img {
position: absolute;
opacity: 0;
left: 24%;
top: 50vh;
animation-name: dropImg;
animation-duration: 2s;
animation-delay: 1s;
transform: translateY(-50%);
}
jQuery
$(window).ready(function() {
$('.slider_img').on("webkitTransitionEnd", function(){
$('.slider_img').css('opacity', 1);
})
});
What sould i do now

Assuming your animation starts when your page loads:
$(document).ready(function() {
var aDuration = parseInt($('.slider_img').css('animation-duration').slice(0, -1)) * 1000;
var aDelay = parseInt($('.slider_img').css('animation-delay').slice(0, -1)) * 1000;
var delay = aDuration + aDelay;
setTimeout(function() {
$('.slider_img').css('opacity', 1);
}, delay);
});
EDIT: Added the delay from animation-delay.

Your problem is that you are using the wrong event transitionend when you should be looking for animationend (plus of course you will need all the prefixes). For example:
$('.slider_img').on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function() {
$('.slider_img').css('opacity', 1);
});

You could do something like:
$(window).ready(function() {
var sliderImg = $('.slider_img'),
delay = sliderImg.css('animation-duration').replace("s","") * 1000;
setTimeout(function(){
sliderImg.css('opacity', 1);
}, delay);
});

Related

Trying to make a transition with opacity on images

like my title says, I'm trying to make a transition with opacity (0 to 1 with 2secondes interval) on images, but I don't know how to make it.
The transition only works on the first image but not on the others, and I can't figure it out why.
So I hope you'll help me to understand my mistakes, I'm new on javascript. Thank you in advance, here my code
My HTML file :
<img src="img/1.jpg" alt="slide-photo">
My CSS file :
#slideshow-home img {
width: 100%;
opacity: 0;
transition: 1s ease-in-out;
}
My JS file :
var image = document.querySelector('img');
var img = 1 ;
window.setInterval(changeImage, 2000);
function changeImage() {
image.setAttribute('src', 'img/' + img + '.jpg');
image.style.opacity = 1;
img++;
if(img === 6) {
img = 1;
}
}
This is how i handle fade in transitions for images, the benefit is it doesn't start until the image has actually been loaded so it should never be choppy while fading in
JS
var image = document.querySelector('img');
var img = 1;
window.setInterval(changeImage,5000);
function changeImage() {
image.classList.remove('fadeIn')
image.src = 'img/'+img+'.jpg'
img++
if (img == 6) {
img = 1;
}
}
image.addEventListener('load', () => { // This function looks at the image and every time an image is loaded i.e whenever it gets a new src, it does a fade in animation
void(image.offsetHeight)
image.classList.add('fadeIn')
})
CSS
I normally do this with an animation, like below
#slideshow-home img {
width: 100%;
opacity: 0;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeIn {
animation:fadeIn 2s forwards;
}

ScrollReveal Not Working in Custom Viewport

I've read many tutorials, but I'm struggling to get ScrollReveal to work. I have two major columns, with the left using a scroll bar, and the right with no scrolling.
There are no errors in the console, and I get this when I inspect the div element that I want revealed:
<div class="foo" data-sr-id="1" style="; visibility: visible; -webkit-transform: translateY(0) scale(1); opacity: 1;transform: translateY(0) scale(1); opacity: 1;-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, opacity 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; transition: transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, opacity 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; ">
text1
</div>
Here is what's in the head section:
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script>
window.sr = ScrollReveal();
</script>
<style>
/* Ensure elements load hidden before ScrollReveal runs */
.sr .fooReveal {
visibility: hidden;
}
</style>
Right before the closing body tag, I have this:
<script>
// window.sr = ScrollReveal();
// as a DOM node...
var fooContainer = document.getElementById('fooContainer');
sr.reveal('.foo', {
container: fooContainer
});
console.log(fooContainer)
// as a selector...
sr.reveal('.bar', {
container: '#barContainer'
});
</script>
Finally, when I type ScrollReveal into the console, I get this:
ScrollReveal
15:10:28.907 ƒ e(n){return"undefined"==typeof this||Object.getPrototypeOf(this)!==e.prototype?new e(n):(O=this,O.version="3.3.6",O.tools=new E,O.isSupported()?(O.tools.extend(O.defaults,n||{}),O.defaults.container=…
Any ideas what I'm doing wrong?
This is my live site.
I will explain this functions steps:
jQuery(window).on('load',function() {
var windowHeight, windowScrollPosTop, windowScrollPosBottom = 0; // init where we are
function calcScrollValues() {
windowHeight = jQuery(window).height();
windowScrollPosTop = jQuery(window).scrollTop();
windowScrollPosBottom = windowHeight + windowScrollPosTop;
}
jQuery.fn.revealOnScroll = function(direction, speed) {
return this.each(function() {
var objectOffset = jQuery(this).offset();
var objectOffsetTop = objectOffset.top;
if (!jQuery(this).hasClass("hidden")) {
// if argument is "right"
if (direction == "right") {
jQuery(this).css({
"opacity" : 0,
"right" : "700px",
"position" : "relative"
});
// if argument is "left"
} else {
jQuery(this).css({
"opacity" : 0,
"right" : "-700px",
"position" : "relative"
});
}
jQuery(this).addClass("hidden");
}
if (!jQuery(this).hasClass("animation-complete")) {
// if the page has been scrolled far enough to reveal the element
if (windowScrollPosBottom > objectOffsetTop) {
jQuery(this).animate({"opacity" : 1, "right" : 0}, speed).addClass("animation-complete");
} // end if the page has scrolled enough check
} // end only reveal the element once
});
}
function revealCommands() {
jQuery("h1").revealOnScroll("left", 1500);
jQuery("li:odd").revealOnScroll("left", 1500);
jQuery("li:even").revealOnScroll("left", 1500);
jQuery("s").revealOnScroll("left", 1500);
jQuery("div").revealOnScroll("right", 900);
}
calcScrollValues();
revealCommands();
// run the following on every scroll event
jQuery(window).scroll(function() {
calcScrollValues()
revealCommands();
}); // end on scroll
});
Just make sure you have jQuery loaded and then add the above function to the script. I have to go now, but this function is way extensible, I will update it later.
Here is a link with a demo:
https://codepen.io/damianocel/pen/pjdrWr

How to add a fade in and out transition to this code without jquery

well its a fairly basic code for a slideshow in html using css and javascript.
this is the javascript part how can i add a fade in and fade out to this code without jquery
<script type="text/javascript">
var step = 0
var whichimage = 0
function slideit() {
if (!document.images)
return
document.getElementById('slide').src = slideimages[step].src
whichimage = step
if (step < 3)
step++
else
step = 0
setTimeout("slideit()", 5000)
}
slideit()
</script>
The simplest way would be to use CSS to animate element opacity:
var el = document.getElementById('e');
setInterval(function(){
el.className = el.className == '' ? 'show' : '';
}, 2000);
#e {display: inline-block; width: 50px; height: 50px; background: #afa; opacity: 0; transition: opacity 1s linear}
#e.show {opacity: 1}
<div id="e"></div>
In your case you'd have to set when the previous element fades out and when the new one fades in using setTimeouts. I could write you a more accurate code, but not without seeing the markup/the whole thing. This should be enough to get you started.

Trying to implement a sliding progressbar without using gif

I am trying to implement a sliding progrees bar. I want the progress to gradually increase.
I try:
HTML
<div id="progressKeeper">
<div id="progress"></div>
</div>
CSS
#progressKeeper {
width: 800px;
height: 25px;
border: 3px double #003366;
margin: 0px 10px;
padding: 3px;
}
JavaScript
var el = $('#progress');
var steppedIncreaseAmount = ($('#progressKeeper').width()) / 100;
for (var i = 0; i < 100; i++) {
el.width(el.width() + steppedIncreaseAmount+ 'px');
}
See this jsfiddle
But it just increases suddenly. I want a smooth effect, like a fade.
You need to set some kind of delay between the update of these values. However, because it appears that you're using jQuery, you can easily do something like this:
$(document).ready(function() {
var el = $('#progress');
el.animate({
width: "100%"
}, 1800);
});​
http://jsfiddle.net/VbVBP/2/
Another way, if you really want to keep the setup you've got going now, would be do just add a setTimeout counter to your for loop like this:
var el = $('#progress');
var steppedIncreaseAmount = ($('#progressKeeper').width()) / 100;
for (var i = 0; i < 100; i++) {
setTimeout(function(){
el.width(el.width() + steppedIncreaseAmount+ 'px');
}, 1+i*20);
}​
http://jsfiddle.net/VbVBP/3/
A simple for-loop is updating the values way faster than your eye can catch up....
You can use a timer function like setInterval for basic JS animation. This would work like:
var increase = setInterval(function(){
el.width(el.width() + steppedIncreaseAmount+ 'px');
}, 50); //50 is the interval in ms, i.e the function inside the interval gets called 20 times per second
When you are done with the animation (progress is at 100%) you should cancel the interval:
clearInterval(increase);
See a working fiddle and MDN docs on setInterval
If you want to dig deeper into the realms of JavaScript animation you might also want to learn about requestAnimationFrame
Try using animation:
el.animate({ width: "+=" + steppedIncreaseAmount }, 500);
Oh, don't use javascript for this. You can do it with only CSS3 animations.
#-webkit-keyframes progress {
from { }
to { width: 100% }
}
And in progress bar:
-webkit-animation: progress 2s 1 forwards;
-moz-animation: progress 2s 1 forwards;
-ms-animation: progress 2s 1 forwards;
animation: progress 2s 1 forwards;
Working example: http://jsfiddle.net/VbVBP/4/
I set up a demo of what I could figure out. http://jsfiddle.net/VbVBP/5/
I set the time of update to 300ms and the speed of that update animation to 300 also so it is constantly animating.
Instead of using the random value you would use whatever percentage complete your operation is.
<div id="progressKeeper">
<div id="progress"></div>
</div>​
var randomPercentInt = 0;
function percentComplete(percent) {
var el = $('#progress');
el.animate({
width: percent
}, 300);
}
$(document).ready(function() {
percentComplete('0%');
});
function randomPercent() {
var randomNumber = Math.floor(Math.random() * 10);
randomPercentInt += randomNumber;
console.log(randomPercentInt);
if(randomPercentInt>100)
{
randomPercentInt = 100;
clearInterval(clearme);
}
percentString = randomPercentInt.toString() + '%';
percentComplete(percentString);
}
clearme = setInterval(randomPercent, 300);​

simple fade not working

I've made a simple box with CSS, I'm trying to fade it by dynamically changing it's opacity using the setInterval object.
http://jsfiddle.net/5gqRR/7/
CSS
#box {
margin:0px auto;
margin-top:10px;
height:50px;
width:50px;
background:black;
}
JAVASCRIPT
var fade;
function select(id) {
return document.getElementById(id);
}
function disBox() {
fade=setInterval(function(){
select("box").style.opacity-=0.1;
},300);
if (select("box").style.opacity==0) {
clearInterval("fade");
select("box").style.display="none";
}
else {
select("box").style.display="block";
}
}
The problem is that the "-=" operator starts subtracting the opacity from 0 instead of 1.
Can someone please explain why this happens?
Your check about the opacity should be inside the loop.
function select(id) {
return document.getElementById(id);
}
// Run at loading
window.onload = function () {
// Preload variables
var box = select('box'), opacity = 1, fade;
// Looping
fade = setInterval(function(){
// Calculate and applying opacity
opacity = Math.max( 0, opacity - 0.1 );
box.style.opacity = opacity;
// Stoping loop when box isn't visible
if ( !opacity )
clearInterval(fade);
},30);
};
​Demo: http://jsfiddle.net/5gqRR/8/
You can't set an onload event to div element. Instead of that you can do:
HTML
<div id="box"></div>
JavaScript
var fade;
function select(id) {
return document.getElementById(id);
}
function disBox() {
fade = setInterval(function(){
select("box").style.opacity-=0.1;
},300);
if (select("box").style.opacity==0) {
clearInterval("fade");
select("box").style.display="none";
}
else {
select("box").style.display="block";
}
}
window.onload = (function() {
disBox();
})();
Demo
According to edit
select("box").style.opacity = 1; // add this line to set initial opacity
fade = setInterval(function(){
select("box").style.opacity-=0.1;
},300);

Categories

Resources