Develop Reference

Putting html/css animated element on top of header

I have this:
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 3000); // Change image every 2 seconds
}
.downArrow{
background-color: transparent;
text-align: center;
}
.bounce {
background-color: transparent;
-moz-animation: bounce 3s infinite;
-webkit-animation: bounce 3s infinite;
animation: bounce 3s infinite;
}
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
<div id="headerr" class="home">
<div class="w3-content w3-section">
<img class="mySlides" src="https://images.unsplash.com/photo-1629199022827-eede3c3df471?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" style="width:100%">
<!-- Learn More! -->
<!-- <button class="button ahref-learn-more" type="button">Learn More!</button> -->
<div class="downArrow bounce">
<img width="40" height="40" alt="" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiBoZWlnaHQ9IjMycHgiIGlkPSLQodC70L7QuV8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0yNC4yODUsMTEuMjg0TDE2LDE5LjU3MWwtOC4yODUtOC4yODhjLTAuMzk1LTAuMzk1LTEuMDM0LTAuMzk1LTEuNDI5LDAgIGMtMC4zOTQsMC4zOTUtMC4zOTQsMS4wMzUsMCwxLjQzbDguOTk5LDkuMDAybDAsMGwwLDBjMC4zOTQsMC4zOTUsMS4wMzQsMC4zOTUsMS40MjgsMGw4Ljk5OS05LjAwMiAgYzAuMzk0LTAuMzk1LDAuMzk0LTEuMDM2LDAtMS40MzFDMjUuMzE5LDEwLjg4OSwyNC42NzksMTAuODg5LDI0LjI4NSwxMS4yODR6IiBmaWxsPSIjMTIxMzEzIiBpZD0iRXhwYW5kX01vcmUiLz48Zy8+PGcvPjxnLz48Zy8+PGcvPjxnLz48L3N2Zz4=" />
</div>
</div>
</div>
however, right on the image, I want that dancing animated arrow instead of below it. how can I do this? I tried forcing it with the em using css, but it doesn't work, and just keeps everything on the left side, as well as doesn't adjust the height :
left: 10em;
bottom: 10em;
but it doesn't make any difference. thx 4 the help

If you want it in the middle:
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 3000); // Change image every 2 seconds
}
.sec {
position: relative;
}
.downArrow{
position: absolute;
top: 50%;
left: 45%;
background-color: transparent;
text-align: center;
}
.bounce {
background-color: transparent;
-moz-animation: bounce 3s infinite;
-webkit-animation: bounce 3s infinite;
animation: bounce 3s infinite;
}
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
<div id="headerr" class="home">
<div class="w3-content w3-section sec">
<img class="mySlides" src="https://images.unsplash.com/photo-1629199022827-eede3c3df471?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" style="width:100%">
<!-- Learn More! -->
<!-- <button class="button ahref-learn-more" type="button">Learn More!</button> -->
<div class="downArrow bounce">
<img width="40" height="40" alt="" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiBoZWlnaHQ9IjMycHgiIGlkPSLQodC70L7QuV8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0yNC4yODUsMTEuMjg0TDE2LDE5LjU3MWwtOC4yODUtOC4yODhjLTAuMzk1LTAuMzk1LTEuMDM0LTAuMzk1LTEuNDI5LDAgIGMtMC4zOTQsMC4zOTUtMC4zOTQsMS4wMzUsMCwxLjQzbDguOTk5LDkuMDAybDAsMGwwLDBjMC4zOTQsMC4zOTUsMS4wMzQsMC4zOTUsMS40MjgsMGw4Ljk5OS05LjAwMiAgYzAuMzk0LTAuMzk1LDAuMzk0LTEuMDM2LDAtMS40MzFDMjUuMzE5LDEwLjg4OSwyNC42NzksMTAuODg5LDI0LjI4NSwxMS4yODR6IiBmaWxsPSIjMTIxMzEzIiBpZD0iRXhwYW5kX01vcmUiLz48Zy8+PGcvPjxnLz48Zy8+PGcvPjxnLz48L3N2Zz4=" />
</div>
</div>
</div>

You can work with absolute positioning. That way you can position your arrow relatively to the parent.
Here, I've marked the w3-content class to be relative and downArrow to be absolutely positioned, relatively to w3-content. With left: 50% the image is moved to start at the horizontal center of the container, with margin-left: -20px the image is moved back half of its width (40px) to have it perfectly in the center, and with bottom: 10px it's positioned 10px above the bottom of the container.
I've also added a red border to make it better visible in this example.
.w3-content {
position: relative;
}
.downArrow {
position: absolute;
left: 50%;
margin-left: -20px;
bottom: 10px;
border: 1px solid red;
}
<div id="headerr" class="home">
<div class="w3-content w3-section">
<img class="mySlides" src="https://images.unsplash.com/photo-1629199022827-eede3c3df471?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" style="width:100%">
<div class="downArrow bounce">
<img width="40" height="40" alt="" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiBoZWlnaHQ9IjMycHgiIGlkPSLQodC70L7QuV8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0yNC4yODUsMTEuMjg0TDE2LDE5LjU3MWwtOC4yODUtOC4yODhjLTAuMzk1LTAuMzk1LTEuMDM0LTAuMzk1LTEuNDI5LDAgIGMtMC4zOTQsMC4zOTUtMC4zOTQsMS4wMzUsMCwxLjQzbDguOTk5LDkuMDAybDAsMGwwLDBjMC4zOTQsMC4zOTUsMS4wMzQsMC4zOTUsMS40MjgsMGw4Ljk5OS05LjAwMiAgYzAuMzk0LTAuMzk1LDAuMzk0LTEuMDM2LDAtMS40MzFDMjUuMzE5LDEwLjg4OSwyNC42NzksMTAuODg5LDI0LjI4NSwxMS4yODR6IiBmaWxsPSIjMTIxMzEzIiBpZD0iRXhwYW5kX01vcmUiLz48Zy8+PGcvPjxnLz48Zy8+PGcvPjxnLz48L3N2Zz4=" />
</div>
</div>
</div>
Now add your animation again and you should be fine.

check this code
<div id="headerr" class="home">
<div class="w3-content w3-section" style="display: flex;">
<img class="mySlides" src="https://images.unsplash.com/photo-1629199022827-eede3c3df471?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" style="width:100%">
<!-- Learn More! -->
<!-- <button class="button ahref-learn-more" type="button">Learn More!</button> -->
<div class="bounce1">
<img class="bounce1"width="40" height="40" alt="" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiBoZWlnaHQ9IjMycHgiIGlkPSLQodC70L7QuV8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0yNC4yODUsMTEuMjg0TDE2LDE5LjU3MWwtOC4yODUtOC4yODhjLTAuMzk1LTAuMzk1LTEuMDM0LTAuMzk1LTEuNDI5LDAgIGMtMC4zOTQsMC4zOTUtMC4zOTQsMS4wMzUsMCwxLjQzbDguOTk5LDkuMDAybDAsMGwwLDBjMC4zOTQsMC4zOTUsMS4wMzQsMC4zOTUsMS40MjgsMGw4Ljk5OS05LjAwMiAgYzAuMzk0LTAuMzk1LDAuMzk0LTEuMDM2LDAtMS40MzFDMjUuMzE5LDEwLjg4OSwyNC42NzksMTAuODg5LDI0LjI4NSwxMS4yODR6IiBmaWxsPSIjMTIxMzEzIiBpZD0iRXhwYW5kX01vcmUiLz48Zy8+PGcvPjxnLz48Zy8+PGcvPjxnLz48L3N2Zz4=" />
</div>
</div>
</div>

Run jQuery function on initial page load and scroll

I'm working on a design and I would like make a few blocks "slide in" from the sides when they're in-view of the window. I have it working after following some tutorials online, but it will only work if the elements are not in-view and you scroll down the page to see them. What I would like to do is have the elements also "slide" when the page loads initially. I feel this might be too much code to just post here, so I added everything to a fiddle.
/*Interactivity to determine when an animated element in in view. In view elements trigger our animation*/
$(document).ready(function() {
//window and animation items
var animation_elements = $.find('.animation-element');
var web_window = $(window);
//check to see if any animation containers are currently in view
function check_if_in_view() {
//get current window information
var window_height = web_window.height();
var window_top_position = web_window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
//iterate through elements to see if its in view
$.each(animation_elements, function() {
//get the elements information
var element = $(this);
var element_height = $(element).outerHeight();
var element_top_position = $(element).offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is visible (its viewable if it exists between the viewable space of the viewport)
if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
element.addClass('in-view');
} else {
element.removeClass('in-view');
}
});
}
//on or scroll, detect elements in view
$(window).on('scroll resize', function() {
check_if_in_view()
})
//trigger our scroll event on initial load
$(document).ready('scroll');
});
.container {
margin-left: auto;
margin-right: auto;
width: 80%;
}
.row {
border-bottom: solid 1px transparent;
margin-bottom: 2em;
}
.row>* {
float: left;
}
.row:after,
.row:before {
content: '';
display: block;
clear: both;
height: 0;
}
.row.uniform>*> :first-child {
margin-top: 0;
}
.row.uniform>*> :last-child {
margin-bottom: 0;
}
.wrapper {
padding: 1em 0em 4em;
}
.profiles {
margin-bottom: 4em;
padding-top: 4em;
background-color: #fff;
height: 200px;
}
.profile {
width: 24%;
height: 100px;
margin-bottom: 2em;
margin-right: 2px;
text-align: center;
background-color: #666;
border: 1px solid #000;
color: black;
}
.animation-element {
opacity: 0;
position: relative;
}
.animation-element.slide-left {
opacity: 0;
-moz-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
-moz-transform: translate3d(-150px, 0px, 0px);
-webkit-transform: translate3d(-150px, 0px, 0px);
-o-transform: translate(-150px, 0px);
-ms-transform: translate(-150px, 0px);
transform: translate3d(-150px, 0px, 0px);
}
.animation-element.slide-left.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
/*animation element sliding right*/
.animation-element.slide-right {
opacity: 0;
-moz-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
-moz-transform: translate3d(150px, 0px, 0px);
-webkit-transform: translate3d(150px, 0px, 0px);
-o-transform: translate(150px, 0px);
-ms-transform: translate(150px, 0px);
transform: translate3d(150px, 0px, 0px);
}
.animation-element.slide-right.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="wrapper">
<div class="container">
<section class="profiles">
<div class="row">
<section class="profile animation-element slide-left">
</section>
<section class="profile animation-element slide-left">
</section>
<section class="profile animation-element slide-right">
</section>
<section class="profile animation-element slide-right">
</section>
</div>
</section>
</div>
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
The bit of code that I've been playing with is at the bottom of the jquery bit, but nothing I change seems to effect anything.
//trigger our scroll event on initial load
$(document).ready('scroll');
But I will admit I have very little knowledge of this, and I'm just following tutorials and examples online. On the fiddle, if you scroll down and back up, you'll see the boxes slide into view. What I'm wanting to do is make them slide in on the initial page load and also as you scroll down the page (i'm using the same code on other elements further down the page on the full version).
Thank you to anyone who can help me!

Pass your function as a reference to both the event listener and ready()
$(window).on('scroll resize', check_if_in_view);
$(document).ready(check_if_in_view);

You are almost there... all you need to do is trigger your check_if_in_view function when all the html is ready - that just means passing in the function by name to your last document.ready call. Your snippet works with that one tweak.
For some general advice, I wouldn't try to "fake" a scroll event just to trigger other behaviours - it may get confusing with changes later on. What you really want is to run your custom function right after pageload, and jquery will let you do precisely that.
/*Interactivity to determine when an animated element in in view. In view elements trigger our animation*/
$(document).ready(function() {
//window and animation items
var animation_elements = $.find('.animation-element');
var web_window = $(window);
//check to see if any animation containers are currently in view
function check_if_in_view() {
//get current window information
var window_height = web_window.height();
var window_top_position = web_window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
//iterate through elements to see if its in view
$.each(animation_elements, function() {
//get the elements information
var element = $(this);
var element_height = $(element).outerHeight();
var element_top_position = $(element).offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is visible (its viewable if it exists between the viewable space of the viewport)
if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
element.addClass('in-view');
} else {
element.removeClass('in-view');
}
});
}
//on or scroll, detect elements in view
$(window).on('scroll resize', function() {
check_if_in_view()
})
//trigger our scroll event on initial load
$(document).ready(check_if_in_view);
});
.container {
margin-left: auto;
margin-right: auto;
width: 80%;
}
.row {
border-bottom: solid 1px transparent;
margin-bottom: 2em;
}
.row>* {
float: left;
}
.row:after,
.row:before {
content: '';
display: block;
clear: both;
height: 0;
}
.row.uniform>*> :first-child {
margin-top: 0;
}
.row.uniform>*> :last-child {
margin-bottom: 0;
}
.wrapper {
padding: 1em 0em 4em;
}
.profiles {
margin-bottom: 4em;
padding-top: 4em;
background-color: #fff;
height: 200px;
}
.profile {
width: 24%;
height: 100px;
margin-bottom: 2em;
margin-right: 2px;
text-align: center;
background-color: #666;
border: 1px solid #000;
color: black;
}
.animation-element {
opacity: 0;
position: relative;
}
.animation-element.slide-left {
opacity: 0;
-moz-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
-moz-transform: translate3d(-150px, 0px, 0px);
-webkit-transform: translate3d(-150px, 0px, 0px);
-o-transform: translate(-150px, 0px);
-ms-transform: translate(-150px, 0px);
transform: translate3d(-150px, 0px, 0px);
}
.animation-element.slide-left.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
/*animation element sliding right*/
.animation-element.slide-right {
opacity: 0;
-moz-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
-moz-transform: translate3d(150px, 0px, 0px);
-webkit-transform: translate3d(150px, 0px, 0px);
-o-transform: translate(150px, 0px);
-ms-transform: translate(150px, 0px);
transform: translate3d(150px, 0px, 0px);
}
.animation-element.slide-right.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="wrapper">
<div class="container">
<section class="profiles">
<div class="row">
<section class="profile animation-element slide-left">
</section>
<section class="profile animation-element slide-left">
</section>
<section class="profile animation-element slide-right">
</section>
<section class="profile animation-element slide-right">
</section>
</div>
</section>
</div>
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

https://api.jquery.com/ready/
Description: Specify a function to execute when the DOM is fully loaded.
You can't just pass in "scroll", as that is not a function. What you can do is call $(window).trigger('scroll') at the end, or do $(document).ready(check_if_in_view), as check_if_in_view is a function.
/*Interactivity to determine when an animated element in in view. In view elements trigger our animation*/
$(document).ready(function() {
//window and animation items
var animation_elements = $.find('.animation-element');
var web_window = $(window);
//check to see if any animation containers are currently in view
function check_if_in_view() {
//get current window information
var window_height = web_window.height();
var window_top_position = web_window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
//iterate through elements to see if its in view
$.each(animation_elements, function() {
//get the elements information
var element = $(this);
var element_height = $(element).outerHeight();
var element_top_position = $(element).offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is visible (its viewable if it exists between the viewable space of the viewport)
if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
element.addClass('in-view');
} else {
element.removeClass('in-view');
}
});
}
//on or scroll, detect elements in view
$(window).on('scroll resize', function() {
check_if_in_view()
})
//trigger our scroll event on initial load
$(window).trigger('scroll');
});
.container {
margin-left: auto;
margin-right: auto;
width: 80%;
}
.row {
border-bottom: solid 1px transparent;
margin-bottom: 2em;
}
.row>* {
float: left;
}
.row:after,
.row:before {
content: '';
display: block;
clear: both;
height: 0;
}
.row.uniform>*> :first-child {
margin-top: 0;
}
.row.uniform>*> :last-child {
margin-bottom: 0;
}
.wrapper {
padding: 1em 0em 4em;
}
.profiles {
margin-bottom: 4em;
padding-top: 4em;
background-color: #fff;
height: 200px;
}
.profile {
width: 24%;
height: 100px;
margin-bottom: 2em;
margin-right: 2px;
text-align: center;
background-color: #666;
border: 1px solid #000;
color: black;
}
.animation-element {
opacity: 0;
position: relative;
}
.animation-element.slide-left {
opacity: 0;
-moz-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
-moz-transform: translate3d(-150px, 0px, 0px);
-webkit-transform: translate3d(-150px, 0px, 0px);
-o-transform: translate(-150px, 0px);
-ms-transform: translate(-150px, 0px);
transform: translate3d(-150px, 0px, 0px);
}
.animation-element.slide-left.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
/*animation element sliding right*/
.animation-element.slide-right {
opacity: 0;
-moz-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
-moz-transform: translate3d(150px, 0px, 0px);
-webkit-transform: translate3d(150px, 0px, 0px);
-o-transform: translate(150px, 0px);
-ms-transform: translate(150px, 0px);
transform: translate3d(150px, 0px, 0px);
}
.animation-element.slide-right.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="wrapper">
<div class="container">
<section class="profiles">
<div class="row">
<section class="profile animation-element slide-left">
</section>
<section class="profile animation-element slide-left">
</section>
<section class="profile animation-element slide-right">
</section>
<section class="profile animation-element slide-right">
</section>
</div>
</section>
</div>
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Background images dont stay on sides of page when resolution changes

I'm pretty new to css animations but I've got my page looking how I want except for this one glitch. I have a scrolling animation using scrollspy.js and when it hits a certain div images slideinleft or slideinright into the page.
Link here
However when you hit control + mwheel down it doesn't start the anims from outside of the browser window like i would prefer it to. I'm using 1920x1080 res, for reference.
Basically, on page load it looks fine:
But again, when employing the ctrl + mwheel down it becomes this ugly looking page:
I need it to scale.
Any css gurus know what I'm doing wrong?
HTML:
<div class="flex-row panel-row-style panel-row-style-for-4-1 page left-phone has-bg feed active" style="margin-top: 100px; animation-name: slideInLeft;">
<div id="pgc-4-1-0" class="panel-grid-cell panel-grid-cell-empty"></div><div id="pgc-4-1-1" class="panel-grid-cell">
<div id="panel-4-1-1-0" class="so-panel widget widget_sow-image panel-first-child panel-last-child" data-index="2">
<div class="top-img panel-widget-style panel-widget-style-for-4-1-1-0">
<div class="so-widget-sow-image so-widget-sow-image-default-eef982a7180b">
<div class="sow-image-container phone">
<img src="http://streamlistapp.com/wp-content/uploads/2017/06/phone-blank2.png" width="400" height="831" srcset="http://streamlistapp.com/wp-content/uploads/2017/06/phone-blank2.png 400w, http://streamlistapp.com/wp-content/uploads/2017/06/phone-blank2-144x300.png 144w" sizes="(max-width: 400px) 100vw, 400px" class="so-widget-image">
<img class="screen-left layer" src="http://streamlistapp.com/wp-content/uploads/2017/07/purse-inside-screen.png">
</div>
</div>
</div>
</div>
</div><div id="pgc-4-1-2" class="panel-grid-cell panel-grid-cell-mobile-last animated" style="visibility: visible; animation-name: undefined;">
<div id="panel-4-1-2-0" class="so-panel widget widget_siteorigin-panels-builder panel-first-child panel-last-child" data-index="3">
<div id="pl-w5973cd6d9c123" class="panel-layout">
<div id="pg-w5973cd6d9c123-0" class="panel-grid panel-no-style">
<div id="pgc-w5973cd6d9c123-0-0" class="panel-grid-cell">
<div id="panel-w5973cd6d9c123-0-0-0" class="so-panel widget widget_sow-editor panel-first-child panel-last-child" data-index="0">
<div class="link-s front panel-widget-style panel-widget-style-for-w5973cd6d9c123-0-0-0">
<div class="so-widget-sow-editor so-widget-sow-editor-base">
<div class="siteorigin-widget-tinymce textwidget">
<h4>
STREAMING<br>
MARKETPLACE
</h4>
<h3>Streamlist</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><div id="pgc-4-1-3" class="panel-grid-cell panel-grid-cell-empty"></div>
CSS:
.can-transform3d .active.has-bg:before,
.can-transform3d .active.has-bg:after,
.can-transform3d .past-active.has-bg:before,
.can-transform3d .past-active.has-bg:after {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
/*transform: translate3d(328px, 0, 0);*/
transform: translate3d(0px, 0, 0);
}
.has-bg {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.has-bg:before,
.has-bg:after {
content: '';
position:absolute;
display: block;
opacity: 0;
-webkit-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
-moz-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
-o-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
-ms-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
transition: all 750ms cubic-bezier(0,0.5,0.25,1);
-webkit-transition-delay: .25s; /* Safari */
transition-delay: .25s;
z-index: 1;
visibility: visible;
background-repeat: no-repeat;
background-attachment: scroll;
clear: both;
/*width: 100%;*/
}
.past-active:before,
.past-active:after,
.active:before,
.active:after {
opacity: 1 !important;
}
.page {
height: auto;
width: 100%;
position: relative;
text-align: center;
/*padding-top: 60px;*/
z-index: 1;
}
.can-transform3d .left-phone:before,
.can-transform3d .left-phone:before,
.can-transform3d .left-phone:after,
.can-transform3d .left-phone:after {
-webkit-transform: translate3d(150px , 0, 0);
-moz-transform: translate3d(150px , 0, 0);
-o-transform: translate3d(150px , 0, 0);
-ms-transform: translate3d(150px , 0, 0);
/*transform: translate3d(682px , 0, 0);*/
transform: translate3d(150px , 0, 0);
}
.left-phone:before,
.left-phone:after {
margin-left: 0;
/*right: 0;*/
}
.active .phone .screen-left, .active .phone .screen-right,
.past-active .phone .screen-left, .past-active .phone .screen-right {
opacity: 1;
}
.phone .screen-left, .phone .screen-right {
opacity: 0;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;
}
.phone .screen-left {
position: absolute;
top: 12.06656%;
left: 22.37791%;
/*width: 75.460123%;*/
}
.layer {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.feed:before, .discover:before {
background-image: url(http://streamlistapp.com/wp-content/uploads/2017/07/watch3-transparent-bg-e1500713498530.png);
/*top: -150px;*/
height: 564px;
width: 330px;
/*right: -425px;*/
right: -425px;
/*background-position: right center;*/
}
.feed:after, .discover:after {
background-image: url(http://streamlistapp.com/wp-content/uploads/2017/07/bracelet-e1500713698821.jpeg);
height: 260px;
width: 260px;
bottom: 0;
/*right: 15%;*/
right: -6%;
/*background-position: 70% center;*/
}
Scroll spy functions:
//First phone (left)
$('#pgc-4-1-2').on('scrollSpy:exit',function(){
$('.panel-row-style-for-4-1').removeClass('past-active').removeClass('active');
wow.addBox(this);
}).scrollSpy();
$('#pgc-4-1-2').on('scrollSpy:enter',function(){
$(this).removeClass('animated');
$('.panel-row-style-for-4-1')
.removeClass('past-active')
.addClass('active')
.removeClass('animated')
.css({
'animation-name' : 'slideInLeft'
})
wow.addBox(this);
}).scrollSpy();

Jquery animated div margins appear to change depending on window resize

Problem: I have an animated div which is essentially a 2D rendering of a cube, with each face being a new page. However, whenever the page is resized (say on a mobile device or tablet or giant desktop) the left and right sides of the square change position in relation to the edges of the window, and are different with every turn of the "cube". Follow the link below, resize your screen to be smaller and try clicking on the menu items to see what I mean. The top and bottom remain constant, but the left and right are constantly moving off of true center.
Question: How do I get the "cube" face to remain centered no matter which menu item is clicked? Thank you for your help, time and patience!
website: http://studiopowell.net/tp.html
relevant code below:
<style>
.face {
position: absolute;
height: 100%;
width: 97%;
padding: 20px;
margin: 0 auto;
background-color:rgba(20,20,20,.5);
border: solid 1px #ccc;
pointer-events: none;
}
#cube {
position: relative;
margin: 0 auto;
height: 70%;
width: 80%;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 2s ease;
transform-style: preserve-3d;
transition: all 2s ease;
pointer-events: none;
}
#cube .one {
-webkit-transform: rotateX(90deg) translateZ(200px);
transform: rotateX(90deg) translateZ(200px);
}
#cube .two {
-webkit-transform: translateZ(200px);
transform: translateZ(200px);
}
#cube .three {
-webkit-transform: rotateY(90deg) translateZ(200px);
transform: rotateY(90deg) translateZ(200px);
}
#cube .four {
-webkit-transform: rotateY(180deg) translateZ(200px);
transform: rotateY(180deg) translateZ(200px);
}
#cube .five {
-webkit-transform: rotateY(-90deg) translateZ(200px);
transform: rotateY(-90deg) translateZ(200px);
}
#cube .six {
-webkit-transform: rotateX(-90deg) translateZ(200px) rotate(180deg);
transform: rotateX(-90deg) translateZ(200px) rotate(180deg);
}
canvas {
position: absolute;
top: 0;
left: 0;
max-height: 100%;
max-width:100%;
min-height: 100%;
min-width:100%;
}
</style>
<canvas id="c"></canvas>
<div class="menu"><div id="aboutlink">About</div> <div id="futurelink">Future</div> <div id="pastlink">Past</div> <div id="contactlink">Contact</div></div>
<div class="text">TRANSVERSAL</br>PROJECT</div>
<div id="cube">
<div class="face one"></div>
<div class="face two"></div>
<div class="face three"></div>
<div class="face four"></div>
<div class="face five"></div>
<div class="face six"></div>
</div>
<script src="http//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<script src="http://dat-gui.googlecode.com/git/build/dat.gui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#aboutlink").click(function(){
calcRotation(0);
});
$("#futurelink").click(function(){
calcRotation(90);
});
$("#pastlink").click(function(){
calcRotation(180);
});
$("#contactlink").click(function(){
calcRotation(270);
});
function calcRotation(rot){
$("#cube").css("transform", "rotateY(-" + rot + "deg)");
}
});
</script>

I desperately need somebody to help me make my CSS slider autoplay

I have this css only slider and I need to make it autoplay.
I'm not too familiar with coding javascript so this is a rather challenging problem for me.
I'm aware that the Javascript will/may have to be written for this code, but I figure that someone out there can could help clarify this for me?
<div class="sliderContainer 6u">
<ul class="slides">
<input type="radio" name="radio-btn" id="img-1" checked />
<li class="slide-container">
<div class="slide">
<img src="images/1.jpg" />
</div>
<div class="nav">
<label for="img-6" class="prev">‹</label>
<label for="img-2" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-2" />
<li class="slide-container">
<div class="slide">
<img src="images/2" />
</div>
<div class="nav">
<label for="img-1" class="prev">‹</label>
<label for="img-3" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-3" />
<li class="slide-container">
<div class="slide">
<img src="images/3.jpg" />
</div>
<div class="nav">
<label for="img-2" class="prev">‹</label>
<label for="img-4" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-4" />
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg" />
</div>
<div class="nav">
<label for="img-3" class="prev">‹</label>
<label for="img-5" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-5" />
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg" />
</div>
<div class="nav">
<label for="img-4" class="prev">‹</label>
<label for="img-6" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-6" />
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" />
</div>
<div class="nav">
<label for="img-5" class="prev">‹</label>
<label for="img-1" class="next">›</label>
</div>
</li>
<li class="nav-dots">
<label for="img-1" class="nav-dot" id="img-dot-1"></label>
<label for="img-2" class="nav-dot" id="img-dot-2"></label>
<label for="img-3" class="nav-dot" id="img-dot-3"></label>
<label for="img-4" class="nav-dot" id="img-dot-4"></label>
<label for="img-5" class="nav-dot" id="img-dot-5"></label>
<label for="img-6" class="nav-dot" id="img-dot-6"></label>
</li>
</ul>
Any help you can give me will be extremely helpful,
thanks

Since you have no markup to offer, I've created this:
Example snippet (pure css):
body {
background: #eee;
font-family: arial, helvetica, sans-serif;
margin: 50px auto;
padding: 0;
}
h1 {
font-family: 'Proxima Nova', 'Helvetica Neue', sans-serif;
font-size: 36px;
text-align: center;
}
h3 {
font-family: 'Proxima Nova', 'Helvetica Neue', sans-serif;
font-size: 22px;
font-style: italic;
color: #4e4e4e;
text-align: center;
margin-bottom: -100px;
}
#wrapper {
width: 400px !important;
margin: 0 auto;
overflow: hidden;
}
#wrapper {
perspective: 2500;
-webkit-perspective: 2500;
width: 800px;
margin: 200px auto 0 auto;
perspective-origin: 50% 150px;
-webkit-perspective-origin: 50% 150px;
transition: perspective, 1s;
-o-transition: -o-perspective, 1s;
-moz-transition: -moz-perspective, 1s;
-webkit-transition: -webkit-perspective, 1s;
}
#image:hover {
animation-play-state: paused;
-o-animation-play-state: paused;
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
}
#-webkit-keyframes spin {
from {
transform: rotateY(0);
-o-transform: rotateY(0);
-ms-transform: rotateY(0);
-moz-transform: rotateY(0);
-webkit-transform: rotateY(0);
}
to {
transform: rotateY(-360deg);
-o-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
-moz-transform: rotateY(-360deg);
-webkit-transform: rotateY(-360deg);
}
}
#image {
margin: 0 auto;
height: 300px;
width: 400px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
animation: spin 24s infinite linear;
-moz-animation: spin 24s infinite linear;
-o-animation: spin 24s infinite linear;
-webkit-animation: spin 24s infinite linear;
}
.image {
position: absolute;
height: 300px;
width: 400px;
border-radius: 25px;
background-color: rgba(0, 0, 0, 0.6);
text-align: center;
font-size: 20em;
color: #fff;
}
#image > .i1 {
transform: translateZ(485px);
-moz-transform: translateZ(485px);
-o-transform: translateZ(485px);
-ms-transform: translateZ(485px);
-webkit-transform: translateZ(485px);
}
#image > .i2 {
transform: rotateY(45deg) translateZ(485px);
-moz-transform: rotateY(45deg) translateZ(485px);
-o-transform: rotateY(45deg) translateZ(485px);
-ms-transform: rotateY(45deg) translateZ(485px);
-webkit-transform: rotateY(45deg) translateZ(485px);
}
#image > .i3 {
transform: rotateY(90deg) translateZ(485px);
-moz-transform: rotateY(90deg) translateZ(485px);
-o-transform: rotateY(90deg) translateZ(485px);
-ms-transform: rotateY(90deg) translateZ(485px);
-webkit-transform: rotateY(90deg) translateZ(485px);
}
#image > .i4 {
transform: rotateY(135deg) translateZ(485px);
-moz-transform: rotateY(135deg) translateZ(485px);
-o-transform: rotateY(135deg) translateZ(485px);
-ms-transform: rotateY(135deg) translateZ(485px);
-webkit-transform: rotateY(135deg) translateZ(485px);
}
#image > .i5 {
transform: rotateY(180deg) translateZ(485px);
-moz-transform: rotateY(180deg) translateZ(485px);
-o-transform: rotateY(180deg) translateZ(485px);
-ms-transform: rotateY(180deg) translateZ(485px);
-webkit-transform: rotateY(180deg) translateZ(485px);
}
#image > .i6 {
transform: rotateY(225deg) translateZ(485px);
-moz-transform: rotateY(225deg) translateZ(485px);
-o-transform: rotateY(225deg) translateZ(485px);
-ms-transform: rotateY(225deg) translateZ(485px);
-webkit-transform: rotateY(225deg) translateZ(485px);
}
#image > .i7 {
transform: rotateY(270deg) translateZ(485px);
-moz-transform: rotateY(270deg) translateZ(485px);
-o-transform: rotateY(270deg) translateZ(485px);
-ms-transform: rotateY(270deg) translateZ(485px);
-webkit-transform: rotateY(270deg) translateZ(485px);
}
#image > .i8 {
transform: rotateY(315deg) translateZ(485px);
-moz-transform: rotateY(315deg) translateZ(485px);
-o-transform: rotateY(315deg) translateZ(485px);
-ms-transform: rotateY(315deg) translateZ(485px);
-webkit-transform: rotateY(315deg) translateZ(485px);
}
img {
border-radius: 25px;
<body>
<h3>(hover over to pause)</h3>
<div id="wrapper">
<div id="image">
<div class="image i1">
<img src="https://dl.dropbox.com/u/80409395/Codepen/Noe-in-leaves.jpg">
</div>
<div class="image i2">
<img src="https://dl.dropbox.com/u/80409395/Codepen/Nat-sitting.jpg">
</div>
<div class="image i3">
<img src="https://dl.dropbox.com/u/80409395/Codepen/Nat-noodles.jpg">
</div>
<div class="image i4">
<img src="https://dl.dropbox.com/u/80409395/Codepen/Charlie-smiling.jpg">
</div>
<div class="image i5">
<img src="https://dl.dropbox.com/u/80409395/Codepen/Girls-in-leaves.jpg">
</div>
<div class="image i6">
<img src="https://dl.dropbox.com/u/80409395/Codepen/Natalie-smiling.jpg">
</div>
<div class="image i7">
<img src="https://dl.dropbox.com/u/80409395/Codepen/Charlie-sleeping.jpg">
</div>
<div class="image i8">
<img src="https://dl.dropbox.com/u/80409395/Codepen/Sledding.jpg">
</div>
</div>
</div>
</body>
I would like to draw attention to this hover state:
#image:hover {
animation-play-state: paused;
-o-animation-play-state: paused;
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
}
since it is what is actually 'pausing' the animation.

I think you should study about setTimeout and SetInterval of Javascript.
Hope this helps.