I cannot change the width of an image that uses parallax scrolling code i copied from a tutorial. I know in the image example the div box and image don't line up perfectly either but for some reason with my wallpaper sized image which i didn't use because it was too big as an example lines up perfectly so don't worry about the div spacing issue.
Jsfiddle - https://jsfiddle.net/fouvdjm8/1/
HTML CODE
<html>
<!doctype html>
<head>
<title>Parallax Scrolling Tutorial</title>
<!-- CSS Code -->
<link rel="stylesheet" href="style.css">
<!-- JS Code -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<!-- Section #1 -->
<section id="home" data-speed="10" data-type="background">
<article></article>
</section>
<div id="box"></div>
</body>
</html>
CSS CODE
body{
margin:0;
padding:0;
}
#home {
background: url(http://webneel.com/wallpaper/sites/default/files/images/01-2014/23-animation-wallpaper.preview.jpg) 50% 0 no-repeat fixed;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
}
#box {
height: 1000px;
width: auto;
background-color: blue;
}
JS CODE
$(document).ready(function(){
// Cache the Window object
$window = $(window);
$('section[data-type="background"]').each(function(){
var $bgobj = $(this); // assigning the object
$(window).scroll(function() {
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
// Put together our final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$bgobj.css({ backgroundPosition: coords });
}); // window scroll Ends
});
});
your css home class should look like this
#home {
background: url(http://webneel.com/wallpaper/sites/default/files/images/01-2014/23-animation-wallpaper.preview.jpg) no-repeat center 0 fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: auto;
position: relative;
}
Related
I am trying to load a simple webpage that has an image that covers the entire page background. However, when the page is first loaded, there is a noticeable white flickering for a split second as the image is being loaded. I have already tried suggestions such as but to no effect. Here is my code below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("img_girl.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>
Does anybody have a solution to remove the flickering effect?
You can set .bg with opacity 0, then with jQuery once the page is done loading add a class set with opacity 1.
If you want a "fadein" effect simply add a transition.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("img_girl.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transition: opacity 1.3s ease-out;
opacity: 0;
}
.bg.visible{
opacity: 1;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$(window).on("load",function(){
$('.bg').addClass('visible');
});
});
</script>
</html>
Maybe not the best solution but it works for me.
If you want an image that covers the entire page background, you should directly set it for the <body> element like this:
body {
background-image: url(your_url/your_image.png);
background-position: center; // to center the image
background-repeat: no-repeat; // to not repeat the image
background-size: cover; // to cover the element
background-color: #000; // fallback if the image is not available
}
or with the CSS shorthand more compact:
background: #000 url(your_url/your_image.png) no-repeat center;
background-size: cover;
Hey guys i am trying to make transition when the scroll it pass the first div( that is with the class name "one") height it will resize it width to 20% and the second div ( with the class name "two") will take the remaining width of the "one" class. <== when this happened it will turn the "two" class to a display as a block rather than inline-block. the problem that i have right now is that when the ".one" class it got resize to 20% the ".two" class disappear same as the below class and when the ".two" class disappear when i scroll up it only resize the ".one" class div halfway . can anyone help me how to achieve this? here's my code and some image that i made of a transition that i want to make in case still confused of what i want to achieve. thanks for the help.
in here it shown from this image to the left shown display of the page before scroll and from the right image shown when the user scroll the page that will reduce the size of the div class ".
in this section of image from the left shown when the width of the div class ".one" is have width of 20% it will not resize it again and for the right image shown when the div class ".one" have width of 20% it will change the css of div class ".two" from inline block to display block and when it scroll it will show the third div.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
height: 2000px;
}
.container {
width: 100vw;
height: 100vh;
position: fixed;
}
.content-wrapper {
width: 100vw;
white-space: nowrap;
}
.section {
width: 100vw;
height: 100vh;
position: relative;
display: inline-block;
}
.section label {
font-size: 100px;
color: white;
text-align: center;
transform: translateX(-50%) translateY(-50%);
}
.one {
background-color: red;
top: 0;
z-index: -999;
}
.two {
background-color: yellow;
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div class="container">
<div class="content-wrapper">
<div class="section one">
<label>one</label>
</div>
<div class="section two">
<label>two</label>
</div>
</div>
<div class="revelation" style="width: 100vw; height: 100vh; background-color: black;">
<label>Tree</label>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script type="text/javascript">
$(window).scroll(function() {
var winScrollTop = $(window).scrollTop() + 0,
zeroSizeHeight = $(document).height() - $(window).height(),
newSize = 1400 * (1 - (winScrollTop / zeroSizeHeight));
let box = document.querySelector('.one');
let width = box.clientWidth;
console.log(newSize)
if(newSize > 331.13772455089827 ){
$(".one").css({
"width":newSize
})
}else if(newSize <= 331.13772455089827){
$(".section").css({
"display":"block"
})
}
});
</script>
</body>
</html>
here is my code in which i only know the mouse over and is working completely fine, but it mouse over the whole picture and i want the mouse over from the inside as well as the a slight zoom-in, here is the site from which you can see what am i asking for? (https://woodmart.xtemos.com/demo-grocery/demo/grocery/#) when you scroll down to the ads and then you hover on ads you can experience mouseover from the inside as well as a slight zoom-in. Thanks in advance.
<body>
<div class="page-container">
<div class="page-back">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript">
var windowWidth = $(window).width();
$('.page-back').mouseover(function(event){
var moveX = (($(window).width() / 2) -event.pageX)*0.1;
var moveY = (($(window).height() / 2) -event.pageY)*0.1;
$('.page-back').css('margin-left', moveX +'px');
$('.page-back').css('margin-top', moveY +'px');
});
</script>
</body>
here is its css
.page-container{
width: 50%;
height: 50%;
position: fixed;
background-color: #fff;
}
.page-back{
width: 100%;
height: 100%;
left: -20%;
top: -10%;
position: absolute;
background-image: url('https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2020/06/wood-food-market-ban-1-opt.jpg');
background-size: 500px;
background-position: center;
}
You don't actually need Js for this. You can do this using CSS.
HTML :
<div class="page-container">
<div class="page-back">
</div>
</div>
CSS :
.page-container{
width: 300px;
height: 200px;
border: 1px solid #000000;
overflow: hidden;
position: relative;
}
.page-back{
width: 100%;
height: 100%;
background: url('https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2020/06/wood-food-market-ban-1-opt.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: all 1s;
}
.page-back:hover{
transform: scale(1.2);
}
The main thing here is setting overflow : hidden on page-container.
This will do the job. But the background image scales only when hovered on the image and not on any elements inside. For that you need Js.
Js :
$(document).ready(function() {
$('.page-container').mouseover(function() {
$(this).find('.page-back').css('transform', 'scale(1.2)');
});
$('.page-container').mouseout(function() {
$(this).find('.page-back').css('transform', 'scale(1)');
});
});
I am creating a portfolio for the freecodecamp course. I want my portfolio page to have a slide out navigation menu, that slides out once you click on the menu button. I also want to have an image covering the body completely and when the menu slides into the page the picture would move with the body. I already have the slide out menu and the body moves along with the menu as it slides into the viewport, now I just need to figure out a way to add an image to the body that also responds to the slide out menu. Any help would be greatly appreciated!
This is my HTML and JS code that I have written so far.
<!DOCTYTPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="menu menu-open">
<header>
Menu
<nav class="menu-side">
This is a side menu
</nav>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
(function() {
var body = $('body');
$('.menu-toggle') .bind('click', function(){
body.toggleClass('menu-open');
return false;
});
})();
$(document).ready(function(){
$(".menu").css({"height":$(window).height() + "px"});
});
</script>
</body>
</html>
This is my CSS.
.menu{
overflow-x: hidden;
position: relative;
left:0;
}
.menu-open{
left:231px;
}
.menu-open .menu-side{
left: 0;
}
.menu-side,
.menu{
-webkit-transition: left 0.2s ease;
-moz-transition: left 0.2s ease;
transition: left 0.2s ease;
}
.menu-side{
background-color: #333;
border-right: 1px solid #000;
color: #fff;
position: fixed;
top: 0;
left:-231px;
width: 210px;
height: 100%;
padding: 10px;
}
.menu-toggle{
z-index: 1;
}
I think all you need to do is add a background image to the class you add to the body when the menu is open if I understand the question correctly.
.menu-open {
background-image: url('your-image.jpg');
}
You can simply add a div into a body (so you can have more flexibility to manipulate with the content):
<body>
<nav></nav>
<div>
<p>Menu</p>
</div>
</body>
Then use CSS to fill the window with the background and set style of your navigation:
html,
body {
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100vh; /* Relative to 100% of the height of the viewport (browser
automatically recognizes height of the window) */
box-sizing: border-box;
}
/* Adjust body size to the html */
body {
width: 100%;
height: 100%;
display: flex;
}
nav {
width: 200px;
height: 100%;
}
div {
width: 100%;
height: 100%;
/* Background resizes automatically when menu appears */
background-image: url('yourimage.jpg');
background-size: cover;
background-repeat: no-repeat;
}
And animate navigation with jQuery:
$("p").click(function() {
$("nav").animate({width:'toggle'}, 350);
});
Im creating a page where my footer is growing on a certain event.
My problem is to make the footer grow according to how much space i got.
See my code or jsFiddle. I want the gray footer to grow all the way up to the colored elements with dynamic height (instead of like now, to 20%).
I guess i could count all the elements height above but that doesn't sound like a good solution.
jsFiddle here
<html>
<head>
<style type="text/css">
body #pagePlaceHolderOuter {
background: #FFFFFF;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner {
height: 100%;
margin: 0 auto;
max-width: 1000px;
min-width: 700px;
width: 70%;
position: relative;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner .div1 {
width: 100%;
height: 100px;
background: blue;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner .div2 {
width: 100%;
height: 120px;
background: green;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner .div3 {
width: 100%;
height: 60px;
background: red;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner .footer {
background: gray;
bottom: 0;
height: 10%;
position: absolute;
width: 100%;
}
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$("#btn").click(function () {
$('body #pagePlaceHolderOuter #pagePlaceHolderInner .footer').css('height', '20%');
});
</script>
<div id="pagePlaceHolderOuter">
<div id="pagePlaceHolderInner">
<button type="button" id="btn">Click Me!</button>
<div class="div1">I have a dynamic height</div>
<div class="div2">I have a dynamic height</div>
<div class="div3">I have a dynamic height</div>
<div class="footer">Footer</div>
</div>
</div>
</body>
</html>
Instead of calculating the space of all the elements before, you can simply calculate the height of the most previous one and find the offset().top of that element. Using this approach I calculated the space (you have to make sure in your HTML the footer is directly after the previous element or slightly restructure my jQuery) and essentially you just toggle it between the default value and the default value + the space. Updated jsFiddle
$("#btn").click(function (e) {
var prev = $('.footer').prev(),
winHeight = $(window).height(),
calcTop = $('.footer').height() == Math.round(winHeight / 10) ?
(winHeight - prev.offset().top - prev.height()) : "10%";
$('body #pagePlaceHolderOuter #pagePlaceHolderInner .footer').css({
'height': calcTop
});
});
On a side note I used CSS transitions to "animate" the change, not jQuery for performance issues and for ease of editablity
If you just want the position to change, not the height, you can do it by toggling the bottom value instead. Demo of that here