I am trying to make a beautiful parallax cap of 6 png images.
But the page freezes terribly for 10 seconds and only then starts to work normally.
If you go to another tab and go back, then again the whole tab freezes for 5 seconds.
Why can this happen?
Friezes are observed on two different PCs with good power. Even if the music from the browser works and open a contribution with this parallax, the music slows down 2 times and starts to lag: D
body {
background-color: #271c33;
}
.art-block {
position: relative;
z-index: 10;
display: block;
}
.art-block, .art_layer {
height: 1000px;
}
.art_layer {
background-position: bottom center;
background-size: auto 1038px;
background-repeat: repeat-x;
width: 100%;
position: absolute;
}
.art_layer.parallax {
position: fixed;
}
#art-back {
background-image: url(../img/background-min.jpg);
}
#art-1 {
background-image: url(../img/1-min.png);
}
#art-2 {
background-image: url(../img/2-min.png);
}
#art-3 {
background-image: url(../img/3-min.png);
}
#art-4 {
background-image: url(../img/4-min.png);
}
#art-5 {
background-image: url(../img/5-min.png);
}
#art-6 {
background-image: url(../img/6-min.png);
}
.main {
background-color: #271c33;
position: relative;
z-index: 100;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="css/util.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<link rel="stylesheet" href="css/style.css?1582535292">
</head>
<body>
<div class="art-block">
<div class="art_layer parallax" id="art-back" data-speed="2"></div>
<div class="art_layer parallax" id="art-6" data-speed="7"></div>
<div class="art_layer parallax" id="art-5" data-speed="22"></div>
<div class="art_layer parallax" id="art-4" data-speed="33"></div>
<div class="art_layer parallax" id="art-3" data-speed="46"></div>
<div class="art_layer parallax" id="art-2" data-speed="58"></div>
<div class="art_layer" id="art-1" data-speed="55"></div>
</div>
<div class="main" style="height: 2500px;">
ss
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).scroll(function(){
var windowScroll = $(window).scrollTop();
$('.art_layer.parallax').each(function(){
var $layer = $(this);
var yPos = -(windowScroll * $layer.data('speed') / 100);
$layer.css({
"transform" : "translate3d(0px, " + yPos + "px, 0px)"
});
});
});
</script>
</body>
</html>
May be image sizes? 7000x3500 pixels
Related
When my site is loading up the image always appears straight away (even when it's still loading) however I want it to appear at the exact same times as the text does to make it look like it loading up at the same time. This is the code I have used to make what I see
Javascript
$(window).on("load",function(){
$(".loader-wrapper").fadeOut("slow");
});
$.fn.srcLazy = function (src, callback) {
let elem = $(this);
let img = new Image();
img.addEventListener('load', function () {
elem.on('load', function () {
if (callback) callback();
});
elem.attr('src', img.src);
});
img.src = src;
}
$('#my-image-in-the-page').srcLazy("./images/ohridimage1.jpg", function () {
// Show text here!
});
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("myDiv").style.display = "flex";
}
CSS (LOADING PAGE)
body {
margin: 0;
padding: 0;
width:100vw;
height: 100vh;
background-color: #eee;
}
.content {
display: flex;
justify-content: center;
align-items: center;
width:100%;
height:100%;
}
.loader-wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #242f3f;
display:flex;
justify-content: center;
align-items: center;
}
.loader {
display: inline-block;
width: 30px;
height: 30px;
position: relative;
border: 4px solid #Fff;
animation: loader 2s infinite ease;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #fff;
animation: loader-inner 2s infinite ease-in;
}
#keyframes loader {
0% { transform: rotate(0deg);}
25% { transform: rotate(180deg);}
50% { transform: rotate(180deg);}
75% { transform: rotate(360deg);}
100% { transform: rotate(360deg);}
}
#keyframes loader-inner {
0% { height: 0%;}
25% { height: 0%;}
50% { height: 100%;}
75% { height: 100%;}
100% { height: 0%;}
CSS
#myDiv {
margin: 0 50px 0 50px;
display: none;
text-align: center;
justify-content: space-between;
align-items: center;
}
.image1 {
position: flex;
right: 0px;
top: 0px;
z-index: -1;
filter: grayscale(100%);
style: float
border: 3px solid #73AD21;
width: 300px;
HTML
<!DOCTYPE HTML>
<HTML lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/CSS" href="dropdownmenu.css">
<link rel="stylesheet" type="text/CSS" href="rainbowheading.css">
<link rel="stylesheet" type="text/CSS" href="loadingcss.css">
<link rel="stylesheet" type="text/CSS" href="image.css">
<script src="loading.js"></script>
<title> North Macedonia </title>
<script src="js/jquery.js"></script>
<div class="container">
<h1 class="rainbow"> The pearl of the Balkans: Macedonia </h1>
<div class="navbar">
Home
Macedonian Dispora
Cities
<div class="dropdown">
<button class="dropbtn">History
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Ancient History
Ottoman Period
Yugoslav Period
Modern History
</div>
</div>
</div>
</head>
<script src="loading.js"></script>
<link rel="stylesheet" type="text/css" href="loadingcss.css" />
</head>
<body>
<div class="loader-wrapper">
<span class="loader"><span class="loader-inner"></span></span>
</div>
<div style="display:none;" id="myDiv" class="animate-bottom"></div>
<div>
<h2>Welcome to my website about my country Macedonia (Makedonija)</h2>
<p>Macedonia officially the Republic of North Macedonia, is a country in the Balkan Peninsula in Southeast Europe. It gained its independence in 1991 as one of the successor states of Yugoslavia. A landlocked country, North Macedonia has borders with Kosovo to the northwest, Serbia to the northeast, Bulgaria to the east, Greece to the south, and Albania to the west. It constitutes approximately the northern third of the larger geographical region of Macedonia. The capital and largest city, Skopje, is home to roughly a quarter of the country's 2.06 million inhabitants. <br>
The majority of the residents are ethnic Macedonians, a South Slavic people. Albanians form a significant minority at around 25%, followed by Turks, Romani, Serbs, Bosniaks, and Aromanians.</p>
</div>
<img class="image1" src="./images/ohridimage1.jpg" alt="Smiley face">
</div>
In order to load an image in the background and show it when finished with another elements like text you need to load the image in the Image Object like this:
var img = new Image();
img.addEventListener('load', function () {
// Here you can set the url that was loaded in the background here
// to an actual `<img>` element. Browser uses cache now to load the image quickly.
});
img.src = 'image url here';
As soon as you set the src the image will get loaded but nobody can see it. This will force the browser to load image in the background and cache it. So now when you set that exact src to the img element the browser will use cache to show the image so the image will be loaded quickly with whatever you want to show.
UPDATE --------
You can do it in a better way in jquery:
Let's say you have bunch of images. Then instead of setting their src set their data-src attribute and then use this functionality to do something when all images loaded:
This is the HTML:
<img class="my-images" data-src="<image url 1>" />
<img class="my-images" data-src="<image url 2>" />
<img class="my-images" data-src="<image url 3>" />
<img class="my-images" data-src="<image url 4>" />
This is the JS:
$.fn.whenImagesLoaded = function (callback) {
let found = $(this);
let counter = found.length;
found.each(function (i, item) {
let elem = $(item);
let img = new Image();
img.addEventListener('load', function () {
elem.on('load', function () {
counter--;
if (counter === 0 && callback) callback();
});
elem.attr('src', img.src);
});
img.src = elem.attr('data-src');
});
}
So now you should not set src on the image at first but you have to do this:
$('.my-images').whenImagesLoaded(function () {
// Hide loading text here and show images!
});
JSFiddle
I'm using jQuery to get user's current height, and after he reaches that height, there will be animation function (Such as reactive websites, when user scroll down he has animation in different part of the page).
Yet, I can't really figure out why exactly the following code doesn't work.
$(window).scroll(function() {
var height = $(window).scrollTop();
if(height > 200) {
$("#project").animate({
bottom: '250px',
opacity: '0.5',
height: '1000px',
width: '100%'
});
}
});
CSS:
/* About Page */
.about{
width: 100%;
height: 1000px;
background-color: blue;
}
/* Projects Page */
.project{
background-color: red;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="jquery-3.4.1.min.js"></script>
<script src="myscripts.js"></script>
<title>My Portfolio</title>
</head>
<body>
<div id="about" class="about">
</div>
<div id="project" class="project">
</div>
</body>
</html>
How can I use scrolling height indicator to activate functions such as animation?
You need to take into account the height of each section and calculate the scrollBottom position instead, which might be more useful if you want to trigger an animation once you reach some element:
const $about = $('#about');
const $projects = $('#projects');
const $services = $('#services');
// Calculate the top offset of each section (number of sections above it * 1000px each).
// We want to expand them when we are 50px above them, so we substract that.
let projectTop = 1000 - 50;
let servicesTop = 2000 - 50;
$(window).scroll(() => {
requestAnimationFrame(() => {
// Calculate the scrollBottom by summing the viewport's height:
const scrollBottom = $(window).scrollTop() + $(window).height();
if (scrollBottom >= projectTop) {
$projects.animate({ height: '1000px' });
}
if (scrollBottom >= servicesTop) {
$services.animate({ height: '1000px' });
}
});
});
body {
margin: 0;
}
.about {
background: red;
width: 100%;
height: 1000px;
}
.projects {
background: green;
width: 100%;
}
.services {
background: blue;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="about" class="about"></div>
<div id="projects" class="projects"></div>
<div id="services" class="services"></div>
I have a homework task in which I need to test the best method using JavaScript with Jquery of preventing scrolling of a browser page. Ideally, the method should work in all the main browsers like Google, Mozilla, Opera, IE, Safari on both types of devices: PCs and mobile phones.
This a research for cross-browser functionality, so I'm looking for advises from professionals.
<head>
<meta charset="utf-8">
<title>Новостное агентство</title>
<link rel="stylesheet" type="text/css" href="styles/styles.css">
<link rel="stylesheet" type="text/css" href="styles/normalize.css">
<link rel="stylesheet" type="text/css" href="styles/header.css">
<link rel="stylesheet" type="text/css" href="styles/footer.css">
<link rel="stylesheet" type="text/css" href="styles/main.css">
<link rel="stylesheet" type="text/css" href="styles/aside.css">
<script src="jquery-3.4.1.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="popup-container">
<div class="popup">
Popup window
</div>
</div>
<header> Continues the HTML layout
.popup-container {
display: none;
position: fixed;
background: url(../img/bg.png);
width: 100%;
height: 100%;
z-index: 10;
}
.popup {
background-color: white;
font-size: 0;
width: 0;
height: 0;
padding: 20px;
margin: 40px auto;
}
$(function() {
function disableScroll() {
$('html, body').on('mousewheel', function() {
return false;
});
}
function enableScroll() {
$('html, body').off('mousewheel');
}
$('.all-news').click(function() {
$('.popup-container').fadeIn(400, disableScroll);
$('.popup').animate({
width: '200px',
height: '300px',
'font-size': '16px'
}, 400);
});
$('.popup-container').click(function(event) {
if(event.target == this) {
$(this).fadeOut(400, enableScroll);
$('.popup').animate({
width: 0,
height: 0,
'font-size': 0
}, 400);
}
});
});
currently working on a simple script that displays a nightime background if it's a certain time in the day and a daytime image if it's a different time of day. I am using jQuery to achieve this by adding a class if one is true, and adding a class if the other is true. Issue is... the code simply won't function properly. Curious about any possible solutions... thanks!
$(document).ready(function() {
var currentTime = new Date().getHours();
if (7 <= currentTime && currentTime < 20) {
$("document.body").addClass("day");
$("document.body").removeClass("night");
} else {
$("document.body").addClass("night");
$("document.body").removeClass("day");
}
});
.night {
background-image: url('images/night.jpg');
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
}
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
</script>
</head>
<body>
<div class="app-wrapper">
<p id="date"></p>
</div>
</body>
Change:-
$("document.body").addClass("day");
$("document.body").removeClass("night");
to:-
$("body").addClass("day").removeClass("night");
(same for second-one too)
Working demo example:-
$(document).ready(function() {
var currentTime = new Date().getHours();
if (7 <= currentTime && currentTime < 20) {
$("body").addClass("day").removeClass("night");
} else {
$("body").addClass("night").removeClass("day");
}
});
.night {
background-color: black;
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
}
.day {
background-color: grey;
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>APP</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-
hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="app-wrapper">
<p id="date"></p>
</div>
</body>
</html>
You need to replace $("document.body") with $("body")
trying to make a simple masonry style grid with Jquery but keep running into an issue with weird margins appearing and i can't figure out why. Had a few attempts with similar results. Here's the latest
js
$(document).ready(function () {
var $boxes = $('.box');
var rowPos = 0;
var counter = 0;
$boxes.each(function (ind) {
var boxWidth = $(this).width();
var upperBoxHeight = 0;
var upperBoxPosition = 0;
var top = 0;
rowPos = counter * boxWidth;
counter++;
if(counter >= 3){
counter = 0;
}
if(ind >= 3){
upperBoxHeight = $boxes.eq(ind - 3).height();
upperBoxPosition = $boxes.eq(ind -3).position().top;
top = upperBoxHeight + upperBoxPosition; }
$(this).css({
left: rowPos,
top : top
});
});
});
css
.container{
width: 85%;
margin: auto;
position: relative;
}
.box{
width: 33.3333%;
position: absolute;
}
.box1, .box5{
background: #2baf63;
height: 500px;
}
.box2, .box6{
background: #623ec5;
height: 650px;
}
.box3, .box7{
background: #3e81c5;
height: 300px;
}
.box4, .box8{
background: #9fba43;
height: 400px;
}
markup
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery-3.1.0.min.js"></script>
</head>
<body>
<div class="container">
<div class="box box1"><span>box 1</span></div>
<div class="box box2"><span>box 2</span></div>
<div class="box box3"><span>box 3</span></div>
<div class="box box4"><span>box 4</span></div>
<div class="box box5"><span>box 5</span></div>
<div class="box box6"><span>box 6</span></div>
<div class="box box7"><span>box 7</span></div>
<div class="box box8"><span>box 8</span></div>
</div>
<script src="js/functions.js"></script>
</body>
</html>
strange thing is, if i open the inspector and refresh the page, all boxes lock into their intended position. if i close the inspector and refresh again, problem comes back.
then with inspector open