I have the following JavaScript companied with basic CSS to create a parallax background image, live preview of what I already have in a demonstration here: http://loai.directory
Here is the Javascript:
//Parallax background image
var velocity = 0.5;
function update() {
if ($(window).width() <= 1024) {
return;
}
var pos = $(window).scrollTop();
$('.parallax').each(function () {
var $element = $(this);
var height = $element.height();
$(this).css('background-position', '50%' + Math.round((height - pos) * velocity) + 'px');
});
};
$(window).on('scroll', update);
update();
CSS:
/*Backgruond Parallax*/
.parallax {
background-attachment: fixed;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#gallery .parallax {
background-image: url('../images/image.jpg');
padding: 100px 0;
}
#gallery .parallax.A {
background-image: url('../images/backgruond.jpg');
padding: 100px 0;
}
And finally the HTML:
<div class="topSection parallax">
<div class="content"></div>
</div>
The problem I am having is with the background images being cropped from the bottom, and the far you scroll down, the worse they get! I believe this is because the parallax function move the background image position to the top as you scroll... but how can I fix this? Please help.
The blue sections suppose to be filled with the background image.
Related
I have below code that is a function for changing background-image every 10th second:
$(function() {
var body = $(".home");
var backgrounds = [
"url(img/Agure.jpg)",
"url(img/Arsenal1.jpg)",
"url(img/ManUtd.jpg)",
"url(img/stadion.jpg)",
];
var current = 0;
function nextBackground() {
body.css(
"background",
backgrounds[current = ++current % backgrounds.length]);
setTimeout(nextBackground, 10000);
}
setTimeout(nextBackground, 10000);
body.css("background", backgrounds[0]);
The code works but I want the images always to cover the full page. Some images are to small to cover the full page so they just stack up next to each other. Any suggestions how I can change the code?
HTML and CSS:
<section class="home">
<div class="centered">
<div class="h-100 row align-items-center">
</div>
</div>
</section>
.home {
width: 100%;
height: 100vh;
background-position: center top;
background-size: cover;
}
The issue here is a combination of two things:
You aren't using background-repeat: no-repeat which means the images will tile to cover the background (This is only visible when the image is smaller than the container, which can be confusing)
And you're setting background in JS, rather than background-image which would overwrite your extra CSS properties.
Here's a modified version:
$(function() {
var body = $(".home");
var backgrounds = [
"url(https://picsum.photos/200/300)",
"url(https://picsum.photos/100/300)",
"url(https://picsum.photos/300/300)",
"url(https://picsum.photos/250/300)",
];
var current = 0;
function nextBackground() {
body.css(
"background-image",
backgrounds[current = ++current % backgrounds.length]
);
setTimeout(nextBackground, 10000);
}
setTimeout(nextBackground, 10000);
body.css("background-image", backgrounds[0]);
})
.home {
width: 100%;
height: 100vh;
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="home">
<div class="centered">
<div class="h-100 row align-items-center">
</div>
</div>
</section>
When the image is small the browser automatically adds multiple image (stacked in your case)
Try adding the following in your css to avoid it
background-repeat: no-repeat;
Also instead of writing
body.css("background", backgrounds[0]);
write
body.css("background-image", backgrounds[0]);
I have this common pattern of parallax scrolling with plain javascript that uses custom data attributes and scrolls the background image in the oposite direction.
HTML:
<header id="home" class="section" data-type="background" data-speed="3"></header>
<section id="portfolio" class="section"></section>
<section id="about" class="section"></section>
<section id="contact" class="section"></section>
CSS:
#home {
background-color: grey;
height: 100%;
width: 100%;
background-image: linear-gradient(to bottom, rgba(#000, 0.5), rgba(#000, 0.5)), url("../bg.jpg");
background-attachment: fixed;
background-repeat: repeat;
background-position: 50%;
background-size: cover;
position: relative;
}
JAVASCRIPT:
{
function parallax() {
Array.from(document.querySelectorAll('*[data-type="background"]')).forEach(e => {
let yPos = -(window.pageYOffset / e.dataset.speed);
var coords = `50% ${yPos}px`;
e.style.backgroundPosition = coords;
});
}
document.addEventListener('scroll', function () {
parallax();
});
}
The issue is that this code calculates the Ypos variable and assigns it to the background position-y property. Actually it overrides the css which is set to 50% before you start scrolling. As a result the image goes from the center to the bottom once you start scrolling. I have included a codepen to see the problem.
https://codepen.io/anon/pen/pLvjqR
Is there any way to add the yPos variable to the initialized background position 50% 50%, which means make it 50% 50%+ypos instead of 50% ypos.
Thanks.
I changed the speed of 3 -> .02 and javascript, you have to start at 50% and reduce this percentage rather than applying values in pixels.
// let yPos = -(window.pageYOffset / e.dataset.speed);
let yPos = (e.getBoundingClientRect().top - window.pageYOffset) * e.dataset.speed + 50;
// var coords = `50% ${yPos}px`;
var coords = `50% ${yPos}%`;
You can view changes here :
https://codepen.io/anon/pen/mxyVBV
I am a beginner at Javascript and Jquery. I am trying to achieve an effect where background image changes on scrolling text. The code works fine for top to bottom scroll but one image is not changing on bottom to top scroll. Here is my code,
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(window).scroll(function(){
var fromTopPx = 200; // distance to trigger
var scrolledFromtop = $(window).scrollTop();
if(scrolledFromtop > fromTopPx && scrolledFromtop < 600) // distance to trigger second background image
{
$('html').addClass('scrolled');
}
else if(scrolledFromtop > 600 && scrolledFromtop < 1000) // distance to trigger third background image
{
$('html').addClass('scrolledtwo');
}
else{
$('html').removeClass('scrolled');
$('html').removeClass('scrolledtwo')
}
});
</script>
<style>
html {
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
html {
background-image:url(assets/images/b1.jpeg);
}
html.scrolled {
background-image:url(assets/images/ab3.jpeg);
}
html.scrolledtwo {
background-image:url(assets/images/ab9.jpeg);
}
</style>
</head>
What am I missing?
You must try it like this, the classes which were added during scroll could also needs to be removed at certain conditions as below,
$(window).scroll(function() {
var fromTopPx = 200; // distance to trigger
var scrolledFromtop = $(window).scrollTop();
if (scrolledFromtop > fromTopPx && scrolledFromtop <= 600) // distance to trigger second background image
{
$('html').addClass('scrolled');
$('html').removeClass('scrolledtwo');
} else if (scrolledFromtop >= 601 && scrolledFromtop < 1000) // distance to trigger third background image
{
$('html').addClass('scrolledtwo');
$('html').removeClass('scrolled');
} else {
$('html').removeClass('scrolled');
$('html').removeClass('scrolledtwo')
}
});
html {
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
height: 1200px;
}
html {
background-image: url("http://placehold.it/350x150/111/fff");
}
html.scrolled {
background-image: url("http://placehold.it/350x150/f11/fff");
}
html.scrolledtwo {
background-image: url("http://placehold.it/350x150/f2f/fff");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Remove .scrolledtwo class when scrollTop is between 200 to 600, same-way remove .scrolled when it between 601 to 1000 else if it crosses the condition remove both.
Only problem was :
You were not removing the older added class and were adding new class, at in the middle region i.e. > 600 you are having both the classes scrolled and scrolledTwo.
So one solution is :
Remove the older class before adding new class.
Use these lines at correct places :
a- $('html').removeClass('scrolled');
b- $('html').removeClass('scrolledTwo');
use this script :
$(window).scroll(function(){
var fromTopPx = 200; // distance to trigger
var scrolledFromtop = $(window).scrollTop();
if(scrolledFromtop > fromTopPx && scrolledFromtop < 600) // distance to trigger second background image
{
$('html').removeClass('scrolledtwo')
$('html').addClass('scrolled');
}
else if(scrolledFromtop > 600 && scrolledFromtop < 1000) // distance to trigger third background image
{
$('html').removeClass('scrolled');
$('html').addClass('scrolledtwo');
}
else{
***$('html').removeClass('scrolled');***
$('html').removeClass('scrolledtwo')
}
return false;
});
Your code is working fine.
Have a look.
Make a long page you will see the effect.
You have set the criteria to change the background image.
Good work.
I use progressive CSS to style my website background images. I have found a few tutorials on cycling through images with jQuery, but I have yet to see any that will do it through CSS. All of them are with HTML. How can I do this so that the Jquery or Javascript cycles through images without having to create a div to do so.
My CSS:
html {
background: url('../assets/homepage.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You sure can do it, but there won't be any transition when the image changes:
html, html.slide1 {
background: url('../assets/homepage1.jpg') no-repeat center center fixed;
/* add vendor prefixes */
background-size: cover;
}
html.slide2 {
background-image: url('../assets/homepage2.jpg');
}
html.slide3 {
background-image: url('../assets/homepage3.jpg');
}
$(function () {
var classList = ['slide1', 'slide2', 'slide3'],
$html = $('html'),
last = classList.length - 1,
current = 0;
setInterval(function () {
current = current == last ? 0 : current + 1;
$html.prop('class', classList[current]);
}, 1000);
});
Here's the fiddle: http://jsfiddle.net/rmR7V/
Try sliding the background image off-screen, changing it and sliding it back on.
<style>
html {
background: url('Image1.jpg') no-repeat center center fixed;
background-size: cover;
}
</style>
<script type="text/javascript">
$(document).ready( function() {
$('html').animate({
"background-position": -2048
},2000, function() {
$('html').css('background-image',"url('Image2.jpg')");
$('html').animate({
"background-position": 0
},2000);
});
});
</script>
I have a function that is adding a background-image to my div. But its not showing.
this is my function
var totalCount = 6;
function changeBackground()
{
var num = Math.ceil( Math.random() * totalCount );
backgroundUrl = '/background/test2/'+num+'.jpg';
$('#background').css('background-image, url(' +backgroundUrl+ ')');
}
changeBackground();
The image changes everytime that the the page gets refreshed. I know that part is working because if i change
$('#background').css('background-image, url(' +backgroundUrl+ ')');
to
document.body.parentNode.style.backgroundImage = 'url(background/test2/'+num+'.jpg)';
it shows me the image like i wanted. But on the html tag. I want it on the div, so i can fade it in with jQuery.
here is my CSS
#background {
width:100% !important;
height:100% !important;
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
i don't get any error's in the console and when i look up the css nothing is added in the css. How can i now what is wrong? So in the future i can for myself what the problem is.
Change
$('#background').css('background-image, url(' +backgroundUrl+ ')');
To
$('#background').css('background-image', 'url(' +backgroundUrl+ ')');