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/

How to stop a css slide animation (starting on load) when user scrolls?

There's a trick in JS I can't achieve, it relies on stopping a slidding animation made in CSS. In the moment, I have a long div with a random images content that slides in from the top and then out from the bottom. The animation runs at page load thanks to a 'slide down' class, calling the desired slide effect. I also set a scroll effect that allows the user to scroll in this div, BUT I'd like the scroll to take priority over the animation. The animation is finally only a way to encourage the user to scroll. I tried the following code but it has no effect :
$(window).scroll(function() {
('#scroller').removeClass("slidedown");
});
Could that be linked to the animation, like if it was considered as a 'scroll action' ? I attempt to handle this with 'if (ScrollTop < = >)' parameters but it simply has no effect or it just cancels the animation, which is unwanted.
'.on('mousewheel', function(){' doesn't seem to work. Replace '$(window)' by $('#scroller') has no effect either. I'm just thinking on the best way to settle this, but I need at least some advices to understand what I'm doing wrong (and I have to precise that I'm a beginner) !
Please find some key codes below :
----
HTML
----
<div id="scroller-wrapper">
<div id="scroller" class="slidedown">
<div id="img-defile1" class="img-defile">
<img src="img/ceaac.jpg"/>
</div>
<div id="img-defile2" class="img-defile">
<img src="img/ceaac2.jpg"/>
</div>
</div>
</div>
---
CSS
---
#scroller-wrapper {
top:0;
left:0;
width:102vw;
height:100%;
position:absolute;
overflow-y:scroll;
overflow-x:hidden;
transform: scale(1, -1);
z-index:2;
}
#scroller {
max-width:100%;
width:60%;
height:1250%;
position:relative;
z-index:800;
display:block;
transform: scale(1, -1);
}
.slidedown {
animation-duration:120s;
animation-name: slidedown;
animation-timing-function:linear;
animation-iteration-count:1;
animation-fill-mode: forwards;
}
#keyframes slidedown {
0% {
bottom: -75%;
}
100% {
bottom: 1150%;
}
}
.img-defile {
display:block;
max-width:100%;
height:auto;
position:absolute;
overflow:hidden;
}
.img-defile img {
width:600px;
}
.custom-scroll {
height: calc(80% - 20px);
}
---------
JS/Jquery
---------
$('#scroller').scroll(function () {
if ($(this).scrollTop() > 0) {
$('#scroller').addClass("custom-scroll");
return false;
} else {
$('#scroller').removeClass("custom-scroll");
}
});
$('.img-defile').each(function(i) {
$pT=$("#scroller").height();
$pL=$("#scroller").width();
$(this).css({
top:Math.floor(Math.random()*$pT),
left:Math.round(Math.random()*$pL)
});
});
Many thanks in advance !

How to stop a CSS animation when it meets the screen edge?

I created this demo:
http://cristiantraina.altervista.org/boxfall/
When you click, it creates a red falling box.
The problem is that using only css there are no ways to detect the size of the screen, in fact in my demo I specify that the box has to fall for 1000px, regardless of the actual height of the screen.
This is the code of the keyframe:
#include keyframes("fall"){
to{
top: 1000px;
}
}
I can't use bottom:0px; because I wouldn't know from where to start the fall, and I didn't solve my main problem.
This is the FallBox.js script:
function FallBox(x, side, parent){
this.x = x;
this.parent = parent || $("body");
this.side = side || Math.random()*200;
this.createBox();
this.fall();
}
FallBox.prototype.createBox = function(){
box = document.createElement('div');
$box = $(box); // I hate brackets
$box.addClass("box");
$box.css({
width: this.side+"px",
height: this.side+"px",
left: this.x+"px",
top: "-"+(this.side+5)+"px"
});
this.box = $box;
}
FallBox.prototype.fall = function(){
this.parent.append(this.box);
this.box.addClass("fall");
}
I know that I could use overflow:hidden; in the parent div, but I don't think that this is the ideal solution. First because a user can have got a screen with a superior height, then because I want to the box stops when it meets the edge, as the border was ground and it shouldn't pass through.
Another solution that I found on the web, it's to use the CSSOM API, but not even mozilla developers are sure of the compatibilty of these.
So, how can I stop an animation when it meets the screen edge, since javascript fails to inject properties?
Thank you.

If you're looking for a css-only solution, you could use the css calc feature (http://caniuse.com/#feat=calc) in combination with vh (http://caniuse.com/#search=vh).
document.querySelector(".box").addEventListener("click", function() {
this.classList.toggle("is-dropped");
})
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.box {
position: absolute;
top: 0;
left: 200px;
width: 100px;
height: 100px;
background: red;
transition: top 2s;
}
.box.is-dropped {
top: calc(100vh - 100px);
}
<div class="box"></div>

You coul use the translatey() CSS transform function to shift each div up by 100% of its own height. That way you would just need 2 rules to change the value of the top position without having to worry about height in each case.
(function(d,M){
var div=d.createElement("div"),
wait=0,size;
d.body.addEventListener("click",function(){
if(!wait){
wait=1;
div=div.cloneNode(1);
div.classList.remove("go");// necessary so that newly created divs don't just get added to the bottom of the page
size=M.max(M.floor(M.random()*200),50);
div.style.height=div.style.width=size+"px";
div.style.left=M.max(M.floor(M.random()*this.offsetWidth)-size,0)+"px";
this.appendChild(div);
setTimeout(function(){
div.classList.add("go");// adding this class starts the animation.
wait=0;
},5);
}
},0);
})(document,Math);
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%}
div{
background:#000;
border:1px solid #fff;
transition:top 2s linear;
position:absolute;
top:0;
transform:translatey(-100%);
}
div.go{
top:100%;
}
ORIGINAL SOLUTION
As the height of the box is being set dynamically in your JavaScript, your CSS isn't going to know the height of each box but that doesn't stop you using the CSS calc() function to set the top position you want to animate each to, much like you currently do to set its starting top position. Here's a quick, rough example, with an alternative solution in the comments that doesn't use calc(), if you'd prefer.
var div=document.createElement("div"),
wait=0,size;
document.body.addEventListener("click",function(){
if(!wait){
wait=1;
div=div.cloneNode(0);
size=Math.max(Math.floor(Math.random()*200),50);
div.style.height=div.style.width=size+"px";
div.style.left=Math.max(Math.floor(Math.random()*this.offsetWidth)-size,0)+"px";
div.style.top="-"+size+"px";
this.appendChild(div);
setTimeout(function(){
div.style.top="calc(100% - "+size+"px)"; /* This is the important bit */
// div.style.top=document.body.offsetHeight-size+"px"; /* Alternative solution, without using calc() */
wait=0;
},5);
}
},0);
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%}
div{
background:#000;
border:1px solid #fff;
transition:top 2s linear; /* Using a transition instead of an animation */
position:absolute;
}

CSS transition only works once in FF and Chrome

I am having an issue with CSS transitions and different browsers. The following Fiddle works fine on IE (the text on the right hand side correctly fades in when you hover over the items on the left and you can switch to other items with the transition still firing on every new hover), but for some reason FF and Chrome will no longer do the transition after selecting one of the items on the left.
jsfiddle link
The CSS transition code:
.FAQItemText.active, .FAQItemTextDark.active, .solutionText.active {
-webkit-transition: opacity 1500ms ease;
-moz-transition: opacity 1500ms ease;
-o-transition: opacity 1500ms ease;
transition: opacity 1500ms ease;
opacity: 1;
}
Please can anyone help me fix it to make it work on all browsers?
Thanks

A CSS transition can't repeat. if you want something that repeat, use a CSS animation
Link : http://www.w3schools.com/css/css3_animations.asp

Your code was overly complicated and there are much simpler ways of doing what you're trying to achieve. I rewrote your JS to work like it should, altered your CSS classes and rules to better suit the purpose and cleaned up your DOM a little bit also.
Check out the code below, where I have explained what changes I've made:
$(function(){
//select all the link elements and add needed event handlers:
$(".leftSlidePanel>a")
.mouseenter(preview)
.mouseleave(preview)
.click(selectSlide);
});
function preview(event){
// This is the slide the element you clicked on links to:
var targetSlide=$(event.currentTarget).attr("href");
// Let's make a selector to select the .leftItem inside the link you hovered and our target slide:
var previewedItem=$(event.currentTarget).find(".leftItem").add(targetSlide);
// and another selector to select all the .leftItems and .FAQItemTexts aparat from the ones being targeted:
var hiddenItems=$(".leftItem, .FAQItemText").not(previewedItem);
// Next add or remove classes from our selected items depending on wheter it was mouseeneter or mouseout:
if(event.type=="mouseenter"){
previewedItem.addClass("previewed");
hiddenItems.addClass("hidden");
}else{
previewedItem.removeClass("previewed");
hiddenItems.removeClass("hidden");
}
}
function selectSlide(event){
// Prevent default behaviour of clicking a link:
event.preventDefault();
// Remove class selected from all .leftItems and .FAQItemTexts:
$(".leftItem, .FAQItemText").removeClass("selected");
// And add said class to targeted elements:
$(event.currentTarget).find(".leftItem").add($(event.currentTarget).attr("href")).addClass("selected");
}
.slideContentContainer {
width:70%;
height:100%;
min-width:1050px;
margin-left:auto;
margin-right:auto;
padding-top:80px;
}
.leftSlidePanel {
float:left;
width:30%;
padding-top:29px;
}
.rightSlidePanel {
float:right;
width:70%;
padding-top:29px;
}
.leftItem {
color: transparent;
width: 100%;
margin-top:0;
text-align: left;
padding-bottom: 23px;
font-family:"Helvetica W01 Cn" !important;
}
.leftItem h4 {
margin: 0;
padding-top:5px;
}
/* this is how your links on the left will look like when they're selected or previewed: */
.leftItem.selected, .leftItem.previewed {
color: rgb(227, 114, 22);
}
.dark.selected {
color: rgb(49, 49, 50);
}
/* This is the style your FAQItemText has normally and when another item is being previewed: */
.FAQItemText, .FAQItemText.selected.hidden {
width: 95%;
opacity: 0;
float:right;
font-size: 20px;
padding-top:29px;
text-align: justify;
color: rgb(227, 114, 22);
font-family:"Helvetica W01 Cn" !important;
display:none;
}
/* Instead of creating another class with almost the same rules as another, create a subclass: */
.FAQItemText.dark {
color: rgb(49, 49, 50);
}
/* This is the style your FAQItemText will have when it's either selected or previewed: */
.FAQItemText.selected, .FAQItemText.previewed{
opacity: 1;
display:block;
/* Firefox and IE support animations without vendor prefixes, so -webkit- is the only one you'll need */
-webkit-animation: fade 1.5s 1;
animation: fade 1.5s 1;
}
/* using display:block wile transitioning opacity can often doesn't give you the effect you'd want, but this can be fixed by using an animation instead: */
#-webkit-keyframes fade{
0% {display:none; opacity:0;}
1% {display:block; opacity:0;}
100% {display:block; opacity:1;}
}
#-keyframes fade{
0% {display:none; opacity:0;}
1% {display:block; opacity:0;}
100% {display:block; opacity:1;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section" id="faqs">
<div class="slideContentContainer">
<div class="leftSlidePanel">
<div id="menuItem11" class="leftItem selected"><h4>1</h4></div>
<div id="menuItem12" class="leftItem"><h4>2</h4></div>
<div id="menuItem13" class="leftItem"><h4>3</h4></div>
<div id="menuItem14" class="leftItem"><h4>4</h4></div>
<div id="menuItem15" class="leftItem"><h4>5</h4></div>
<div id="menuItem16" class="leftItem"><h4>6</h4></div>
</div>
<div class="rightSlidePanel">
<div id="slideItem11" class="FAQItemText selected">BLAH 1 BLAH.</div>
<div id="slideItem12" class="FAQItemText">BLAH 2 BLAH.</div>
<div id="slideItem13" class="FAQItemText">BLAH 3 BLAH.</div>
<div id="slideItem14" class="FAQItemText">BLAH 4 BLAH.</div>
<div id="slideItem15" class="FAQItemText">BLAH 5 BLAH.</div>
<div id="slideItem16" class="FAQItemText">BLAH 6 BLAH.</div>
</div>
</div>
</div>

Thank you all for your suggestions, after a while of googling I came across this which seems to do the trick.
So I changed my js code from this:
function ShowSlide(slide, slideItem) {
//Reset page
resetAllHighlights(slide);
//Show needed ones.
jQuery('#slideItem' + slide + slideItem).show();
jQuery('#slideItem' + slide + slideItem).addClass("active");
jQuery('#menuItem' + slide + slideItem).addClass("itemSelected");
}
To this:
function ShowSlide(slide, slideItem) {
//Reset page
resetAllHighlights(slide);
//Show needed ones.
jQuery('#slideItem' + slide + slideItem).show(0);
jQuery('#slideItem' + slide + slideItem).addClass("active");
jQuery('#menuItem' + slide + slideItem).addClass("itemSelected");
}
And it now works in all browsers.

How to resize & move css divisions at same time?

I have a division in which i'll be having dynamic numbers of colorful blocks(that too divisions) at various instances. On clicking the box, i want them to expand & cover whole screen. the problem is, while boxes are expanding, they are expanding at there own position & not shifting in the screen..
I used:
.elemented1 {
width: 100%;
height: 100%;
-webkit-animation: elemen1 0.3s;
border: 0px;
}
#-webkit-keyframes elemen1 {
from {
width: 49.6%;
height: 39.6%;
}
to {
width: 100%;
height: 100%;
}
}
This is working fine but i have to put blocks dynamically. I cant write animations for individual blocks as they will be of different sizes.

You can use a css3 framework for css3 animation as far as your requirement is consent...
May be you should use, Anima.js , it is css3 + js framework...
Else you can also try Move.js and Animate.css css3 animation framework...
Animate.css is a pure css3 animation framework...
Note:- Just before using check the browser compatibility of the css3 animations...
Thanks...

Finally after painful 4 hours i got it.
This is the code for animation:
#-webkit-keyframes animateExpansion
{
from
{
width:49.6%;
height:49.6%;
left: attr(left %);
top: attr(top %);
-webkit-transform:translate(0%,0%);
}
to
{
width:100%;
height:100%;
left: 0%;
top: 0%;
-webkit-transform:translate(0%,0%);
}
}
and here goes javascript:
function onLayoutClick(){
var style = window.getComputedStyle(this);
var this_Top=(style.getPropertyValue('top'));
var this_Left= (style.getPropertyValue('left'));
this.setAttribute("style","border:0px;width:100%;height:100%;-webkit-transform:translate(-"+this_Left+",-"+this_Top+");-webkit-animation:animateExpansion 0.5s ease-in-out");
var layouts = document.getElementsByClassName("layouts");
for( i = 0 ;i<layouts.length; i++ )
{
layouts[i].style.zIndex="-1";
}
this.style.zIndex="0";
}