smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2024-12-26 06:20:42 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: css animations

Browse source
This commit is contained in:
Mike 2024-01-10 22:21:55 -05:00
parent 3f89b3b557
commit 3f96b0cdf0
3 changed files with 20 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
dynamicProgrammingExamples/src/components/imageCarousel.js
View file

@ -7,8 +7,8 @@ class Carousel {
this.imagePointer = 0; // starting index this.imagePointer = 0; // starting index
this.careouselCards = []; this.careouselCards = [];
this.previousImage = this.previousImage.bind(this); // this.previousImage = this.previousImage.bind(this);
this.nextImage = this.nextImage.bind(this); // this.nextImage = this.nextImage.bind(this);
// setup styling // setup styling
this.carouselPickerStyles(); this.carouselPickerStyles();
@ -49,16 +49,17 @@ class Carousel {
// Make sure the first card renders // Make sure the first card renders
this.showActiveSlide(); this.showActiveSlide();
this.container.append(this.carousel, this.RightButton, this.leftButton); this.container.append(this.carousel, this.rightButton, this.leftButton);
} }
showActiveSlide() { showActiveSlide() {
console.log(this.imagePointer);
this.careouselCards.forEach((e) => { this.careouselCards.forEach((e) => {
if (Number(e.dataset.itemNo) === this.imagePointer) { if (Number(e.dataset.itemNo) === this.imagePointer) {
e.style.display = 'block'; e.style.display = 'block';
e.firstChild.classList.add('active');
} else { } else {
e.style.display = 'none'; e.style.display = 'none';
e.firstChild.classList.remove('active');
} }
}); });
} }
@ -83,22 +84,22 @@ class Carousel {
this.leftButton.style.top = '50%'; this.leftButton.style.top = '50%';
this.leftButton.style.left = '2%'; this.leftButton.style.left = '2%';
this.leftButton.addEventListener('click', this.previousImage); this.leftButton.addEventListener('click', () => this.previousImage());
} }
carouselRightButton() { carouselRightButton() {
this.RightButton = document.createElement('i'); this.rightButton = document.createElement('i');
this.RightButton.classList.add( this.rightButton.classList.add(
'carousel-right-btn', 'carousel-right-btn',
'fas', 'fas',
'fa-angle-right', 'fa-angle-right',
'fa-10x', 'fa-10x',
); );
this.RightButton.style.position = 'absolute'; this.rightButton.style.position = 'absolute';
this.RightButton.style.top = '50%'; this.rightButton.style.top = '50%';
this.RightButton.style.right = '2%'; this.rightButton.style.right = '2%';
this.RightButton.addEventListener('click', this.nextImage); this.rightButton.addEventListener('click', () => this.nextImage());
} }
previousImage() { previousImage() {

2
dynamicProgrammingExamples/src/components/mobileMenu.js
View file

@ -51,7 +51,6 @@ class Menu {
burgerIconSetter() { burgerIconSetter() {
const isSmallScreen = window.innerWidth <= 600; const isSmallScreen = window.innerWidth <= 600;
console.log(window.screen.width);
if (isSmallScreen) { if (isSmallScreen) {
this.adjustStylesForSmallScreen(); this.adjustStylesForSmallScreen();
this.burgerIconClickListener(); this.burgerIconClickListener();
@ -62,7 +61,6 @@ class Menu {
burgerIconClickListener() { burgerIconClickListener() {
this.burgerIcon.addEventListener('click', () => { this.burgerIcon.addEventListener('click', () => {
console.log(this.container.style.display);
this.container.style.display = this.container.style.display =
this.container.style.display === 'none' ? 'flex' : 'none'; this.container.style.display === 'none' ? 'flex' : 'none';
return; return;

9
dynamicProgrammingExamples/src/style.css
View file

@ -13,9 +13,16 @@ a:hover {
.carousel img { .carousel img {
object-fit: contain; object-fit: contain;
} }
.active-slide { .active-slide {
display: block; display: block;
} }
.carousel-img {
transform: 200%;
}
.carousel-img .active {
transition: transform 200ms ease-out;
}