Menu
I'm trying to add a transition effect when switching between projects. This code currently works, but I'd rather have something like having a fade effect when switching projects. Is this possible?
Here is a jsfiddle if that helps at all. Thanks!
My code:
HTML
<body>
<div id="proj_name"></div>
<div id="proj_description"></div>
<img id="proj_img" src=""><br>
<button id="proj_switcher">Next Project</button>
</body>
JavaScript
/**
* Constructor function for Projects
*/
function Project(name, description, img) {
this.name = name;
this.description = description;
this.img = img;
}
// An array containing all the projects with their information
var projects = [
new Project('Project 1', 'Project 1 Description', 'http://bit.ly/1E0IzpX'),
new Project('Project 2', 'Project 2 Description', 'http://bit.ly/1FHLGOt'),
new Project('Project 3', 'Project 3 Description', 'http://bit.ly/1H5wRt7'),
new Project('Project 4', 'Project 4 Description', 'http://bit.ly/1ECIQht'),
new Project('Project 5', 'Project 5 Description', 'http://bit.ly/1CYeY9F')
];
// Cacheing HTML elements
var projName = document.querySelector('#proj_name');
var projDescr = document.querySelector('#proj_description');
var projImg = document.querySelector('#proj_img');
var projButton = document.querySelector('#proj_switcher');
// Index of the current project being displayed
var projIndex = 0;
projButton.addEventListener('click', function() {
projName.innerHTML = projects[projIndex].name;
projDescr.innerHTML = projects[projIndex].description;
projImg.src = projects[projIndex].img;
projImg.style.width = '250px';
projImg.style.height = '150px';
projIndex = (projIndex + 1) % projects.length;
});
572
To trigger an element's transition, toggle a class name on that element that triggers it. To pause an element's transition, use getComputedStyle and getPropertyValue at the point in the transition you want to pause it. Then set those CSS properties of that element equal to those values you just got.
The use of innerHTML creates a potential security risk for your website. Malicious users can use cross-site scripting (XSS) to add malicious client-side scripts that steal private user information stored in session cookies.
To set the value of innerHTML property, you use this syntax: element. innerHTML = newHTML; The setting will replace the existing content of an element with the new content.
Triggering transitions You can trigger CSS transitions directly with pseudo classes like :hover (activates when the mouse goes over an element), :focus (activates when a user tabs onto an element, or when a user clicks into an input element), or :active (activates when user clicks on the element).
You can easily do that using a CSS transition. First you turn the opacity of the fields to 0, and then you replace the content and you make the fields appear again.
For doing this, first you wrap the project fields:
<body>
<div id="project"></div>
<div id="proj_name"></div>
<div id="proj_description"></div>
<img id="proj_img" src=""><br>
</div>
<button id="proj_switcher">Next Project</button>
</body>
Add the following CSS code:
<style>
#project {
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-ms-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
</style>
And then, add before the change:
var project = document.querySelector('#project');
project.style.opacity = 0;
And after it:
project.style.opacity = 1;
The final javascript would be:
/**
* Constructor function for Projects
*/
function Project(name, description, img) {
this.name = name;
this.description = description;
this.img = img;
}
// An array containing all the projects with their information
var projects = [
new Project('Project 1', 'Project 1 Description', 'http://bit.ly/1E0IzpX'),
new Project('Project 2', 'Project 2 Description', 'http://bit.ly/1FHLGOt'),
new Project('Project 3', 'Project 3 Description', 'http://bit.ly/1H5wRt7'),
new Project('Project 4', 'Project 4 Description', 'http://bit.ly/1ECIQht'),
new Project('Project 5', 'Project 5 Description', 'http://bit.ly/1CYeY9F')
];
// Cacheing HTML elements
var project = document.querySelector('#project');
var projName = document.querySelector('#proj_name');
var projDescr = document.querySelector('#proj_description');
var projImg = document.querySelector('#proj_img');
var projButton = document.querySelector('#proj_switcher');
// Index of the current project being displayed
var projIndex = 0;
projButton.addEventListener('click', function() {
// Fade out
project.style.opacity = 0;
// Wait for the transition
setTimeout(function(){
// Load new content
projName.innerHTML = projects[projIndex].name;
projDescr.innerHTML = projects[projIndex].description;
projImg.src = projects[projIndex].img;
projImg.style.width = '250px';
projImg.style.height = '150px';
projIndex = (projIndex + 1) % projects.length;
// Fade in
project.style.opacity = 1;
},500);
});
You can try it here: https://jsfiddle.net/9c4mx7p9/
Version with CSS classes: https://jsfiddle.net/y4p1y0ch/
199
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
