I need to add a fade in and fade out annimation to my image on existing code for slide show. The images must fade in /fade out when user click the buttons. Here is my code.
HTML:
<div id="imageSlider">
<button id="prevBTN" onclick="prev()"> <b>Prev</b> </button>
<button id="nextBTN" onclick="next()"> <b>Next</b> </button>
</div>
Javascript:
var images = [
"HTMLcert.jpg",
"CSScert.jpg",
"javaScriptCert.jpg",
"PHPcert.jpg"
];
var num = 0;
function next() {
var slider =
document.getElementById("slider");
num++;
if (num >= images.length) {
num = 0;
}
slider.src = images[num];
}
function prev() {
var slider =
document.getElementById("slider");
num--;
if (num <= 0) {
num = images.length - 1;
}
slider.src = images[num];
}
how can I add fade in and out to existing java script code .
You can add and remove a class to the active slider element in your javascript function like this:
var slider = document.getElementById("slider");
slider.className += " active";
setTimeout(function(){
slider.classList.remove("active");
}, 100);
And then your css will look something like this:
.active {
animation: fade 1s;
}
#keyframes fade {
from { opacity: 0; }
to { opacity: 1 }
}
You can do it using CSS3 annimation , by creating a custom animation , add a class using this last then toggle the class while clicking in the buttons .
bellow a working snippet :
var images = [
"http://ramg1.net/images/3.jpg",
"https://www.gregbowe.com/assets/img/htmlcert.jpg",
"http://www.lordlamer.de/wp-content/uploads/2011/02/php-cert.jpg",
"http://www.michellekeselgiancola.com/images/certs/uploads/phpcert.jpg"
];
var num = 0;
function next() {
var slider =
document.getElementById("slider");
num++;
if (num >= images.length) {
num = 0;
}
slider.classList.remove("fade");
slider.src = images[num];
setTimeout(function(){slider.classList.add("fade");},10);
//slider.classList.add("fade");
}
function prev() {
var slider =
document.getElementById("slider");
num--;
if (num <= 0) {
num = images.length - 1;
}
slider.classList.remove("fade");
slider.src = images[num];
setTimeout(function(){slider.classList.add("fade");},10);
//slider.classList.add("fade");
}
/* create the fade custom annimation wich set 0 to 1 opacity on an element */
#-webkit-keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* create the class that trigger the annimation */
.fade {
-webkit-animation: fade 2s ease; /* Safari 4+ */
-moz-animation: fade 2s ease; /* Fx 5+ */
-o-animation: fade 2s ease; /* Opera 12+ */
animation: fade 2s ease; /* IE 10+, Fx 29+ */
}
<div id="imageSlider">
<img id="slider" class="fade" src="http://ramg1.net/images/3.jpg" width="400px" height="80%" />
<button id="prevBTN" onclick="prev()"> <b>Prev</b> </button>
<button id="nextBTN" onclick="next()"> <b>Next</b> </button>
</div>
Related
I want to add some smooth transition or animation from the mouse enter event to the mouse leave.
JS :
/* mudar cor do logo maior */
var myImage = document.querySelector('img#logo-maior');
myImage.onmouseenter = function() {
var mySrc = myImage.getAttribute('src');
myImage.setAttribute ('src','images/type-logo-coral.png');
}
myImage.onmouseleave = function() {
var mySrc = myImage.getAttribute('src');
myImage.setAttribute ('src','images/type-logo.png');
}
HTML :
<div class="display">
<img id="modelos" src="images/modelos/1.png">
<img id="logo-maior" src="images/type-logo.png" alt="TYPE logo">
<!--
<button type="button" onclick="displayPreviousImage()">Previous</button>
<button type="button" onclick="displayNextImage()">Next</button>
-->
</div>
Use CSS Animation. Add class for each function that will trigger the animation
Try this code
css
.transition1{
animation: fadeIn1 1.5s;
-webkit-animation: fadeIn1 1.5s; ;
opacity: 1;
}
#keyframes fadeIn1{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
#-webkit-keyframeskeyframes fadeIn1{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
.transition2{
animation: fadeIn2 1.5s;
-webkit-animation: fadeIn2 1.5s; ;
opacity: 1;
}
#-webkit-keyframeskeyframes fadeIn2{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
javascript
var myImage = document.querySelector("img#logo-maior");
myImage.onmouseenter = function() {
myImage.classList.remove("transition2");
myImage.setAttribute("class", "transition1");
myImage.setAttribute("src", "../image2.jpg");
};
myImage.onmouseleave = function() {
myImage.classList.remove("transition1");
myImage.setAttribute("class", "transition2");
myImage.setAttribute("src","../image1.jpg"
);
};
html
<div class="display">
<img
id="logo-maior"
src="../img1.jpg"
alt="TYPE logo"
/>
</div>
In your CSS code:
img:hover {
(whatever styles you want for the hovering effect)
transition: all 0.5s ease-out;
}
For more information on transitions visit: https://developer.mozilla.org/en-US/docs/Web/CSS/transition
I created a page where the background colors of a div change every so often. I want to make it so that when the mouse is over(or hovers) the color changer pauses where it is, as long as the mouse hovers there. And when the mouse no longer hovers the div, the colors continue to change where it left off. The closest examples I ran into on this website used JQuery solutions. I am not looking for a JQuery solution. I am looking for a javascript solution. I appreciate any and all of your responses. Thank You!
var dammit = document.getElementById("muck");
var colorChange = document.getElementById("color-changer");
var colors = ["red", "blue", "green", "pink"];
var counter = 0;
function changer() {
if (counter >= colors.length) {
counter = 0;
};
colorChange.style.background = colors[counter];
counter++;
};
var myTimer = setInterval(changer, 3000);
body {
background: #FDCA40;
margin: 0;
padding: 0;
-webkit-transition: background 0.9s;
-moz-transition: background 0.9s;
transition: background 0.9s;
}
div#muck {
width: 100%;
height: 100vh;
}
<body id="color-changer">
<div id="muck"></div>
</body>
There is no way to pause a timer, but you can just stop the currently running one and then start a new one.
(FYI: All browsers that are within 5 years old at least support CSS transitions. No need to vendor prefix that.)
var source = document.getElementById("muck");
var colorChange = document.getElementById("color-changer");
var colors = ["red", "blue", "green", "pink"];
var counter = 0;
function changer(){
if (counter >= colors.length){
counter = 0;
};
colorChange.style.background = colors[counter];
counter++;
};
var myTimer = setInterval(changer, 1000);
// Stop the current timer when mouseover
source.addEventListener("mouseover", function(){ clearInterval(myTimer)});
// Start a new timer when mouse out
source.addEventListener("mouseout", function(){ myTimer = setInterval(changer, 1000);});
body{
background: #FDCA40;
margin: 0;
padding: 0;
transition: background 0.9s;
}
div#muck{
width: 100%;
height: 100vh;
}
<body id="color-changer">
<div id="muck"></div>
</body>
You can do this purely in CSS but you need to use animation. I also added some CSS variables so the animation is easier to change.
body {
background: #FDCA40;
margin: 0;
padding: 0;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
#keyframes example {
0% {background-color: red;}
20% {background-color: blue;}
40% {background-color: green;}
80% {background-color: pink;}
100% {background-color: red;}
}
div#muck {
--animation-transition-speed: 0.9s;
--number-of-colors: 4;
width: 100%;
height: 100vh;
-webkit-animation-name: example;
-webkit-animation-duration: calc(var(--animation-transition-speed) * var(--number-of-colors));
animation-name: example;
animation-duration: calc(var(--animation-transition-speed) * var(--number-of-colors));
animation-iteration-count: infinite;
}
div#muck:hover {
animation-play-state: paused;
}
<body id="color-changer">
<div id="muck"></div>
</body>
While this doesnt really pouse the interval it mimics what you need very closely..
You can use a flag.. something like this:
var output = document.getElementById('id')
var isPaused = false;
var counter = 0;
window.setInterval(function() {
if(!isPaused) {
counter++;
if (counter >= colors.length) {
counter = 0;
};
colorChange.style.background = colors[counter];
}
}, 1000);
document.getElementById('muck').addEventListener('mouseenter', function(e) {
isPaused = true;
});
document.getElementById('muck').addEvenetListener('mouseleave', function(e) {
isPaused = false;
});
from Javascript - Pausing setInterval()
I'd love to add a blinking effect like this, but I think setInterval is overkill for what's mere cosmetic stuff:
jQuery(function(){
$("#watch").each(function(){
var $box = $(this);
var show = true;
setInterval(function(){
var m = moment();
$box.text(show ? m.format('H:mm') : m.format('H mm'));
show = !show;
}, 500);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script>
<div id="watch">--:--</div>
Is there a newer JavaScript API I could be using, or maybe a CSS transition?
Using the CSS provided by this answer, you can do this
jQuery(function() {
$("#watch").each(function() {
var $box = $(this);
setInterval(function() {
var m = moment();
$box.html(m.format('H') + '<span class="blink_me">:</span>' + m.format('mm'));
}, 1000);
});
});
.blink_me {
animation: blinker 1s infinite;
}
#keyframes blinker {
50% {
opacity: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script>
<div id="watch">--:--</div>
For the records, this is the final CSS I wrote based on George's answer:
section {
font-size: 5rem;
}
.stop-watch span {
animation: blink 1s infinite;
}
#keyframes blink{
0% {
animation-timing-function: steps(1, end);
opacity: 1;
}
50% {
animation-timing-function: steps(1, end);
opacity: 0;
}
}
<section class="stop-watch">
1<span>:</span>59
</section>
I'm trying to build a simple slideshow where an image slides out for two seconds whilst another image appears beneath it.
(function ready(fn) {
if (document.readyState != 'loading') {
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
})(init);
function init() {
var pictureCollection = document.getElementsByClassName('slideshowimg');
var pictureTracker = document.getElementsByClassName('trackPoint');
var count = 0;
//load initial pic
pictureCollection[count].style.animation = 'fadein10 0.1s forwards';
pictureTracker[count].style.backgroundColor = 'black';
//Fade
var fadetime = setInterval(function() {
fading()
}, 5000);
function fading() {
pictureCollection[count].style.animation = 'fadeout10 2s forwards';
pictureTracker[count].style.backgroundColor = 'gray';
if (count == pictureCollection.length - 1) {
count = -1;
}
count++;
pictureCollection[count].style.animation = 'fadein10 2s forwards';
pictureTracker[count].style.backgroundColor = 'black';
}
function fixer(direction) {
//remove event listener to ensure it doesn't reset EVERY transition
event.target.removeEventListener('transitionend', fixer);
pictureCollection[count].style.animation = 'fadeout10 0.1s forwards';
pictureCollection[count].style.transform = 'translateX(0px)';
//reset counter
if (count === 3 && direction === "right") {
count = 0;
return;
}
if (count === 0 && direction === "left") {
count = 3;
return;
}
if (direction === "right") {
count++;
}
if (direction === "left") {
count--;
}
}
//add event listener to handle user clicks to each lside
for (i = 0; i < pictureCollection.length; i++) {
pictureCollection[i].addEventListener('click', function() {
//cancel autofade
clearInterval(fadetime);
//check where on pic user clicked
if (event.clientX > event.target.width / 2) {
event.target.style.animation = 'nofade10 0.1s forwards';
pictureTracker[count].style.backgroundColor = 'gray';
if (count === 3) {
pictureCollection[0].style.animation = 'fadein5 0.1s forwards';
pictureTracker[0].style.backgroundColor = 'black';
} else {
//bring next pic forwards and unhide
pictureCollection[count + 1].style.animation = 'fadein5 0.1s forwards';
pictureTracker[count + 1].style.backgroundColor = 'black';
}
//slide out right
event.target.style.transform = 'translateX(250px)';
//ensure that when the picture slides out it repositions behind
pictureCollection[count].addEventListener('transitionend', fixer('right'));
}
//or going left . . .
else {
pictureCollection[count].style.animation = 'nofade10 0.1s forwards';
pictureTracker[count].style.backgroundColor = 'gray';
if (count === 0) {
pictureCollection[3].style.animation = 'fadein5 0.1s forwards';
pictureTracker[3].style.backgroundColor = 'black';
} else {
//bring next pic forwards and unhide
pictureCollection[count - 1].style.animation = 'fadein5 0.1s forwards';
pictureTracker[count - 1].style.backgroundColor = 'black';
}
//slide out left
event.target.style.transform = 'translateX(-' + pictureCollection[count].width + 'px)';
//ensure that when the picture slides out it repositions behind
pictureCollection[count].addEventListener('transitionend', fixer("left"), false);
}
});
}
}
.slideshowimg {
height: 100%;
width: 100%;
position: inherit;
z-index: 0;
opacity: 0;
transition: all 2s ease-in-out;
}
#sliderCase {
overflow: hidden;
position: absolute;
z-index: 5;
background-color: black;
height: 150px;
width: 225px;
}
.trackPoint {
height: 10px;
width: 10px;
margin: 0 2px;
background-color: gray;
display: inline-block;
border-radius: 2em;
text-align: center;
position: relative;
top: 160px;
left: 75px;
}
#keyframes fadein10 {
from {
opacity: 0;
}
to {
opacity: 1;
z-index: 10;
}
}
#keyframes fadeout10 {
from {
opacity: 1;
}
to {
opacity: 0;
z-index: 0;
}
}
#keyframes fadein5 {
from {
opacity: 0;
}
to {
opacity: 1;
z-index: 5;
}
}
#keyframes nofade10 {
from {
opacity: 1;
}
to {
opacity: 1;
z-index: 10;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf8'>
<script src='mainedit.js'></script>
<link rel='stylesheet' href='stylesedit.css' type='text/css'></link>
<title>Slideshow test</title>
</head>
<body>
<h1> Slideshow test: </h1>
<div id='sliderCase'>
<div style='background-color:red' class='slideshowimg'>pic 1</div>
<div style='background-color:blue' class='slideshowimg'>pic 2</div>
<div style='background-color:green' class='slideshowimg'>pic 3</div>
<div style='background-color:orange' class='slideshowimg'>pic 4</div>
</div>
<span class='trackPoint'></span>
<span class='trackPoint'></span>
<span class='trackPoint'></span>
<span class='trackPoint'></span>
</body>
</html>
It seems as if the transition end event is firing as the transition starts. Additionally the movement of slides seems to be inverted in the snippet, yet works locally.
I have used coloured divs in place of images for the sake of this example.
This isn't correct:
pictureCollection[count].addEventListener('transitionend', fixer("left"), false);
Here, you are calling and adding the return value of fixer("left") to the event listener, which isn't a valid value anyway.
How do I use divs rather than IMAGES tags for this. I tried getElementsByTagName("div"), but they are in a #slider-content div. so I am having trouble getting them from slide1 slide2 - div classes. THANKS.
window.onload = function() {
function e(eel) {
return document.getElementById(eel);
}
function t(tel) {
return document.getElementsByTagName(tel);
}
// SLIDER
var slider = e('slider'),
sliderImages = slider.getElementsByTagName('img'),
noOfImages = sliderImages.length,
wheee, n = 0,
sliderContent = e('slider-content'),
move,
imgWidth = (100 / noOfImages) + "%";
function sliderInit() {
sliderContent.style.width = (noOfImages * 100) + "%";
for (var i = 0; i < noOfImages; i++) {
sliderImages[i].style.width = imgWidth;
}
}
wheee = {
slide: function() {
move = setInterval(function() {
if (n < (noOfImages-1)) n++;
else n = 0;
sliderContent.style.marginLeft = "-"+n+"00%";
}, 3000);
},
stop: function() {
window.clearInterval(move);
}
}
wheee.slide();
sliderInit();
sliderContent.onmouseover = wheee.stop;
sliderContent.onmouseout = wheee.slide;
}
html:
<div id="slider">
<div id="slider-content">
<div class="slide1">This is slide one</div><!-- slide one -->
<div class="slide2">This is slide two</div><!-- slide one -->
<div class="slide3">This is slide three</div><!-- slide one -->
</div><!-- slide content -->
</div><!-- slider -->
CSS:
#slider-content{
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}
.slide1{
background: #ff143f;
}
.slide2{
background: #424242;
}
.slide3{
background: #ff00d2;
}
Using straight JavaScript, the easiest way is likely to add a name to the divs you want to control (i.e. <div name="slider"></div>) and then use
sliderImages = slider.getElementsByName('slider'),
The rest of your code should work with that.