Update contents of a div element with animation styling - javascript

I'm building a personal portfolio webpage with React and I'm trying to update the content of the div element but when the elements are updated, I want to involve styling, (like the old content to exit on the left and the new content to enter from the left) Sorry for my bad English.
This is the part I'm trying to update and add styling
I've tried to use the componentDidMount method with a function that changes the heading but I don't know how to add animations/styling...
export default class Home extends Component {
skills_section_update = () => {
let heading = document.getElementById('heading');
const headings = [
{
head: 'Web Development'
},
{
head: 'Game Development'
}
];
const update_head = (index) => {
heading.innerText = headings[index].head;
};
update_head(1);
}
componentDidMount = () => {
setInterval(this.skills_section_update, 2000);
};
I'm new to React so any help would be much appreciated.
:)

I don't know if there are special methods to do this using React but I know that you can't animate the content of a DOM element using CSS. What I would recommend is to add the updated content in another DOM element next to your current div and then animate the two to make a nice transition.
You could, for example, do something like that:
.container {
width: 400px;
height: 400px;
border: #000 solid 1px;
position: relative;
overflow: hidden;
}
.content {
width: 100%;
height: 100%;
transition: all .25s ease-in-out;
}
.container:hover .content {
transform: translateY(-100%);
transition: all .25s ease-in-out;
}
.original {
background-color: wheat;
}
.next {
background-color: teal;
}
<div class="container">
<div class="content original">
Content 1
</div>
<div class="content next">
New content
</div>
</div>

Related

css/ js: How to display on click on a button the rest of the paragraph text while being responsive?

I'm trying to display the rest of my text with an animation on the height when you click on a button, I managed to do it but the problem is that I can't find a way to make it responsive.. Basically I display a height: 30px and an overflow: hidden.
And I toggle on a class that contains a height: 300px , it looks good in the mobile version but if I increase the resolution of the page the height will become too small.
I thought there might be a way to adapt the height with the width of the screen, or maybe there is another way to hide part of the text?
Below is the code:
Scss:
.about__body{
#include displayFlex($direction: column, $align-item: center);
gap: 20px;
&-content {
height: 60px;
overflow: hidden;
transition: all 400ms ease-in-out;
}
}
.about__body-content-show {
transition: all 400ms ease-in-out;
height: auto;
}
JS:
let btnAbout = document.getElementById("btn--about")
let contentAbout = document.querySelector(".about__body-content")
const onClickShow = () => {
btnAbout.addEventListener('click', (e) => {
e.preventDefault()
contentAbout.classList.toggle('about__body-content-show')
})
}
onClickShow()
You basically can use JS to achieve this and make your container same height as your content
document.getElementById('expand').addEventListener('click', function() {
document.querySelector('.content-holder').style.height = document.querySelector('.content').offsetHeight + 'px';
document.querySelector('.content-holder').classList.toggle('collapsed');
});
a working fiddle: https://jsfiddle.net/sdjhetq1/

CSS absolute and relative not working for my div slider carousel

I am trying to make a slider carousel with VUE, the css classes (3 divs) are running in a for loop. Anytime a div fades out, the next slider creates a double slider at the bottom, meaning two sliders are running concurrently.
an example of the problem
Whenever I use the relative and absolute properties, my divs disappear totally. I don't know what to do
<template>
<h1 class="text-center">SLIDER APP</h1>
<div>
<div v-for="(color, index) in slider" :key="color">
<transition name="fade">
<div v-if="currentslide == index" :class="color"></div>
</transition>
</div>
</div>
</template>
<script>
export default {
data(){
return {
currentslide:0,
intervals:'',
slider:['first-slider', 'second-slider', 'third-slider'],
isshowing:true,
}
},
mounted(){
this.intervals = setInterval(() => {
console.log('This is slide', this.currentslide)
this.currentslide = this.currentslide == 2 ? 0:this.currentslide+1;
}, 2000);
},
beforeUnmount(){
clearInterval(this.intervals)
}
}
</script>
<style>
.first-slider {
background: blue;
height: 350px;
}
.second-slider {
background: red;
height: 350px;
}
.third-slider {
background: orange;
height: 350px;
}
.fade-enter-active, .fade-leave-active {
transition: all 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
transform: translateX(30px);
}
</style>
Stop using absolute or relative positioning. Instead use display flex on an outer div for good positioning results.

Replace image by another using css display and JS

I'm trying to apply the same effect on the social network logo: https://www.pierrejacobson.com/
Instead of using CSS awesome, I would like to do it with an image but it doesn't work as expected.
Regarding CSS, there is no need to put the code here. I just have the three social network logo on display: none;.
Could you please help me?
<div id="social_bar">
<div class="width_size">
<img alt="image enveloppe" class="email" src="email.png" />
<p>CONTACT#PIERREJACOBSON.COM</p>
<div id="network_logo">
<img alt="logo_facebook" id="fixed_facebook" src="facebook.png" />
<img alt="logo_youtube" id="fixed_youtube" src="youtube.png" />
<img alt="logo_instagram" id="fixed_instagram" src="instagram.png" />
<img alt="logo_facebook" id="facebook" src="facebook_blue.png" />
<img alt="logo_youtube" id="youtube" src="youtube_blue.png" />
<img alt="logo_instagram" id="instagram" src="instagram_blue.png" />
</div>
<!--network_logo-->
</div>
<!--width_size-->
</div>
<!--social_bar-->
<div id="logo_bar">
<div class="width_size">
<img alt="logo" src="logo-pierre-jacobson2.png" />
<input type="text" id="name" name="name" required minlength="4" maxlength="8" size="30" value="RECHERCHER..." />
<img alt="search" src="search-solid.svg" />
</div>
</div>
JS
const get_img = function(name){ return document.getElementById(name); };
const img_one = get_img("fixed_facebook");
const img_two = get_img("fixed_youtube");
const img_three = get_img("fixed_instagram");
const img_facebook = get_img("facebook");
const img_youtube = get_img("youtube");
const img_instagram = get_img("instagram");
img_one.addEventListener("mouseover", function (event) {
img_one.style.display = "none";
img_facebook.style.display = "inline";
});
img_two.addEventListener("mouseover", function (event) {
img_two.style.display = "none";
img_youtube.style.display = "inline";
});
img_three.addEventListener("mouseover", function (event) {
img_three.style.display = "none";
img_instagram.style.display = "inline";
});
img_one.addEventListener("mouseout", function (event) {
img_one.style.display = "inline";
img_facebook.style.display = "none";
});
img_two.addEventListener("mouseout", function (event) {
img_two.style.display = "inline";
img_youtube.style.display = "none";
});
img_three.addEventListener("mouseout", function (event) {
img_three.style.display = "inline";
img_instagram.style.display = "none";
});
from display "none" to "inline" there is no transition. Instead try to use "opacity: 0" and "opacity: 1" and set the "transition: all 0.2s ease";
The Display Property:
In your initial question you say that you want to use the display property to hide and show your images, however, you also state that you would like to have the screens transition from one to another.
Transitioning is definitely possible through the aptly named CSS transition property
The problem is that the display property is not able to be animated. If an element is configured to display: none; the page is immediately repainted with that element removed.
This means that you need to use a different property, and we typically would use opacity or visibility. Here are the differences between these three:
display: none;
immediately collapses the element
removes the element from view.
There's no transition allowed.
visibility: hidden;
Does not collapse the element
The space it occupied is blank.
removes the element from view
Transitions are allowed
The element will still pop out of sight.
opacity: 0;
Does not collapse the element
The space it occupied is blank.
removes the element from view
Transitions are allowed.
The element will fade until it is not visible.
Here is an example of the different way these properties affect the layout of the page:
const context = document.querySelector("#examples");
const ele = context.querySelector.bind(context),
hide = section => section.classList.toggle("hide"),
onClickHide = (btn, section) => btn.addEventListener("click", () => hide(section));
opacity = ele(".opacity"),
opacity_button = ele("#oBtn"),
visibility = ele(".visibility"),
visibility_button = ele("#vBtn"),
display = ele(".display"),
display_button = ele("#dBtn"),
toggle_button = ele("#tBtn");
onClickHide(opacity_button, opacity);
onClickHide(visibility_button, visibility);
onClickHide(display_button, display);
toggle_button
.addEventListener("click", function() {
hide(opacity);
hide(visibility);
hide(display);
});
html,
body,
#examples {
width: 100%;
height: 100%;
box-sizing: content-box;
margin: 0px;
padding: 0px;
}
#examples section {
display: flex;
flex-direction: column;
width: 100px;
height: 100px;
border: 5px solid black;
margin: 5px;
transition: all .5s ease-in-out;
}
#examples section.hide {
border-radius: 100px;
}
#examples section.opacity {
background-color: blue;
color: white;
}
#examples section.opacity.hide {
opacity: 0;
}
#examples section.visibility {
background-color: purple;
color: white;
}
#examples section.visibility.hide {
visibility: hidden;
}
#examples section.display {
display: block;
background-color: red;
color: white;
}
#examples section.display.hide {
color: black;
display: none;
}
<main id="examples">
<section class="opacity">opacity <button id="oBtn">hide</button></section>
<hr />
<section class="visibility">visibility <button id="vBtn">hide</button></section>
<hr />
<section class="display">display <button id="dBtn">hide</button></section>
<hr/>
<button id="tBtn">Toggle All</button>
</main>
Note: In the above there are actually two properties transitioning - opacity, visibility, or display - and border-radius. You should notice firstly how in the display example the border-radius change isn't seen at all, and secondly how the display example is the only one that collapses the element so that it no longer takes up space.
Applying Transitions:
By combining opacity: 0; with height: 0px; width: 0px; we can remove the element visually from the page while also removing any impact it has on other elements - meaning that it won't take up space and is transitionable.
However, in your particular case ( wanting to change the image to a different color ), all of that isn't necessary. You can swap out your img tags for div tags, then apply the background-url property to get an image (a.e. background-url: url("facebook.png"); ) and a hover effect that adds whatever background-color you're looking for.
#facebook {
width: 50px;
height: 50px;
background-image: url("http://via.placeholder.com/50x50");
cursor: pointer;
transition: all .3s ease-in-out;
}
#facebook:hover {
background-color: darkblue;
background-blend-mode: color-dodge;
}
Note: You can also adjust background-blend-mode to other options to change how the image and the color are put together. a.e. background-blend-mode: luminosity; will make the color lighter background-blend-mode: color-dodge; will make it darker and add "dodge" effect. Feel free to play around!
#facebook {
width: 50px;
height: 50px;
background-image: url("http://via.placeholder.com/50x50");
cursor: pointer;
transition: all .3s ease-in-out;
}
#facebook:hover {
background-color: darkblue;
background-blend-mode: color-dodge;
}
<div id="social_bar">
<div class="width_size">
<p>CONTACT#PIERREJACOBSON.COM</p>
<div id="network_logo">
<div alt="logo_facebook" id="facebook"></div>
</div>
<!--network_logo-->
</div>
<!--width_size-->
</div>

JavaScript on scroll to shrink logo AND menu bar

I'm working on a WordPress site, I have used the following JavaScript code to shrink the logo on scroll:
logo has id #logoid
CSS
.logoclass {width:100%;
transition: width 0.5s linear;}
.scroll {margin-top:-10px;
width:55%;
transition: width 0.5s linear;}
Javascript
<script type="text/javascript">
window.onscroll = () => {
const nav = document.querySelector('#logoid');
if(this.scrollY <= 250) nav.className = 'logoclass'; else nav.className =
'scroll';};
</script>
Now this works fine to simply shrink the image and restore size.
Now I have two problems:
Since I'm using WordPress plugins, there are many attributes applied
to the logo internally and are not in my .logoclass or in the
.scroll so these attributes get removed once I scroll and do not
get applied again. Is there a way to :
a) On scroll down ONLY change size while keeping other attributes
intact
b) On scroll up revert to initial settings completely (remove new
class)
My second question is, I want to also modify the menu bar size on scroll, but I cannot use the same code twice because it seems to only accept the code written last. Possibly because windows.onscroll gets added twice. Any way to incorporate both?
For #1, you should use the classList property to add or remove classes.
For #2, you should be able to add whatever changes you want in the same if statement.
window.onscroll = () => {
const nav = document.querySelector('#logoid');
const menu = document.querySelector('#menubar');
if (this.scrollY <= 250) {
nav.classList.remove('scroll');
menu.classList.remove('someclass');
} else {
nav.classList.add('scroll');
menu.classList.add('someclass');
}
};
.logoclass {
width: 100%;
transition: width 0.5s linear;
}
.scroll {
margin-top: -10px;
width: 55%;
transition: width 0.5s linear;
}
body {
height: 1000px;
}
#logoid {
position: absolute;
top: 0px;
background: red;
height: 25px;
}
<div id="logoid" class="logoclass"></div>
<div id="menubar" class="menuclass"></div>
If you add a global scroll class to your body tag you won't have to change your JavaScript if you want to change more things on scroll, only your CSS.
window.onscroll = () => {
const body = document.querySelector('body');
if (this.scrollY <= 250) {
body.classList.remove('scroll');
} else {
body.classList.add('scroll');
}
};
.logoclass {
width: 100%;
transition: width 0.5s linear;
}
.scroll .logoclass, .scroll .menuclass {
margin-top: -10px;
width: 55%;
transition: width 0.5s linear;
}
body {
height: 1000px;
}
#logoid {
position: absolute;
top: 0px;
background: red;
height: 25px;
}
<div id="logoid" class="logoclass"></div>
<div id="menubar" class="menuclass"></div>
If you wan't to run multiple functions on scroll you should use addEventListener.
window.addEventListener('scroll', function() {
doSomething();
});
window.addEventListener('scroll', function() {
doSomeOtherThing();
});

Animating height property :: HTML + CSS + JavaScript

I have noticed this 'issue' lately when trying some stuff.
Say I want to create a drop-down menu or an accordion.
This is my HTML:
<div class="wrapper" onclick="toggle()">
I want to be animated!
<div class="content">
Was I revealed in a timely fashion?
</div>
</div>
Stylesheets:
.wrapper {
background: red;
color: white;
height: auto;
padding: 12px;
transition: 2s height;
}
.content {
display: none;
}
.content.visible {
display: block;
}
JavaScript:
function toggle () {
var content = document.getElementsByClassName('content')[0];
var test = content.classList.contains('visible');
test ? content.classList.remove('visible') :
content.classList.add('visible');
}
I am trying to achieve a nice, smooth animation when we toggle the state of the content. Obviously this does not work. Anyone can explain to me why it does not work and how to fix it? Many thanks.
Link to the JSFiddle.
First things first, some CSS properties CANNOT be transitioned, display is one of them, additionally only discrete values can be transitioned, so height: auto cannot as well.
In your case the problem is with height: auto, while there are a few hacks for doing this, if you are just showing and hiding stuff, why not add, and use jQuery's toggle instead?
$(".content").toggle("slow");
jsFiddle
--EDIT (without jQuery)--
Because it's the auto that is giving us problems, we can use javascript to replace auto with a value in pixels and then use the css transition normally, if your content doesn't have a scroll, we can easily take that value from the scrollHeight property:
function toggle () {
var content = document.getElementsByClassName('content')[0];
var test = content.classList.contains('visible');
console.log(test);
if (test) {
content.classList.remove('visible')
content.style.height = "0px";
} else {
content.classList.add('visible');
content.style.height = content.scrollHeight + "px";
}
}
Css
.wrapper {
background: red;
color: white;
height: auto;
padding: 12px;
transition: 2s height;
}
.content {
height: 0px;
display: block;
transition: 2s height;
overflow: hidden;
} /* totally removed .content.visible */
jsFiddle

Categories