There are 3 css classes/phases.
The active class is the current background that is show.
The unactive class is given to the previous background. And it makes the background slide out to the left of the screen.
The transport class is given to the background after it has received the unactive class. The transport class moves the background back to the right of the screen.
The slider totally ignores the unactive class for some reason. The background never slides to the left of the screen.
var slides = document.getElementsByClassName('bg');
var i = 0;
// When page loads show first background
(function() {
slides[i].className += ' active';
i++;
})();
function changeSlide() {
// Slide previous slide to the left of the screen
if(i === 0) {
slides[2].className = 'bg unactive';
}
else {
slides[i - 1].className = 'bg unactive';
}
// Slide the current slide in from the right of the screen
slides[i].className += ' active';
// Make the slide go back to the right of the screen
if(i === 0) {
slides[2].className = 'bg transport';
slides[2].className = 'bg';
}
else {
slides[i - 1].className = 'bg transport';
slides[i - 1].className = 'bg';
}
i++
if(i === slides.length) {
i = 0;
}
}
setInterval(changeSlide, 2000);
* {
margin: 0;
padding: 0;
}
html, body, .bg {
width: 100%;
height: 100%;
}
.bg {
position: absolute;
left: 100%;
background-color: tan;
-webkit-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
/* The background that is shown */
.active {
position: absolute;
left: 0;
}
/* Make the background go to the left of the screen */
.unactive {
position: absolute;
left: -100%;
}
/* Hide the background and make it go back to the right of the screen */
.transport {
display: none;
position: absolute;
left: 100%;
z-index: -1;
}
<!-- background 1 -->
<div class="bg" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Birnbaum_am_Lerchenberg_retouched.jpg/310px-Birnbaum_am_Lerchenberg_retouched.jpg)">
</div>
<!-- background 2 -->
<div class="bg" style="background-image: url(https://cdn.pixabay.com/photo/2015/03/29/01/54/tree-696839_960_720.jpg)">
</div>
<!-- background 3 -->
<div class="bg" style="background-image: url(http://www.slate.com/content/dam/slate/articles/health_and_science/science/2017/06/170621_SCI_TreePlantingHoax.jpg.CROP.promo-xlarge2.jpg)"></div>
Check out this codepen. I have the same code above except I commented out a block of javascript code. Watch the slides go in and out. That is how I want it. But I want the slider to infinitely repeat and never stop.
https://codepen.io/anon/pen/aVoNNd
You are overwriting unactive with slides[ ].className = 'bg'; a few lines below (same with transport), therefore its never applied.
I also had to change some z-index values and remove a few things to make it work. (See the comments in the code)
var slides = document.getElementsByClassName('bg');
var i = 0;
// When page loads show first background
(function() {
slides[i].className += ' active';
i++;
})();
function changeSlide() {
// Slide previous slide to the left of the screen
if(i === 0) {
slides[slides.length-1].className = 'bg unactive';//Changed 2 to slides.length-1 to avoid hardcoding values
}
else {
slides[i - 1].className = 'bg unactive';
}
// Slide the current slide in from the right of the screen
slides[i].className = 'bg active';// removed += to override transport
// Make the slide go back to the right of the screen
// prepare NEXT slide
if(i === slides.length-1) {
slides[0].className = 'bg transport';
//slides[2].className = 'bg'; // dont override transport
}
else {
slides[i + 1].className = 'bg transport';
//slides[i - 1].className = 'bg'; // dont override transport
}
i++
if(i === slides.length) {
i = 0;
}
}
setInterval(changeSlide, 2000);
* {
margin: 0;
padding: 0;
}
html, body, .bg {
width: 100%;
height: 100%;
}
.bg {
position: absolute;
left: 100%;
background-color: tan;
-webkit-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
/* The background that is shown */
.active {
position: absolute;
left: 0;
}
/* Make the background go to the left of the screen */
.unactive {
position: absolute;
left: -100%;
z-index: -1; /*added*/
}
/* Hide the background and make it go back to the right of the screen */
.transport {
/*display: none;*/
position: absolute;
left: 100%;
z-index: -2; /*changed to -2*/
}
<!-- background 1 -->
<div class="bg" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Birnbaum_am_Lerchenberg_retouched.jpg/310px-Birnbaum_am_Lerchenberg_retouched.jpg)">
</div>
<!-- background 2 -->
<div class="bg" style="background-image: url(https://cdn.pixabay.com/photo/2015/03/29/01/54/tree-696839_960_720.jpg)">
</div>
<!-- background 3 -->
<div class="bg" style="background-image: url(http://www.slate.com/content/dam/slate/articles/health_and_science/science/2017/06/170621_SCI_TreePlantingHoax.jpg.CROP.promo-xlarge2.jpg)"></div>
Related
I'm trying to fade in the blue square with the first click of the button. And then on the second click, the blue square fades out and the red one fades in.
As you can see when you test it, it doesn't work that way. I don't know where I am wrong and If anyone can show me how to fix it I'd appreciate it.
var currentscene = 0;
function next() {
currentscene++;
if (currentscene = 1) {
var element = document.getElementById("blue");
element.classList.add("fade-in");
}
if (currentscene = 2) {
var element = document.getElementById("blue");
element.classList.add("fade-out");
var element = document.getElementById("red");
element.classList.add("fade-in");
}
}
.squareblue {
height: 50px;
width: 50px;
top: 50px;
background-color: blue;
position: absolute;
opacity: 0;
animation-fill-mode: forwards;
}
.squarered {
height: 50px;
width: 50px;
top: 100px;
background-color: red;
position: absolute;
opacity: 0;
animation-fill-mode: forwards;
}
.fade-out {
animation: fadeOut ease 2s
}
#keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.fade-in {
animation: fadeIn ease 2s
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div2 id="blue" class="squareblue"></div2>
<div2 id="red" class="squarered"></div2>
<button class="button" onclick="next()">next</button>
A few mistakes, and a few things to improve.
Inside your if conditionals, you were assigning the value of 1 and 2 to the variable currentscene instead of using the comparison operator ==. I added the remainder operator to be able to continue the loop indefinitely.
Instead of grabbing the element from the dom each loop, I just defined the elements at the top, and continued to reference the save variable.
instead of using a css keyframes animation, I used the css transition property to add animation to the changing of opacity.
If you have any questions, please ask 🚀
let currentscene = 0;
const blue = document.getElementById("blue");;
const red = document.getElementById("red");;
function next() {
currentscene++;
if (currentscene % 2 == 0) {
blue.classList.remove("opaque");
red.classList.add("opaque");
}
else if (currentscene % 2 == 1) {
red.classList.remove("opaque");
blue.classList.add("opaque");
}
}
.squareblue,
.squarered {
height: 50px;
width: 50px;
position: absolute;
opacity: 0;
animation-fill-mode: forwards;
transition: 1s;
}
.squareblue {
top: 50px;
background-color: blue;
}
.squarered {
top: 100px;
background-color: red;
}
.opaque {
opacity: 1;
}
button {user-select: none}
<div2 id="blue" class="squareblue"></div2>
<div2 id="red" class="squarered"></div2>
<button class="button" onclick="next()">next</button>
I want to display the word 'Hello' on the home page of a website. I used CSS to make the 'Hello' transition up as the page loads in the beginning. I would like to implement a shuffling animation that randomly shuffles between the word Hello in different languages. I would like to do so with an animation where as the 'Hello' slides up at the beginning, the 'Hello' slides up more, fades out and disappears. As this occurs, a 'Bonjour' for example slides up from beneath and takes place. I picture this repeating forever.
Is there any way to implement such animation using CSS, JavaScript, Jquery, or any other web tools? Below is the HTML, CSS, and JS structure I have that only achieves the initial transition as the page loads:
<body>
<section>
<h1 id="switch">Hello</h1>
</section>
</body>
section {
text-align: left;
}
section h1 {
font-size: 100px;
font-weight: 420;
position: absolute;
top: 130px;
left: 200px;
opacity: 0;
transform: translateY( 43px );
animation-name: fade-in;
animation-duration: 0.6s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
var currentIndex = 0;
var hello = new Array( 'Hello', 'Bonjour', 'Hola' );
function randomIndex( ) {
return Math.floor( Math.random( ) * hello.length);
};
window.setInterval( function( ) {
var newIndex = randomIndex( );
while( newIndex === currentIndex ) newIndex = randomIndex();
currentIndex = newIndex;
document.getElementById("switch").textContent = hello[ currentIndex ];
}, 2300 );
In CSS you need to set up #keyframes for your fade-in animation,. Then you can add a percentage of the duration that you wish to animate the animate-able properties opacity and top position. Make sure your duration matches the setInterval time => 2300 => 2.3s.
#keyframes:
In my example I set up a tween that will start at 0% with opacity 0 and top position in vh lengths, then as the tween reaches 70%, it is shown moving upwards to 5vh, where it will stay at an opacity of 1 until 90%, when its opacity will start to fade out. At 100% it will be opacity of 0, then the loop starts over as it is set to infinte in the css animation, the element will reset to 20vh and the animation repeats itself over again.
*You can play around with the percentages in the #keyframes rule to get the effect you're look for in terms of fading in and out movement, etc...
let currentIndex = 0;
const hello = ['Hello', 'Bonjour', 'Hola'];
function randomIndex() {
return ~~(Math.random() * hello.length);
};
window.setInterval(function() {
let newIndex = randomIndex();
while (newIndex === currentIndex) newIndex = randomIndex();
currentIndex = newIndex;
document.getElementById("switch").textContent = hello[currentIndex];
}, 2300);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
section {
text-align: center;
}
section h1 {
font-size: 100px;
font-weight: 420;
position: absolute;
top: 5vh;
left: 50vh;
opacity: 0;
animation: fade-in 2.3s ease-in-out forwards infinite;
}
#keyframes fade-in {
0% {
opacity: 0;
top: 20vh;
}
70%,
90% {
opacity: 1;
top: 5vh;
}
100% {
opacity: 0;
top: 5vh;
}
}
<body>
<section>
<h1 id="switch">Hello</h1>
</section>
</body>
As the greeting is not really semantic (you don't for example want it read out every few seconds to a screen reader) you could put it instead on the body (or another suitable element, depending on exactly the structure you want) in a pseudo before element. That way it is basically decoration, not meaning.
Also, to avoid timing issues, where a setInterval may get out of step with the timing of the keyframes animation, you can sense the animationend event and then set a timout for the next 300ms and then reset the animation to run again.
let currentIndex = 0;
const hello = ['Hello', 'Bonjour', 'Hola'];
function randomIndex() {
return ~~(Math.random() * hello.length);
};
function getNext() {
let newIndex = randomIndex();
while (newIndex === currentIndex) newIndex = randomIndex();
currentIndex = newIndex;
document.body.style.setProperty('--greeting', "'" + hello[currentIndex] + "'");
document.body.style.setProperty('--animationname', 'none');
setTimeout(function () {
document.body.style.setProperty('--animationname', 'move');
}, 300);
}
document.body.addEventListener('animationend',getNext);
body {
--greeting: 'Hello';
--animationname: move;
}
body::before {
content: var(--greeting);
animation-duration: 2s;
animation-iteration-count: 1;
animation-name: var(--animationname);
position: absolute;
top: 100%;
font-size: 100px;
font-weight: 420;
position: absolute;
left: 200px;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
#keyframes move {
0% {
top: 100%;
opacity: 0;
}
50% {
top: 50%;
opacity: 1;
}
100% {
top: 0%;
opacity: 0;
}
}
Obviously you'll want to change the timings, positionings etc to be exactly what you want.
I'm trying to create a number of items (clouds in this case) that once reached the rightmost side of the browser, thir position is reset to 0 (leftmost side of the screen) or less and the loop should continue.
Each cloud's position should be reset independently from the others, but in my case what is happening is that everytime a cloud reaches the target, they all get reset and I can't figure out why.
I have a series of DOM elements:
<div class="cloud" id="c1"></div>
<div class="cloud" id="c2"></div>
<div class="cloud" id="c3"></div>
In my JS file I have an array containing all 3 DOM elements:
var clouds = document.querySelectorAll(".cloud");
I have first loop to setup some css attributes:
for(let i=0; i < clouds.length; ++i){
setUp(clouds[i]);
}
function setUp(item){
item.style.transform = `translate3d(0px, 0px, 0px)`;
}
And then I loop through it running this method:
function increment(item){
let xVal = Number(item.style.transform.split('px')[0].split('(')[1]);
let newVal = xVal >= window.innerWidth ? 0 : xVal + 1;
item.style.transform = `translate3d(${newVal}px, 0px, 0px)`;
item.style.background = 'red';
}
setInterval(function(){
clouds.forEach(increment);
},700)
CORRECTION:
As pointed out by #AlexWayne, it was a minor issue that was solved by separating the positions of the items in the setUp function.
In the form of:
item.style.transform = `translate3d(${i * 100}px, 0px, 0px)`;
as shown here https://jsfiddle.net/36m1oatv/14/ .
Although it is strange the reason why a similar version as the following
https://jsfiddle.net/kwucnht9/1/ doesn't work.
Hello and welcome to stackoverflow!
I figured you might like a pure CSS solution since most things you are doing in your javascript was manipulating the css anyway.
Let me know if you need further assistance.
#keyframes example {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100vh);
}
}
.cloud {
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
transition: transform .7s ease-in-out;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
.cloud:nth-child(1) {
background-color: tomato;
animation-delay: 0.5s;
}
.cloud:nth-child(2) {
background-color: hotpink;
animation-delay: 1s;
}
.cloud:nth-child(3) {
background-color: greenyellow;
animation-delay: 1.5s;
}
<div class="cloud" id="c1"></div>
<div class="cloud" id="c2"></div>
<div class="cloud" id="c3"></div>
The reason your clouds all reset at the same time is because each cloud is being transformed identically each time.
function setUp(item) {
item.style.transform = `translate3d(0px, 0px, 0px)`; // set all clouds to 0 on the x-axis.
}
setInterval(function(){
clouds.forEach(increment); // Every 700ms, shift each cloud along the x-axis by 1px.
},700)
Because your initial offset positioning is set identically by setUp, the translate3d(${newVal}px, 0px, 0px) is identical for all clouds. If you were to change setUp so that each cloud is transformed on the x-axis by a different initial amount then your routine would work.
(function() {
var clouds = document.querySelectorAll(".cloud");
for (let i = 0; i < clouds.length; ++i) {
setUp(clouds[i]);
}
function setUp(item) {
var rando = Math.random() * 250; // set a random spot between 0 and 250px.
item.style.transform = `translate3d(${rando}px, 0px, 0px)`;
}
function increment(item) {
let xVal = Number(item.style.transform.split('px')[0].split('(')[1]);
let newVal = xVal >= window.innerWidth/3 ? 0 : xVal + 5;
item.style.transform = `translate3d(${newVal}px, 0px, 0px)`;
item.style.background = 'red';
}
setInterval(function() {
clouds.forEach(increment);
}, 100)
})();
.cloud {
border: 1px solid black;
width: 200px;
height: 25px;
}
.cloud:nth-child(0){
position: absolute;
top: 280px;
left: 80px;
}
.cloud:nth-child(1){
position: absolute;
top: 75px;
left: 206px;
}
.cloud:nth-child(2){
position: absolute;
top: 150px;
left: -12px;
}
<div class="cloud" id="c1"></div>
<div class="cloud" id="c2"></div>
<div class="cloud" id="c3"></div>
The reason your clouds won't snap back to the left edge is because you have the left edge positioned absolutely, so they only reset to their normal, non-offset, positions.
I'm trying to make full screen menu like a modal.
Everything is fine except fadeOut animation.
Can someone explain what is wrong with my scripts/codes?
I want to make this content fades in when click the button but fades out when its clicked again. My script sets the value of "display" but in animation only fade in effect works fine. In reverse fade out do effect instantly (without 0.5s animation duration). Button has got z-index = 101 and menu-content = 100 so the button stay at the same place all the time.
Thanks
function myMenu() {
var x = document.getElementById("menu-content");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
if (x.style.animation === "fadeIn 0.5s ease-in-out") {
x.style.animation = "fadeOut 0.5s ease-in-out";
} else {
x.style.animation = "fadeIn 0.5s ease-in-out";
}
}
#menu-content {
display: none;
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(-25deg, #c0a0ae, #6f448a);
z-index: 100;
top: 0;
left: 0;
animation: fadeOut 0.5s ease-in-out;
}
.menu-content-properties {
height: 100%;
width: 100%;
display: grid;
grid-template-columns: auto;
background: #000000;
opacity: 0.5;
}
#keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
#keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
<button id="menu-button" style="z-index: 101; position: absolute; top: 0;
left: 0;" onclick="myMenu();">Menu</button>
<div id="menu-content"></div>
<div id="menu-content">
<div class="menu-content-properties">
<div>1</div>
<div></div>
<div>2</div>
</div>
</div>
Okay, so there are a couple of issues.
Firstly, in your HTML, there are 2 elements with the same ID (menu-content) which will cause a couple of problems, so remove one of those.
Secondly, when you set display: none in your myMenu function, it will immediately be hidden, so that's why the animation is not shown.
You have a couple of options:
Put that code within a setTimeout so that it isnt set to display: none until the animation has finished, OR
Don't use display: none
Personally, I think you're better off not using display: none, otherwise you need to amend your javascript whenever you change the duration of the animation.
I've managed to get it working without the need for display none, and using CSS transitions which works quite nicely
function myMenu() {
var x = document.getElementById("menu-content");
if (x.classList.contains("open")) {
x.classList.remove("open");
} else {
x.classList.add("open");
}
}
#menu-content {
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(-25deg, #c0a0ae, #6f448a);
z-index: 100;
top: 0;
left: 0;
transition: opacity 0.5s ease-in-out;
opacity: 0;
}
#menu-content.open {
opacity: 1;
}
.menu-content-properties {
height: 100%;
width: 100%;
display: grid;
grid-template-columns: auto;
background: #000000;
opacity: 0.5;
}
<button id="menu-button" style="z-index: 101; position: absolute; top: 0;
left: 0;" onclick="myMenu();">Menu</button>
<div id="menu-content">
<div class="menu-content-properties">
<div>1</div>
<div></div>
<div>2</div>
</div>
</div>
I've created a background body slider which will switch through body backgrounds with 'next' and 'back' buttons. Live example here:
https://ts564737-container.zoeysite.com/lookbook
This functions perfectly (ignore the large images causing it to load slowly), but I can't seem to add a crossfade effect like on this website:
http://northamerica.triangl.com/pages/lookbook-swimwear
I tried this with CSS transition: all 0.5s ease-out but the transition is poor and loaded horribly.
Could anybody please advise where I can add a crossfade to this so that it's like the website above? Thank you for your help and time.
HTML & jQuery etc.
<!-- Remove header from lookbook page only and add background1 -->
<script>
jQuery(document).ready(function() {
if (top.location.pathname === '/lookbook')
{
jQuery("#root-header-cp-41e961ff2cbb3d4e6ae72927272f2db5").addClass("removeheader");
jQuery("body").addClass("background1");
}
});
</script>
<!-- Change background -->
<script>
jQuery(document).ready(function() {
var current = 1; // current background index
var max_backgrounds = 3; // number of backgrounds it will work with any number
jQuery(".next").click(function() {
jQuery("body").removeClass("background" + current);
// next background index or first one if it's the last one
current++;
if (current > max_backgrounds) {
current = 1;
}
// change background to background1, background2 ...
jQuery("body").addClass("background" + current);
});
jQuery(".back").click(function() {
jQuery("body").removeClass("background" + current);
// previous background index or last one if current is the first one
current--;
if (current < 1) {
current = max_backgrounds
}
// change background to background1, background2 ...
jQuery("body").addClass("background" + current);
});
});
</script>
<!-- Container plus images -->
<div id="toggle" width="100%">
<img src="/media/import/icons/back.png" class="back">
<img src="/media/import/icons/next.png" class="next">
</div>
CSS
/* Body background options */
.background1 {
background: url('/media/import/backgrounds/background1.jpg') no-repeat center center fixed;
background-size: cover;
overflow: hidden;
}
.background2 {
background: url('/media/import/backgrounds/background2.jpg') no-repeat center center fixed;
background-size: cover;
overflow: hidden;
}
.background3 {
background: url('/media/import/backgrounds/background3.jpg') no-repeat center center fixed;
background-size: cover;
overflow: hidden;
}
/* Toggle Buttons */
#toggle .next {
float: right;
margin-right: 20px !important;
}
#toggle .back {
margin-left: 20px !important;
}
#toggle img {
margin-top: 400px;
display: inline;
}
#toggle img:hover {
cursor: pointer;
opacity: 0.8;
}
The trick is to use multiple elements, which are all positioned in the exact same place. All elements must have an opacity: 0, except the active one (opacity: 1).
When you navigate to the next/previous item, you need to toggle an active class on them, which removes/sets opacity: 1
Simplified example with divs:
(function () {
var prevButton = $('.previous'),
nextButton = $('.next'),
allImages = $('.background-images li');
nextButton.click(function(e) {
// Find the active element
activeElement = $('li.bg-active');
// remove the 'bg-active'-class from this element
activeElement.removeClass('bg-active');
// if current element is the last one, make sure to add 'bg-active'-class to the very first element.
if (activeElement[0] === allImages.last()[0]){
allImages.first().addClass('bg-active');
} else {
// Add 'bg-active'-class to the next element
activeElement.next().addClass('bg-active');
}
});
prevButton.click(function(e) {
activeElement = $('li.bg-active');
activeElement.removeClass('bg-active');
// if current element is the first one, make sure to add 'bg-active'-class to the very lst element.
if (activeElement[0] === allImages.first()[0]){
allImages.last().addClass('bg-active');
} else {
// add 'bg-active'-class to the previous element
activeElement.prev().addClass('bg-active');
}
});
})();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slider</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
ul {
overflow: auto;
}
li {
width: 100px;
height: 100px;
position: absolute;
left: 0;
}
.bg {
opacity: 0;
transition: all 0.5s ease-out;
}
.bg-active {
opacity: 1;
}
.bg1 {
background-color: red;
}
.bg2 {
background-color: green;
}
.bg3 {
background-color: blue;
}
</style>
</head>
<body>
previous
next
<ul class="background-images">
<li class="bg bg1 bg-active"></li>
<li class="bg bg2"></li>
<li class="bg bg3"></li>
</ul>
</body>
</html>
Try using
#Crossfade img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
This should give you the crossfade that you want.
Instead of toggling classes you could just swap out the image, here's a quick proof of concept you can run in your console:
jQuery("body").css({'background-image':'url(/media/import/backgrounds/background3.jpg)', 'transition':'all 0.5s ease-out'});
Adapting this for your code would look something like:
jQuery
jQuery(".next").click(function() {
current++;
if (current > max_backgrounds) {
current = 1;
}
jQuery("body").css({'background-image':'url(/media/import/backgrounds/background' + current + '.jpg');
});
jQuery(".back").click(function() {
current--;
if (current < 1) {
current = max_backgrounds
}
jQuery("body").css({'background-image':'url(/media/import/backgrounds/background' + current + '.jpg');
});
CSS
body {
transition: all 0.5s ease-out;
}
There many ways you can about this and this gentleman has showcase many of them
Some pointers:
The page you've given as an example loads every image when the page loads.
Performance wise, you don't want that. If you're going to do such an effect, make sure you load the images only when they actually required.
They achieve the effect by pilling all images on top of each other, then animating the opacity in/out when clicking the arrows.
Since they all have position:absolute, you'll get the crossfade effect you wish for.