Floats causes lag - javascript

On my site I use a grid layout with floated div's. As a pagination transition I use a fade-out. However, I've noticed that, since I started using floating div's the animation lags quite a bit. My lightbox fade-in also lags on the pages with the floating divs. Any idea how I can stop this lag?
Here's a JSFiddle. Please bot that the lag on the animation is more noticeable when there's content in the floats, and on my lightbox which contains a youtube video (the video itself starts too lag)
Layout:
<div id=container>
<div id=float></div>
<div id=float></div>
<div id=float></div>
<div id=float></div>
<div id=float></div>
<div id=float></div>
<div id=float></div>
<div id=float></div>
<div id=float></div>
​</div>​​​​​​​​​​​​​

Related

How do I avoid unloading a video before redirecting to another page?

I am using a video as a background for a home page, and when it loads or unloads there is a small delay where the container has a green background. I have tried to avoid this by using a preloader, and that solves the issue when the page loads, but when it redirects it still has a second where the video unloads before leaving the page, and the background is solid green
The video container:
<div class="site-blocks-cover overlay" data-aos="fade" data-stellar-background-ratio="0.5">
<video autoplay muted loop id="myVideo">
<source src="./images/massage.mp4" type="video/mp4">
</video>
<div class="container">
<div class="row align-items-center justify-content-center text-center">
<div class="col-md-10">
<div class="row justify-content-center mb-4">
<div class="col-md-10 text-center">
<h1 data-aos="fade-up" class="mb-5">We give solutions to your <span class="typed-words"></span></h1>
<p data-aos="fade-up" data-aos-delay="100">Book Now</p>
</div>
</div>
</div>
</div>
</div>
</div>
Here is the link to the live site to demonstrate: https://acrabaca.yetitech.nz/index.html
Any help would be appreciated
If you delete the video element before navigating away it stops the green flash in Chrome. The following piece of JavaScript adds a click handler to the anchor tags so the video is deleted before the page navigates. There is still a grey flash but it is not as jarring as the green flash. As to why it happens I am unsure.
document.querySelectorAll('a').forEach(a => {
a.addEventListener('click', () => {
document.querySelectorAll('video').forEach(v => v.remove());
});
});

If specific div is in viewport fade in audio, if div is out of viewport fade out

I have a one page scrolling website, and what I would like to do is fade in and out ambient sounds per section. I have found a few libs that fade sound in and out on pixels but being that this site scales I cant get them to trigger properly.
Basically it would be for each section:
<div class="section_content" id="1"> /// this is the section that would need to trigger audio file 1
<div class="main_image">
</div>
<div class="main_content">
Text content and information here
</div>
</div>
<div class="section_content" id="2"> /// this is the section that would need to trigger audio file 2
<div class="main_image">
</div>
<div class="main_content">
Text content and information here
</div>
</div>
https://github.com/kamblack/AudioFade/blob/master/README.md
This was the library I tied but since its based off of pixels it wont quite work.

Internet Explorer JQuery animation BUG

Hello i got this problem i got JQuery function $(element).slideUp() that i use to show hidden content. I got it working perfectly on FireFox, Chrome etc. but Internet Explorer break it.
When i click on element that activate slideUp action container that hold the element which will be hidden, stretch to enormous height and stays that way for few seconds and then do proper animation to hide or get stuck on that height forever. I dont know what causes that problem and i couldnt find solution for that.
Here are the boxes that resize. slideDown animation works fine but on slideUp transactions_container get stuck on like 1000px height for no reason.
<div class="row rec-trans-box" style="display: table;">
<div class="conf-detail" style="display: none;" id="conf1">
</div>
<div class="col-md-4 no-padding auto-margin width-box" id="news_box">
</div>
<div class="col-md-8 rec-trans-mainbox" id="transactions_container" style="height: auto;">
<div class="rec-trans" style="height: 100%; display: block;">
</div>
</div>
Here is JQuery. Show functions
$('#news_box').hide();
$('#conf1').slideDown();
Hiding functions
$('#news_box').show();
$('#conf1').slideUp();

imageScroll.js parallax background-image

I just implemented imageScroll.js on my website and for the images in between my paragraphs it works fine. When entering the website I would like to have the first image with the parallax effect as well. The images are either loaded via the data-image html tag or via image option (JS).
When I set the image as "background", I think the image is fix and the parallax effect can't be applied. But when I load the image into a div, as I do it with the other two images in between my paragraphs, it shifts the menu as well as the welcome text below.
I tried to realize it with z-index, but couldn't make it run yet.
Does anyone of you have an idea for me how I could make this happen?
Thanks a lot in advance!
Eric
I didn't see the wood for the trees. Just had to put everything inside the div from the parallax:
<div class="img-holder" data-image="../images/other/home-min.jpg" data-image-mobile="../images/other/home-min.jpg">
<!-- Home Page -->
<div id="home" class="container-fluid">
<div class="row">
<nav class="navigation">
<div class="col-md-3"><a class="navigation" href="#about">About</a></div>
<div class="col-md-3"><a class="navigation" href="#portfolio">Portfolio</a></div>
<div class="col-md-3"><a class="navigation" href="#contact">Contact</a></div>
<div class="col-md-3"><a class="navigation" href="#blog"></a></div>
</nav>
</div>
<div id="welcome" class="row">Welcome</div> <!--Welcome Text-->
</div>
</div>
maybe someone else is also confused and perceive this as helpful.
Cheers
Eric

create a div containing sliding images

I have a div inside which I have placed images of many languages. The total size of the div goes above the page size in a browser. So I want the images to keep moving from bottom to top like animation slider. Image size is not what I am looking to change. I just want the images to keep moving from bottom to top. At the end of this website http://www.veepal.com/ there is a div that has images of different programming languages which keep sliding. I want similar functionality. Is it possible??
<div id="languagesRow" style="position: absolute;top:5px;">
<div id="l1"><img class="messagesOne" src="images/languages/English.png"></div>
<div id="l2"><img class="messagesOne" src="images/languages/French.png"></div>
<div id="l3"><img class="messagesOne" src="images/languages/Russian.png"></div>
<div id="l4"><img class="messagesOne" src="images/languages/Chinese.png"></div>
<div id="l5"><img class="messagesOne" src="images/languages/Korean.png"></div>
<div id="l6"><img class="messagesOne" src="images/languages/Hindi.png"></div>
</div>
I dont know what can be used more optimally to achieve this kind of animation so I am tagging jquery, javascript and css in this post.
Well you can use marquee for this:
http://jsfiddle.net/ZB2Fc/
<div class='flags'>
<MARQUEE BEHAVIOR='SCROLL' HEIGHT='25' WIDTH='300' BGColor='yellow' scrollamount="1" onmouseover="this.stop();" onmouseout="this.start();">
<div id="l1">English</div>
<div id="l2">French </div>
<div id="l3">Russian </div>
<div id="l4">Chinese </div>
</MARQUEE>
</div>
CSS Marquee is one option : http://jsfiddle.net/FbKW9/
<marquee behavior="scroll" direction="up" >//item</marquee>

Categories