Reputation: 489
I have a simple function on javascript when you click a button called "en" to change language. Works fine by changing a text .text, but I have an issue and is that I've created an animation with css and some text placeholders. let me show you.
HTML
<div id="languageWrapper">
<img id="es" class="spanish" src="images/es.svg"/>
<img id="en" class="english" src="images/en.svg"/>
</div>
These are the buttons to Change the language
The content I can't achieve to change is this one
<div id="bannerWrapper">
<div id="textWrapper">
<h3 class="headerWrapper"></h3><br>
<h3 class="subheaderWrapper"></h3>
</div>
</div>
The text from .headerWrapper and .SubheaderWrapper comes from a CSS file
CSS
.headerWrapper {
position: relative;
color: #fff;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
font-size:40px;
}
.headerWrapper:after {
content: 'Header 1';
animation: faderText 30s cubic-bezier(.8,0,0,.8) infinite;
}
.subheaderWrapper {
position: relative;
color: #fff;
margin: 0 auto;
font-family: 'Raleway', sans-serif;
font-size:17px;
}
.subheaderWrapper:after {
content: 'Some small description of what We intent to say here in this banner
number 1';
animation: faderText2 30s cubic-bezier(.8,0,0,.8) infinite;
}
@keyframes faderText {
0% {content: "¿Empresa vs Autónomo?";}
33.33% {content: "¿Qué impuestos paga mi Empresa?";}
66.66% {content: "¿Que visado necesitan mis empleados extranjeros?";}
100% {content: "¿Empresa vs Autónomo?";}
}
@keyframes faderText2 {
0% {content: "Te aconsejamos y creamos la mejor estructura según tu tipo de
negocio";}
33.33% {content: "Nos encargamos de explicar , preparar y presentar tus
impuestos periódicamente";}
66.66% {content: "Construimos un puente entre la compleja red de tramites al
reubicar internacionalmente a un empleado";}
100% {content: "Te aconsejamos y creamos la mejor estructura según tu tipo de
negocio";}
}
What I'm trying to achieve is, while clicking the id #es to change the animation keyframes from faderText and faderText2 to maybe another different animations with the content in English. is this possible? Thanks in advance!!
Also here's my Javascript that I want to achieve (change .headerwrapper:after animation from faderText to faderTextEnglish) So while creating the faderTextEnglish keyframes i can make them in english.)
$('#en').click(function(){
$('.headerWrapper:after').css('animation','faderTextEnglish 30s cubic-bezier(.8,0,0,.8) infinite');
});
Someone can help:D? thanks!
Upvotes: 0
Views: 2007
Reputation: 1
I'm going to help you but first I must warn you about the bad use you're making of CSS by using it to provide content for your HTML page. CSS, as the name suggests, is meant to be used for styling (and this includes animations) purposes only, not for storing data such as text.
I have a working example of a solution on CodePen. View it here
Regarding your question, however, you can't select pseudo-elements with jQuery, such as :after. In this case, you need to make use of additional classes, as in the following example:
Keep your HTML as
<div id="languageWrapper">
<img id="es" class="spanish" src="images/es.svg"/>
<img id="en" class="english" src="images/en.svg"/>
</div>
<div id="bannerWrapper">
<div id="textWrapper">
<h3 class="headerWrapper"></h3><br>
<h3 class="subheaderWrapper"></h3>
</div>
</div>
Now, in your CSS, create four classes, being two for the header and subheader in spanish and two for the header and subheader in english: .enTextHeader, .enTextSubheader, .esTextHeader, .esTextSubheader. Your CSS should be as follows:
.headerWrapper:after {
content: 'Header 1';
animation: faderText 30s cubic-bezier(.8,0,0,.8) infinite;
}
.subheaderWrapper:after {
content: 'Some small description of what We intent to say here in this banner number 1';
animation: faderText2 30s cubic-bezier(.8,0,0,.8) infinite;
}
body.en .headerWrapper:after {
animation-name: faderTextEnglish;
}
body.en .subheaderWrapper:after {
animation-name: faderText2English;
}
@keyframes faderText {
0% {content: "¿Empresa vs Autónomo?";}
33.33% {content: "¿Qué impuestos paga mi Empresa?";}
66.66% {content: "¿Que visado necesitan mis empleados extranjeros?";}
100% {content: "¿Empresa vs Autónomo?";}
}
@keyframes faderText2 {
0% {content: "Te aconsejamos y creamos la mejor estructura según tu tipo de negocio";}
33.33% {content: "Nos encargamos de explicar, preparar y presentar tus impuestos periódicamente";}
66.66% {content: "Construimos un puente entre la compleja red de tramites al reubicar internacionalmente a un empleado";}
100% {content: "Te aconsejamos y creamos la mejor estructura según tu tipo de negocio";}
}
@keyframes faderTextEnglish {
0% {content: "¿Company?";}
33.33% {content: "¿LULZ?";}
66.66% {content: "¿OKAY?";}
100% {content: "¿NEWTEXT?";}
}
@keyframes faderText2English {
0% {content: "¿Company Subheader?";}
33.33% {content: "¿LULZ Subheader?";}
66.66% {content: "¿OKAY Subheader?";}
100% {content: "¿NEWTEXT Subheader?";}
}
Your jQuery code should be updated as follows:
$(document).ready(function() {
$('#en').click(function(){
$('body').addClass('en');
});
$('#es').click(function(){
$('body').removeClass('en');
});
});
Please note that instead of selecting the :after pseudo-element and then changing the animation, what you do is select the element itself and attach and remove additional classes (esText# and enText#, respectively).
Upvotes: 0
Reputation: 736
Add css class "english" on body when clicking #en
:
$('#en').click(function(){
$('body').addClass('en');
});
$('#es').click(function(){
$('body').removeClass('en');
});
and in css change it to the following:
.headerWrapper:after {
content: 'foreign text';
animation: faderText 30s cubic-bezier(.8,0,0,.8) infinite;
}
body.en .headerWrapper:after {
content: 'english text';
animation: faderTextEn 30s cubic-bezier(.8,0,0,.8) infinite;
}
@keyframes faderText {
0% {content: "¿Empresa vs Autónomo?";}
33.33% {content: "¿Qué impuestos paga mi Empresa?";}
66.66% {content: "¿Que visado necesitan mis empleados extranjeros?";}
100% {content: "¿Empresa vs Autónomo?";}
}
@keyframes faderTextEn {
0% {content: "english version";}
33.33% {content: "english version";}
66.66% {content: "english version";}
100% {content: "english version";}
}
Upvotes: 1