Develop Reference

How do I make another text display after the first one appears in css?

I am making a mental health website. To make it interactive, I have used a animation text that appears. I was wondering how I can add another line of text to pass.
This is how it looks like:
The purple text appears before the black text. I want to add the sentence "We chose mental health because it matters"
How do I do this?
/* The animation text*/
.intro {
display: inline-block;
overflow: hidden;
white-space: nowrap;
}
.intro1 {
animation: showup 7s infinite;
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
color: fuchsia;
}
.intro2 {
width: 0px;
animation: reveal 7s infinite;
}
.sub-head {
margin-left: -355px;
animation: slidein 7s infinite;
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
}
#keyframes showup {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes slidein {
0% {
margin-left: -800px;
}
20% {
margin-left: -800px;
}
35% {
margin-left: 0px;
}
100% {
margin-left: 0px;
}
}
#keyframes reveal {
0% {
opacity: 0;
width: 0px;
}
20% {
opacity: 1;
width: 0px;
}
30% {
width: 355px;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
width: 355px;
}
}
<div class="first-box">
<div class="intro intro1">Welcome!</div>
<div class="intro intro2">
<span class="sub-head"> We care about you</span>
<!-- lol dramatic effect-->
</div>
</div>

You mean something like this -
I test if animation has finished. That is much safer than setTimeout or interval since the animation already has the interval
const elems = [...document.querySelectorAll('.intro2 .sub-head')]
const welcome = document.querySelector('.intro1')
welcome.addEventListener("animationend", function() {
welcome.classList.add('hide')
elems[0].classList.add("hide")
elems[1].classList.remove("hide")
});
/* The animation text*/
.intro {
display: inline-block;
overflow: hidden;
white-space: nowrap;
}
.intro1 {
animation: showup 7s;
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
color: fuchsia;
}
.intro2 {
width: 0px;
animation: reveal 7s infinite;
}
.sub-head {
margin-left: -355px;
animation: slidein 7s infinite;
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
}
#keyframes showup {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes slidein {
0% {
margin-left: -800px;
}
20% {
margin-left: -800px;
}
35% {
margin-left: 0px;
}
100% {
margin-left: 0px;
}
}
#keyframes reveal {
0% {
opacity: 0;
width: 0px;
}
20% {
opacity: 1;
width: 0px;
}
30% {
width: 355px;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
width: 355px;
}
}
.hide {
display: none;
}
<div class="first-box">
<div class="intro intro1">Welcome!</div>
<div class="intro intro2">
<span class="sub-head"> We care about you</span>
<span class="sub-head hide">We chose mental health because it matters</span>
<!-- lol dramatic effect-->
</div>
</div>

One of the ways:
// set the interval for which the function will run (in our case 7 secons - 7000 )
setInterval(function() {
// grab all elements with class 'sub-head'
const elems = document.querySelectorAll('.sub-head')
// loop through the found elements
elems.forEach(e => {
// check if the element has a class 'inactive', if there is one, remove it
if (e.classList.contains('inactive')) e.classList.remove('inactive')
// if not, add it
else e.classList.add('inactive');
});
}, 7000)
/* The animation text*/
.intro {
display: inline-flex;
overflow: hidden;
white-space: nowrap;
}
.intro1 {
animation: showup 7s ;
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
color: fuchsia;
}
.intro2 {
width: 0px;
animation: reveal 7s infinite;
}
.inactive {
display: none;
}
.sub-head {
margin-left: -355px;
animation: slidein 7s infinite;
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
}
#keyframes showup {
0% {
opacity: 0;
}
20% {
opacity: .4;
}
80% {
opacity: .8;
}
100% {
opacity: 1;
}
}
#keyframes slidein {
0% {
margin-left: -800px;
}
20% {
margin-left: -800px;
}
35% {
margin-left: 0px;
}
100% {
margin-left: 0px;
}
}
#keyframes reveal {
0% {
opacity: 0;
width: 0px;
}
20% {
opacity: 1;
width: 0px;
}
30% {
width: 655px;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
width: 655px;
}
}
<div class="first-box">
<div class="intro intro1">Welcome!</div>
<div class="intro intro2">
<span class="sub-head "> We care about you</span>
<span class="sub-head inactive"> We chose mental health because it matters</span>
<!-- lol dramatic effect-->
</div>
</div>

Animation in CSS

I want to know how can you edit/modify the css so that it starts the animation when the user scrolls at the page where the whole animation or the skills bar in my case, is visible.
The animation works but the problem I am facing is that it works on the load of the website, and when I get to the skills bar the animation has been already played and it is not there anymore.
See the example below:
https://drive.google.com/file/d/1ogZE87xoeJV4vbMkE7fBV068ERMzd8it/view
This is an example, see how the animation plays when the user scrolls down to that page or section? I would like the same to happen with the below code:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body20{
height: 100%;
place-items: center;
background: transparent;
}
::selection{
color: #fff;
background: black;
}
.skill-bars{
padding: 25px 30px;
width: 97%;
background: #fff;
box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
border-radius: 10px;
}
.skill-bars .bar{
margin: 20px 0;
}
.skill-bars .bar:first-child{
margin-top: 0px;
}
.skill-bars .bar .info{
margin-bottom: 5px;
}
.skill-bars .bar .info span18{
font-weight: 500;
font-size: 17px;
opacity: 0;
animation: showText 0.5s 1s linear forwards;
}
#keyframes showText {
100%{
opacity: 1;
}
}
.skill-bars .bar .progress-line{
height: 10px;
width: 100%;
background: #f0f0f0;
position: relative;
transform: scaleX(0);
transform-origin: left;
border-radius: 10px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.05),
0 1px rgba(255,255,255,0.8);
animation: animate 1s cubic-bezier(1,0,0.5,1) forwards;
}
#keyframes animate {
100%{
transform: scaleX(1);
}
}
.bar .progress-line span18{
height: 100%;
position: absolute;
border-radius: 10px;
transform: scaleX(0);
transform-origin: left;
background: black;
animation: animate 1s 1s cubic-bezier(1,0,0.5,1) forwards;
}
.bar .progress-line.html span18{
width: 84%;
}
.bar .progress-line.css span18{
width: 76%;
}
.bar .progress-line.jquery span18{
width: 91%;
}
.bar .progress-line.python span18{
width: 59%;
}
.bar .progress-line.mysql span18{
width: 70%;
}
.progress-line span18::before{
position: absolute;
content: "";
top: -10px;
right: 0;
height: 0;
width: 0;
border: 7px solid transparent;
border-bottom-width: 0px;
border-right-width: 0px;
border-top-color: #000;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
.progress-line span18::after{
position: absolute;
top: -28px;
right: 0;
font-weight: 500;
background: #000;
color: #fff;
padding: 1px 8px;
font-size: 12px;
border-radius: 3px;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
#keyframes showText2 {
100%{
opacity: 1;
}
}
.progress-line.html span18::after{
content: "84%";
}
.progress-line.css span18::after{
content: "76%";
}
.progress-line.jquery span18::after{
content: "91%";
}
.progress-line.python span18::after{
content: "59%";
}
.progress-line.mysql span18::after{
content: "70%";
}
/* -----------------second box------------------------- */
.skill-bars1{
padding: 25px 30px;
width: 97%;
background: #fff;
box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
border-radius: 10px;
}
.skill-bars1 .bar1{
margin: 20px 0;
}
.skill-bars1 .bar1:first-child{
margin-top: 0px;
}
.skill-bars1 .bar1 .info1{
margin-bottom: 5px;
}
.skill-bars1 .bar1 .info1 span19{
font-weight: 500;
font-size: 17px;
opacity: 0;
animation: showText 0.5s 1s linear forwards;
}
#keyframes showText {
100%{
opacity: 1;
}
}
.skill-bars1 .bar1 .progress-line1{
height: 10px;
width: 100%;
background: #f0f0f0;
position: relative;
transform: scaleX(0);
transform-origin: left;
border-radius: 10px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.05),
0 1px rgba(255,255,255,0.8);
animation: animate 1s cubic-bezier(1,0,0.5,1) forwards;
}
#keyframes animate {
100%{
transform: scaleX(1);
}
}
.bar1 .progress-line1 span19{
height: 100%;
position: absolute;
border-radius: 10px;
transform: scaleX(0);
transform-origin: left;
background: black;
animation: animate 1s 1s cubic-bezier(1,0,0.5,1) forwards;
}
.bar1 .progress-line1.html1 span19{
width: 61%;
}
.bar1 .progress-line1.css1 span19{
width: 50%;
}
.bar1 .progress-line1.jquery1 span19{
width: 68%;
}
.bar1 .progress-line1.python1 span19{
width: 82%;
}
.bar1 .progress-line1.mysql1 span19{
width: 98%;
}
.progress-line1 span19::before{
position: absolute;
content: "";
top: -10px;
right: 0;
height: 0;
width: 0;
border: 7px solid transparent;
border-bottom-width: 0px;
border-right-width: 0px;
border-top-color: #000;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
.progress-line1 span19::after{
position: absolute;
top: -28px;
right: 0;
font-weight: 500;
background: #000;
color: #fff;
padding: 1px 8px;
font-size: 12px;
border-radius: 3px;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
#keyframes showText2 {
100%{
opacity: 1;
}
}
.progress-line1.html1 span19::after{
content: "61%";
}
.progress-line1.css1 span19::after{
content: "50%";
}
.progress-line1.jquery1 span19::after{
content: "68%";
}
.progress-line1.python1 span19::after{
content: "82%";
}
.progress-line1.mysql1 span19::after{
content: "98%";
}
<section>
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>What I am Working On</h2>
</div>
<link rel="stylesheet" href="assets/css/picturealign.css">
<div class="column1">
<div class="row1">
<div class="skill-bars">
<div class="bar">
<div class="info">
<span18>Harvard CS50 Course</span18>
</div>
<div class="progress-line html">
<span18></span18>
</div>
</div>
<div class="bar">
<div class="info">
<span18>Youtube Channel (Java Tutorials)</span18>
</div>
<div class="progress-line css">
<span18></span18>
</div>
</div>
<div class="bar">
<div class="info">
<span18>C++</span18>
</div>
<div class="progress-line jquery">
<span18></span18>
</div>
</div>
<div class="bar">
<div class="info">
<span18>Java</span18>
</div>
<div class="progress-line python">
<span18></span18>
</div>
</div>
<div class="bar">
<div class="info">
<span18>Web Development (Front-End)</span18>
</div>
<div class="progress-line mysql">
<span18></span18>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- second box -->
<div class="container" data-aos="fade-up">
<link rel="stylesheet" href="assets/css/picturealign.css">
<div class="column1">
<div class="row1">
<div class="skill-bars1">
<div class="bar1">
<div class="info1">
<span19>Competitive Chess (School Club)</span19>
</div>
<div class="progress-line1 html1">
<span19></span19>
</div>
</div>
<div class="bar1">
<div class="info1">
<span19>Basketball</span19>
</div>
<div class="progress-line1 css1">
<span19></span19>
</div>
</div>
<div class="bar1">
<div class="info1">
<span19>GitHub Side Projects</span19>
</div>
<div class="progress-line1 jquery1">
<span19></span19>
</div>
</div>
<div class="bar1">
<div class="info1">
<span19>Computer Science and Math Tutoring</span19>
</div>
<div class="progress-line1 python1">
<span19></span19>
</div>
</div>
<div class="bar1">
<div class="info1">
<span19>University Supplementary Applications &#128522</span19>
</div>
<div class="progress-line1 mysql1">
<span19></span19>
</div>
</div>
</div>
</div>
</div>
</section>
Right now, the animation plays but like I said it only plays on the load of the whole website, but when I reach that section where the skills bar is displayed, the animation does not work. Any suggestions?
BTW I did use bad coding practices which is that I reuseed the same code for skills bar for the second skills bar, I just renamed the classes which I should not have, but I am gradually getting the jist of good coding practices.

Try and add the animation to a class which you only add to the element when it scrolls into view.
Add animation styles to "animate" class.
Add scroll event listener and get skills bar offset-top property.
In the scroll event listener, check whether the offset top of your skills bar is in view, if it is in view, add the "animate" class you created in step 1.
This should start the animation only when you add the class to your skills bar and therefore every time you scroll in view, the animation will be applied

here is an example of setting it on scroll but u have to set it's default to be set if the windows does not overflow
EDITED: less code with foreach instead of separated functions.
$(document).ready(function() {
$(window).scroll(function(event) {
var nxtdiv, nxtdiv2;
var scroll = $(window).scrollTop() + 240;
var trgt = $('.info > span18');
var trgt2 = $('.info1 > span19');
trgt.each(function(e){
nxtdiv = trgt[e].parentNode.nextElementSibling;
if (scroll >= trgt[e].offsetTop && !(nxtdiv.classList.contains('progress-line'))) {
nxtdiv.classList.add('progress-line');
}
});
trgt2.each(function(e){
nxtdiv2 = trgt2[e].parentNode.nextElementSibling;
if (scroll >= trgt2[e].offsetTop && !(nxtdiv2.classList.contains('progress-line1'))) {
nxtdiv2.classList.add('progress-line1');
}
});
});
});
$(window).scroll();
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body20 {
height: 100%;
align-items: center;
background: transparent;
}
::selection {
color: #fff;
background: black;
}
.skill-bars {
padding: 25px 30px;
width: 97%;
background: #fff;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
.skill-bars .bar {
margin: 20px 0;
}
.skill-bars .bar:first-child {
margin-top: 0px;
}
.skill-bars .bar .info {
margin-bottom: 5px;
}
.skill-bars .bar .info span18 {
font-weight: 500;
font-size: 17px;
opacity: 0;
animation: showText 0.5s 1s linear forwards;
}
#keyframes showText {
100% {
opacity: 1;
}
}
.skill-bars .bar .progress-line {
height: 10px;
width: 100%;
background: #f0f0f0;
position: relative;
transform: scaleX(0);
transform-origin: left;
border-radius: 10px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.8);
animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}
#keyframes animate {
100% {
transform: scaleX(1);
}
}
.bar .progress-line span18 {
height: 100%;
position: absolute;
border-radius: 10px;
transform: scaleX(0);
transform-origin: left;
background: black;
animation: animate 1s 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}
.bar .progress-line.html span18 {
width: 84%;
}
.bar .progress-line.css span18 {
width: 76%;
}
.bar .progress-line.jquery span18 {
width: 91%;
}
.bar .progress-line.python span18 {
width: 59%;
}
.bar .progress-line.mysql span18 {
width: 70%;
}
.progress-line span18::before {
position: absolute;
content: "";
top: -10px;
right: 0;
height: 0;
width: 0;
border: 7px solid transparent;
border-bottom-width: 0px;
border-right-width: 0px;
border-top-color: #000;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
.progress-line span18::after {
position: absolute;
top: -28px;
right: 0;
font-weight: 500;
background: #000;
color: #fff;
padding: 1px 8px;
font-size: 12px;
border-radius: 3px;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
#keyframes showText2 {
100% {
opacity: 1;
}
}
.progress-line.html span18::after {
content: "84%";
}
.progress-line.css span18::after {
content: "76%";
}
.progress-line.jquery span18::after {
content: "91%";
}
.progress-line.python span18::after {
content: "59%";
}
.progress-line.mysql span18::after {
content: "70%";
}
/* -----------------second box------------------------- */
.skill-bars1 {
padding: 25px 30px;
width: 97%;
background: #fff;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
.skill-bars1 .bar1 {
margin: 20px 0;
}
.skill-bars1 .bar1:first-child {
margin-top: 0px;
}
.skill-bars1 .bar1 .info1 {
margin-bottom: 5px;
}
.skill-bars1 .bar1 .info1 span19 {
font-weight: 500;
font-size: 17px;
opacity: 0;
animation: showText 0.5s 1s linear forwards;
}
#keyframes showText {
100% {
opacity: 1;
}
}
.skill-bars1 .bar1 .progress-line1 {
height: 10px;
width: 100%;
background: #f0f0f0;
position: relative;
transform: scaleX(0);
transform-origin: left;
border-radius: 10px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.8);
animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}
#keyframes animate {
100% {
transform: scaleX(1);
}
}
.bar1 .progress-line1 span19 {
height: 100%;
position: absolute;
border-radius: 10px;
transform: scaleX(0);
transform-origin: left;
background: black;
animation: animate 1s 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}
.bar1 .progress-line1.html1 span19 {
width: 61%;
}
.bar1 .progress-line1.css1 span19 {
width: 50%;
}
.bar1 .progress-line1.jquery1 span19 {
width: 68%;
}
.bar1 .progress-line1.python1 span19 {
width: 82%;
}
.bar1 .progress-line1.mysql1 span19 {
width: 98%;
}
.progress-line1 span19::before {
position: absolute;
content: "";
top: -10px;
right: 0;
height: 0;
width: 0;
border: 7px solid transparent;
border-bottom-width: 0px;
border-right-width: 0px;
border-top-color: #000;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
.progress-line1 span19::after {
position: absolute;
top: -28px;
right: 0;
font-weight: 500;
background: #000;
color: #fff;
padding: 1px 8px;
font-size: 12px;
border-radius: 3px;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
#keyframes showText2 {
100% {
opacity: 1;
}
}
.progress-line1.html1 span19::after {
content: "61%";
}
.progress-line1.css1 span19::after {
content: "50%";
}
.progress-line1.jquery1 span19::after {
content: "68%";
}
.progress-line1.python1 span19::after {
content: "82%";
}
.progress-line1.mysql1 span19::after {
content: "98%";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>What I am Working On</h2>
</div>
<link rel="stylesheet" href="assets/css/picturealign.css">
<div class="column1">
<div class="row1">
<div class="skill-bars">
<div class="bar">
<div class="info">
<span18 id="S1">Harvard CS50 Course</span18>
</div>
<div class="html progress-line">
<span18></span18>
</div>
</div>
<div class="bar">
<div class="info">
<span18 id="S2">Youtube Channel (Java Tutorials)</span18>
</div>
<div class="css progress-line">
<span18></span18>
</div>
</div>
<div class="bar">
<div class="info">
<span18 id="S3">C++</span18>
</div>
<div class="jquery">
<span18></span18>
</div>
</div>
<div id="S4" class="bar">
<div class="info">
<span18>Java</span18>
</div>
<div class="python">
<span18></span18>
</div>
</div>
<div id="S5" class="bar">
<div class="info">
<span18>Web Development (Front-End)</span18>
</div>
<div class="mysql">
<span18></span18>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- second box -->
<div class="container" data-aos="fade-up">
<link rel="stylesheet" href="assets/css/picturealign.css">
<div class="column1">
<div class="row1">
<div class="skill-bars1">
<div id="S6" class="bar1">
<div class="info1">
<span19>Competitive Chess (School Club)</span19>
</div>
<div class="html1">
<span19></span19>
</div>
</div>
<div id="S7" class="bar1">
<div class="info1">
<span19>Basketball</span19>
</div>
<div class="css1">
<span19></span19>
</div>
</div>
<div id="S8" class="bar1">
<div class="info1">
<span19>GitHub Side Projects</span19>
</div>
<div class="jquery1">
<span19></span19>
</div>
</div>
<div id="S9" class="bar1">
<div class="info1">
<span19>Computer Science and Math Tutoring</span19>
</div>
<div class="python1">
<span19></span19>
</div>
</div>
<div id="S10" class="bar1">
<div class="info1">
<span19>University Supplementary Applications &#128522</span19>
</div>
<div class="mysql1">
<span19></span19>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

Trying with no success to include js scripts in header

trying to include this JS script in my wordpress header:
$(function() {
$('.hover-link .nav-1 a').on('mouseenter mouseleave', function() {
$('.hover-link .nav-1 a').toggleClass('bla');
});
});
// Second script - Hover effect on active link
$('.hover-link .nav-1 a').hover(function() {
$(this).addClass("new");
},
function() {
$(this).removeClass('new');
});
$('.hvr-underline-from-center').append('<span class="add-icon"> <i class="fas fa-long-arrow-alt-left"></i></span>');
$('.hvr-underline-from-center').hover(
function() {
$( this ).find('.add-icon').css('opacity','1');
}, function() {
$(this).find('.add-icon').css('opacity','0');
}
);
with no success :(
in this page: https://studiorayz.com/?page_id=50 you are supposed to see the effect.
the script add some hover effect and apply a small arrow to the left of the links.
after googling it I think it's related to the language, like wp is using php and I am not using the script correctly.
please help me I am a complete newb! thanks in advance!
BTW u can see the whole effect here at this codepen:
https://codepen.io/coolzikri/pen/BEbpzO

On WordPress jQuery is run in compatibility mode so you can't use the dollar sign ($) directly like you would in any other non-WordPress project. If you check your browser's console, you'll notice this error message:
TypeError: $ is not a function
Try this instead:
jQuery(function($) {
$('.hover-link .nav-1 a').on('mouseenter mouseleave', function() {
$('.hover-link .nav-1 a').toggleClass('bla');
});
});
// Second script - Hover effect on active link
jQuery(function($) {
$('.hover-link .nav-1 a').hover(function() {
$(this).addClass("new");
},
function() {
$(this).removeClass('new');
});
$('.hvr-underline-from-center').append('<span class="add-icon"><i class="fas fa-long-arrow-alt-left"></i></span>');
$('.hvr-underline-from-center').hover(
function() {
$( this ).find('.add-icon').css('opacity','1');
}, function() {
$(this).find('.add-icon').css('opacity','0');
}
);
});
By the way, you don't really need jQuery for this. You can achieve an almost identical effect using CSS only:
/* General */
#nr-1:hover + .bg-1,
#nr-2:hover + .bg-2 {
opacity: 1;
}
.flexboxcenter {
display: flex;
direction: rtl;
float: right;
justify-content: right;
align-items: right;
}
.section-1 {
width: 100%;
height: 100vh;
display: block;
position: relative;
}
.hover-link {
height: 100px;
width: 100%;
z-index: 100000;
}
.hover-link .nav-1 {
z-index: 10000;
}
.svc-title {
direction: rtl;
position: relative;
font-size: 20px;
font-family: 'Heebo', serif;
float: right;
right: 20px;
top: 20px;
opacity: 1;
color: #a2a3a7;
z-index: 100001;
padding-bottom: 30px;
}
.add-icon {
vertical-align: middle;
font-size: 20px;
direction: rtl;
color: #000;
transition: all 0.25s ease-in-out 0s;
-moz-transition: all 0.25s ease-in-out 0s;
-webkit-transition: all 0.25s ease-in-out 0s;
-ms-transition: color 0.25s ease-in-out 0s;
}
.hover-link .nav-1 a {
right: 20px;
top: 50px;
text-align: right;
display: block;
font-family: 'Heebo', serif;
text-decoration: none;
color: black;
font-size: 30px;
letter-spacing: 0.7px;
padding: 0px;
transition: all 500ms ease-in-out;
}
.hover-link .nav-1:hover a {
opacity: 0.4;
}
.hover-link .nav-1 a::after {
display: inline-block;
opacity: 0;
margin: 0 0.25em;
content: "\f30a";
font-family: "Font Awesome 5 Free";
font-size: 0.8em;
font-weight: 900;
transition: opacity 0.5s ease;
}
.hover-link .nav-1 a:hover {
color: black !important;
opacity: 1 !important;
transform: translate(-20px) !important;
}
.hover-link .nav-1 a:hover::after {
opacity: 1;
}
/* Background classes */
.bg-1 {
position: absolute;
top: 0px;
left: 0px;
background: url('https://images.unsplash.com/photo-1432821596592-e2c18b78144f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=3f9c78df0edb464244bbabb04d1797d8') center center no-repeat;
background-size: cover;
height: 200vh;
width: 100%;
z-index: -1;
opacity: 0;
-webkit-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.bg-2 {
position: absolute;
top: 0px;
left: 0px;
background: url('https://images.unsplash.com/photo-1421757295538-9c80958e75b0?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=3628f27cd5768ece147877e2dd792c6c') center center no-repeat;
background-size: cover;
height: 200vh;
width: 100%;
z-index: -1;
opacity: 0.0;
-webkit-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<span class="svc-title"> השירותים שאנו מציעים:
</span>
<section id="section-1">
<div class="hover-link flexboxcenter">
<div class="nav-1">
הדמיות אדריכליות
<div class="bg-1"></div>
<br>
הדמיות פנים
<div class="bg-2"></div>
<br>
הדמיות חוץ
<div class="bg-2"></div>
</div>
</div>
</section>

Image slider got stuck after first button click

I got a question regarding an image slider that I am creating from scratch. I want to create it from scratch due to the fact that I do not need a lot of extra properties which I could get from using external sliders.
I have the following setup:
var num_of_images = $( ".image-holder" ).length;
var visible_images = 2;
$( "#slide-right" ).click(function() {
$(".hold-1").addClass('first');
});
.col-slider{
position:relative;
z-index:13;
margin-top:0px;
width:70%;
overflow:hidden;
height:174px;
background-color:yellow;
}
.image-holder {
width: 175px;
height: 174px;
display: flex;
justify-content: center;
align-items: center;
color: white;
margin:0 15px;
float:left;
background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))
}
.image-holder h2{
font-family: Titillium Web;
text-transform: uppercase;
font-weight:600;
display:inline-block;
width:85%;
text-align:center;
font-size:36px;
}
.col-slider-buttons a{
margin-right:10px;
display:inline-block;
margin-bottom:30px;
}
.first {
-webkit-animation: animateleft 1s ease-out forwards;
-moz-animation: animateleft 1s ease-out forwards;
-ms-animation: animateleft 1s ease-out forwards;
-o-animation: animateleft 1s ease-out forwards;
animation: animateleft 1s ease-out forwards;
}
#keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-moz-keyframes animateleft {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-webkit-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-ms-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-o-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-slider-buttons">
<a id="slide-left" href="#">Left</a>
<a id="slide-right" href="#">Right</a>
</div>
<div class="col-slider">
<div class="image-holder hold-1">
<h2>TEST 1</h2>
</div>
<div class="image-holder hold-2">
<h2>TEST 2</h2>
</div>
<div class="image-holder hold-3">
<h2>TEST 3</h2>
</div>
<div class="image-holder hold-4">
<h2>TEST 4</h2>
</div>
</div>
What I am trying to achieve is that whenever I press the right button the margin got shifted towards the left. But I need some kind of mechanism to detect that. Have anyone an idea on how I could implement that? I do not ask for full code implementations. Any guidance is already very helpfull.
To be short: desired setup: being able to navigate through the images with the left and right button by shifting the margin towards left and right.
For a JSFIDDLE DEMO: JSFIDDLE

You are only adding the class first to your first holder.. (.hold-1). You can add an additional variable (counter) and add it the following way:
$(".hold-" + counter +"").addClass('first');
Have a look below:
var num_of_images = $( ".image-holder" ).length;
var visible_images = 2;
var counter = 1;
$( "#slide-right" ).click(function() {
$(".hold-" + counter +"").addClass('first');
counter = counter + 1;
});
.col-slider{
position:relative;
z-index:13;
margin-top:0px;
width:70%;
overflow:hidden;
height:174px;
background-color:yellow;
}
.image-holder {
width: 175px;
height: 174px;
display: flex;
justify-content: center;
align-items: center;
color: white;
margin:0 15px;
float:left;
background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))
}
.image-holder h2{
font-family: Titillium Web;
text-transform: uppercase;
font-weight:600;
display:inline-block;
width:85%;
text-align:center;
font-size:36px;
}
.col-slider-buttons a{
margin-right:10px;
display:inline-block;
margin-bottom:30px;
}
.first {
-webkit-animation: animateleft 1s ease-out forwards;
-moz-animation: animateleft 1s ease-out forwards;
-ms-animation: animateleft 1s ease-out forwards;
-o-animation: animateleft 1s ease-out forwards;
animation: animateleft 1s ease-out forwards;
}
#keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-moz-keyframes animateleft {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-webkit-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-ms-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-o-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-slider-buttons">
<a id="slide-left" href="#">Left</a>
<a id="slide-right" href="#">Right</a>
</div>
<div class="col-slider">
<div class="image-holder hold-1">
<h2>TEST 1</h2>
</div>
<div class="image-holder hold-2">
<h2>TEST 2</h2>
</div>
<div class="image-holder hold-3">
<h2>TEST 3</h2>
</div>
<div class="image-holder hold-4">
<h2>TEST 4</h2>
</div>
</div>
Hope it helped

I've added/changed these lines of code:
$(".hold-"+ ($('.image-holder.first').length + 1)).addClass('first');
What it does: It counts the amount of elements that has both class' image-holder & first. Then i adds 1, to get the value of the hold- class we want to add our class to
var num_of_images = $(".image-holder").length;
var visible_images = 2;
$("#slide-right").click(function() {
$(".hold-"+ ($('.image-holder.first').length + 1)).addClass('first');
});
.col-slider {
position: relative;
z-index: 13;
margin-top: 0px;
width: 70%;
overflow: hidden;
height: 174px;
background-color: yellow;
}
.image-holder {
width: 175px;
height: 174px;
display: flex;
justify-content: center;
align-items: center;
color: white;
margin: 0 15px;
float: left;
background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))
}
.image-holder h2 {
font-family: Titillium Web;
text-transform: uppercase;
font-weight: 600;
display: inline-block;
width: 85%;
text-align: center;
font-size: 36px;
}
.col-slider-buttons a {
margin-right: 10px;
display: inline-block;
margin-bottom: 30px;
}
.first {
-webkit-animation: animateleft 1s ease-out forwards;
-moz-animation: animateleft 1s ease-out forwards;
-ms-animation: animateleft 1s ease-out forwards;
-o-animation: animateleft 1s ease-out forwards;
animation: animateleft 1s ease-out forwards;
}
#keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-moz-keyframes animateleft {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-webkit-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-ms-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-o-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-slider-buttons">
<a id="slide-left" href="#">Left</a>
<a id="slide-right" href="#">Right</a>
</div>
<div class="col-slider">
<div class="image-holder hold-1">
<h2>TEST 1</h2>
</div>
<div class="image-holder hold-2">
<h2>TEST 2</h2>
</div>
<div class="image-holder hold-3">
<h2>TEST 3</h2>
</div>
<div class="image-holder hold-4">
<h2>TEST 4</h2>
</div>
</div>

Microsoft Logo Animation v2

I updated my animation of the Microsoft's logo. It's available on CodePen. Overall, I am quite satisfied with it now apart from one thing.
I cannot seem to figure out how to stop the animation so the logo looks correct. I tried setting the delay to 6000ms = 6s = length of the animation, but it looked way off. Right now it's set to 5900ms. Any tips on this?
Another thing I was wondering was, how would you make the YouTube video play after a certain amount of time, say when the text appears? Thanks!
var playState = '-webkit-animation-play-state';
$(".boxes").css(playState, "running");
setTimeout(function() {
$(".boxes").css(playState, "paused");
}, 5900);
body {
background: hsl(30, 20%, 20%);
color: #fff;
font-family: 'Open Sans', sans-serif;
}
.boxes {
-webkit-animation: logo 6s 1 forwards;
animation: logo 6s 1 forwards;
position: absolute;
}
.box {
-webkit-animation: scaling 1.5s cubic-bezier(.1,.95,.7,.8) 4;
animation: scaling 1.5s cubic-bezier(.1,.95,.7,.8) 4;
height: 50px;
width: 50px;
}
.brand {
-webkit-animation: fadein 2s ease 4.5s forwards;
animation: fadein 2s ease 4.5s forwards;
display: inline;
font-size: 36px;
margin: 24px 0 0 0;
opacity: 0;
position: relative;
top: -36px;
text-align: center;
z-index: 0;
}
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
min-height: 100vh;
-webkit-flex-direction: column;
flex-direction: column;
justify-content: center;
}
.intro {
text-align: center;
}
.logo {
-webkit-animation: moveLeft .5s linear 4.5s forwards;
animation: moveLeft .5s linear 4.5s forwards;
display: inline-block;
height: 100px;
left: 100px;
margin: 0 auto;
position: relative;
width: 100px;
z-index: 1;
}
.player {
display:none;
}
#green {background: #7cbb00;}
#yellow {background: #ffbb00;}
#blue {background: #00a1f1;}
#red {background: #f65314;}
#animateGreen {animation-delay: 4.5s;}
#animateYellow {animation-delay: 3s;}
#animateBlue {animation-delay: 1.5s;}
#animateRed {animation-delay: 0s;}
#keyframes fadein {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes logo {
0% {left: 0px; top: 0px; transform: rotate(0deg)}
25% {left: 50px; top: 0px; transform: rotate(-180deg)}
50% {left: 50px; top: 50px; transform: rotate(-360deg)}
75% {left: 0px; top: 50px; transform: rotate(-540deg)}
100% {left: 0px; top: 0px; transform: rotate(-720deg)}
}
#keyframes moveLeft {
from {padding-right: 0; left: 100px;}
to {padding-right: 50px; left: 0;}
}
#keyframes scaling {
0%, 100% {transform: scale(1)}
50% {transform: scale(.5)}
}
<head><script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script></head>
<div class="flex">
<div class="intro">
<div class="logo">
<div class="boxes" id="animateGreen">
<div class="box" id="green">
</div>
</div>
<div class="boxes" id="animateYellow">
<div class="box" id="yellow">
</div>
</div>
<div class="boxes" id="animateBlue">
<div class="box" id="blue">
</div>
</div>
<div class="boxes" id="animateRed">
<div class="box" id="red">
</div>
</div>
</div>
<div class="brand">
Microsoft
</div>
</div>
</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/I3Ak5VgyEoc?autoplay=1" class="player"></iframe>

Instead of using jQuery/JavaScript to stop the animation a better approach would be to specify a different animation for each box ending with them in the position you want.
Example CodePen
As for playing a YouTube video when the text appears, if you refer to the YouTube API Docs it would be something like this in jQuery:
setTimeout(function(){
//play the youtube video (#playerId) is the id of your youtube video element
$('#playerId').get(0).playVideo();
} , 4500); //4500 is the delay in ms