We Keep Coding

How to run css #keyframes when element is visible via scrolling

I have a huge problem with controlling css animations, I want them to start when the element is visible on the screen.
Precisely I'm making a site that has overall height like 8000 px, and the element that has an animation is far down, so to see this element I need to scroll the page down to it. The problem is that animation starts when page finish it's loading, so every time I scroll down to this element, the animation is already ending.
I've been looking for solution on stack-overflow, youtube and so on, but unfortunetly I have failed, every solution that I found and tried implementing didin't worked so I am close to give up on this...
How to make this animation run when the element gets visible?
Can someone help me with writing proper code in javascript?
A small digression, I am making my very first site, unfortunetly I haven't had any serious lessons of coding in html, css nor javascript/jquery in school or at university, so please forgive me some non-optimal class or id's names and solutions that are not proffesional. :P
Fortunetly html and css was easy to learn so I didn't have such problems like this, but javascript seems to be hard language :/
HTML element below:
<article id="pasek">
<div id="border_left" class="tekst"></div>
<div id="litery" class="tekst">
<p class="rok_założenia">2020</p>
<p class="tekst_rok_założenia">Rok założenia</p>
</div>
<div id="border_right" class="tekst"></div>
</article>
CSS code for article of id="pasek"
#pasek {
text-align: center;
background-color: #f4d03f;
}
p.rok_założenia {
font-size: 80px;
color: #154360;
padding-top: 40px;
padding-bottom: 5px;
}
p.tekst_rok_założenia {
font-size: 40px;
color: #154360;
padding-bottom: 40px;
}
div.tekst {
display: inline-block;
animation-name: fade-in;
animation-duration: 3s;
}
#keyframes fade-in {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#border_left {
border-right: 2px solid;
height: 120px;
border-right-color: white;
}
#border_right {
border-right: 2px solid;
height: 120px;
border-right-color: white;
}
#litery {
padding-left: 70px;
padding-right: 70px;
}

There is some article on CSS-Tricks how to do this with jQuery.
I modified a little your code example about IDs to make an article more flexible and I made live preview about it.
If you want to learn more about JavaScript check courses on udemy, freecodecamp, frontendmasters, pluralsight etc.
https://codesandbox.io/s/wizardly-noether-ed4pd

Javascript that I have tried:
Original:
<script>
$(document).ready(function(){
$('.dummy').viewportChecker({
callbackFunction: function(elem, action){
setTimeout(function(){
elem.html((action == "add") ? 'Callback with 500ms timeout: added class' : 'Callback with 500ms timeout: removed class');
},500);
},
scrollBox: ".scrollwrapper"
});
});
</script>
With my changes (classes names, id's)
<script>
$(document).ready(function(){
$('.tekst').viewportChecker({
callbackFunction: function(elem, action){
setTimeout(function(){
elem.html((action == "add") ? 'Callback with 500ms timeout: added class' : 'Callback with 500ms timeout: removed class');
},500);
},
scrollBox: "#pasek"
});
});
</script>
I've been also trying to implement those solutions:
https://jsbin.com/zuqexigepe/edit?html,output
http://jsfiddle.net/toby3105/749yxgdk/2/

Javascript - Reversing a Modal Animation

I have a few items on a site I'm building that onclick activate a modal like this.
Right now the animation is a one-way in that, when you close it or click off from the modal's focus, it just disappears. From what I've been reading, people seems to use the fadeIn/slideIn animation for one time effects, but is it possible, to reverse the animation so instead of just changing display to none, it slides back out?

#modal{bottom: 0; opacity: 1; transition: bottom 400ms, opacity 400ms; }
#modal.hidden{bottom: -300px; opacity: 0}
Then in button click event:
$("#modal").addClass("hidden")
On close event:
$("#modal").removeClass("hidden")
If you need pure javascript, it would be a bit more code but essentially that's it

Depending on how you've structured your code, you can approach this in a few ways:
Make use of the animation-direction: reverse; CSS property
Use a Javascript framework (like jQuery) that enables manipulation of DOM elements (with jQuery you could do something like: $('element').slideIn(); to show the modal and $('element').slideOut(); to hide the modal).
Use CSS classes and apply / unapply them with Javascript (the option I'd recommend, and have given an example below):
$(document).ready(function() {
$('.open').on('click', function(e) {
e.preventDefault();
if ($('.modal').hasClass('hide')) {
$('.modal').removeClass('hide');
}
$('.modal').addClass('show');
});
$('.close').on('click', function(e) {
e.preventDefault();
$('.modal').addClass('hide');
if ($('.modal').hasClass('show')) {
$('.modal').removeClass('show');
}
});
});
.modal {
position: fixed;
top: 0;
left: 0;
width: 300px;
height: 300px;
left: -305px;
z-index: 999;
transition: all 0.3s ease;
background: #ffffff;
border: 1px solid blue;
}
.modal.show {
left: 150px;
}
.modal.hide {
left: -305px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click here to open modal</p>
<div class="modal">
<p>This is a modal window.</p>
<p>Click here to close</p>
</div>
Please note that this example is only there to illustrate a proof of concept - you'll need to tidy it yourself :)

Link popping up on page?

<li><img src="img/example.jpg"></li>
So the above code is an image link. I'm trying to get it so when a user clicks on this image, instead of it leading them to another page for the content. It will bring up a box with the content in keeping everything on the same page? anyone know how you can do this?
Thanks

Misread, you could do something like this as well.
Hide the Content you want to display using
some css.
On click add a class to slide the hidden content into view.
here's a JS fiddle
css
.contentBox {
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
color:#fff;
background: rgba(0,0,0, 0.7);
-moz-transform:translateX(-100%) translateY(0px);
-webkit-transform:translateX(-100%) translateY(0px);
-o-transform:translateX(-100%) translateY(0px);
-ms-transform:translateX(-100%) translateY(0px);
transform:translateX(-100%) translateY(0px);
-webkit-transition:200ms ease;
-moz-transition:200ms ease;
-ms-transition:200ms ease;
-o-transition:200ms ease;
transition:200ms ease;
}
.slideLeft {
-moz-transform:translateX(0px) translateY(0px);
-webkit-transform:translateX(0px) translateY(0px)!important;
-o-transform:translateX(0px) translateY(0px);
-ms-transform:translateX(0px) translateY(0px);
transform:translateX(0px) translateY(0px)!important;
}
markup
<img class="clickthis" src="http://i.imgur.com/LULHwuJ.jpg" />
<div class="contentBox">
The Content
</div>
js
$('.clickthis').on('click', function(){
$('.contentBox').addClass('slideLeft');
});

You could create a div that has an initial css value of visibility:hidden, then use javascript or jquery to change the value to 'visible' on a click event.
$('#yourpicturelink').on('click', function(){
$('#hiddendiv').css('visibility', 'visible');
}
that could be expanded into more of a toggle function, but it should get you on the right path

it sounds like you want to do something like this
<li><img src="img/example.jpg"></li>

Something like this is what you want. This is very basic, and doesn't have logic for closing the box or styling for the box, but hopefully you get the idea.
Basically, you have a div with the full size image you want to show that is hidden by default using css. Then, in the visible document, you have an image that shows the box using jQuery when it is clicked.
$(function() {
$(".clickable").click(function() {
$("#box").show();
});
});
img.clickable {
cursor: pointer;
width: 10%;
height:10%;
}
div#box {
position: absolute;
display: none;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="clickable" src="http://i.imgur.com/LULHwuJ.jpg" />
<div id="box">
<img src="http://i.imgur.com/LULHwuJ.jpg" />
</div>
Or, as an alternative, you can simply learn how to use libraries already coded up for you to accomplish this. Look at the comment by #Nillervision for some examples.

Change Background when part of it is hovered

i am totally new in web design, and i am right now struggling with creating part of my website, i need to somehow make this happen:
When PART of the BODY BACKGROUND is HOVERED, make the background change to "B", and when the mouse is not over that part, I need it to change back to background "A".
I have seen some examples here but as i am a beginner, i have no idea how to use javascript, if you could please give me some light here, either on pure CSS or on how to apply javascript.

This is accomplished very easily using a third party javascript library called JQuery http://jquery.com, you can see a working example here: http://jsfiddle.net/bbp8G/
$(document).ready(function(){
$("#hover").mouseenter(function(){
$(this).css("background","#009900");
}).mouseleave(function(){
$(this).css("background","#ffffff");
});
});

Here's the easiest way I know how to do what you've described...
<!-- POSITION THIS DIV WHEREVER YOU WANT THE
USER TO HOVER SO THAT THE BACKGROUND WILL CHANGE -->
<div id="hover">
</div>
<!-- PUT THIS CODE IN YOUR <HEAD> -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" />
<style>
#hover { width: 200px; height: 200px; position: relative; top: 200px; background: green; }
.myNewBackround { background-color: red; }
</style>
<script>
$(document).ready(function() {
// when the #hover DIV is hovered, change the background of the body
$('#hover').hover(function() {
$('body').addClass('myNewBackground');
});
});
</script>
Here's a JS FIDDLE:
http://jsfiddle.net/ZKaJn/

Or you can do it with pure CSS
<div id="left"> </div>
<div id="right"> </div>
And the CSS part:
#left
{
background-color:#000;
float:left;
width:50%;
height:200px;
}
#right
{
background-color:#FF0;
float:right;
width:50%;
height:200px;
}
#right:hover
{
background-color:#00F;
}
#left:hover
{
background-color:#F00;
}
You can replace the div's and values with whatever you like, the main part is the #right:hover and #left:hover

Actually with just css it is not possible to change the background of the body when hovering a DOM element. This is because CSS does not allow you (yet) to travel up the DOM tree (select a parent), only down (select a child).
That being said, it is however possible to mimic the effect, and it is even quiet easy if it is the body background you want to change. You can lay a pseudo element with a background on top of your body background, and underneath the actual content. This way it looks as if the body background has changed.
The css to achieve this would look something like this:
.hover-me:hover:after {
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
background: url(http://placekitten.com/600/300) center center;
background-size: cover;
z-index: -1;
}
And a small fiddle to demonstrate: http://jsfiddle.net/3dwzt/
Should be compatible with IE8 and up

Change how fast "title" attribute's tooltip appears

Is there a way to change how fast the tooltip from an element's "title" attribute? I'd like it if the tooltip appeared immediately, but it seems to take a few seconds to appear.

No, there's no way. The title attribute is implemented in a browser dependent fashion. For example I remember differences between IE and FF when using \r\n inside it.
Mozilla's docs explain the limits and functionality well.
If you want customization you may take a look at third party plugins such as qTip2 which mimic it using divs and stuff and provide you full control.

You could use jqueryUI as suggested. An example of controlling the duration on the show property:
$( ".selector" ).tooltip({ show: { effect: "blind", duration: 800 } });

Jquery UI tooltip is extremely simple and customizable: Just download or include jquery UI in your page.
If you want all the tooltips of your page to show immediately at hover, just use this:
$(document).tooltip({show: null});
Note that this applies to all elements that have a 'title' attribute.
You can modify the selector to affect only a class, and set custom speed or effect:
$('.yourClass').tooltip({show: {effect:"none", delay:0}});

Unfortunately, there is no way to do this yet,
so I am using the following methods to help. (No dependencies required)
<style>
[title] {
position: relative;
}
[title]:after {
content: attr(title);
position: absolute;
left: 50%;
bottom: 100%; /* put it on the top */
background-color: yellow;
width: max-content;
opacity: 0;
-webkit-transition: opacity 0.75s ease-in-out; /* 👈 Change the time to meet your requirements. */
}
[title]:hover:after {
opacity: 1;
}
</style>
<div style="min-height:5rem"></div>
<div style="min-width: 5rem; border: 2px solid red;" title="hello world">my div</div>
<button title="for debug">button</button>
If you don't want the title to conflict with it, you can use data-* w3school.data-* help you, for example.
<style>
[data-tooltip] {
position: relative;
}
[data-tooltip]:after {
content: attr(data-tooltip);
position: absolute;
left: 50%;
bottom: 100%; /* put it on the top */
background-color: yellow;
width: max-content;
opacity: 0;
-webkit-transition: opacity 0.75s ease-in-out;
}
[data-tooltip]:hover:after {
opacity: 1;
}
div[data-tooltip]:after {
left: 5px!important;
}
</style>
<div style="min-height:5rem"></div>
<div style="min-width: 5rem; border: 2px solid red;" data-tooltip="hello world">my div</div>
<button data-tooltip="for debug">button</button>
<button title="for debug">title only</button>
<button data-tooltip="my tool tip msg" title="my title msg">title and tooltip</button>
below link may help you too.
fade in and out on simple css tooltip

It isn't possible to change how fast default browser's tooltip appear, but you can use one of the tooltip plugins (here is few: http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/ ) where you can customise lot's of things, including delay.

TippyJS has a billion customization options.
https://atomiks.github.io/tippyjs
https://github.com/atomiks/tippyjs