Create a Javascript Gallery with Background Images - javascript

Need help creating a full page gallery. I tried various options. I'm trying to create full page gallery that lets the user scroll vertically though 1 image at a time.
Here's my code:
<style>
#img1 {
background-image: url("<?php echo $image ;?>");
height:100vh !Important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#img2 {
background-image: url("<?php echo $image2 ;?>");
height:100vh !Important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#img3 {
background-image: url("<?php echo $image3 ;?>");
height:100vh !Important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<div id="img1"></div>
<div id="img2"></div>
<div id="img2"></div>
I'm stuck on the javascript/jquery solution to detect if the user has scrolled. I want to change images if the user scrolls up 10 pixels or down 10 pixels.
Here's an example of what I'm trying achieve:
http://themes.themegoods.com/photome/demo/gallery-archive/gallery-archive-fullscreen/

It would be better to use js libs like "fullPage.js, smart scroll, pagePiling.js" those help you to make a perfect page or gallery scroll like what you wanted to achieve, for more information follows below links:
https://alvarotrigo.com/fullPage/
http://blog.danyll.com/smartscroll-jquery-scrolljacking-plugin/
https://alvarotrigo.com/pagePiling/

Related

Why Background Image not Taking Full Width in React

Question Details:
I Was Trying to set the background image in react but the positioning is not working properly. The Image gets zoomed a lot, Plus when I change the property of background-size from cover to contain, It will squeeze to the center instead of taking the full width of the container.
React Component
import React from 'react'
import arrow from '../images/icon-arrow-down.svg'
function Showcase() {
return (
<div>
<section className="showcase">
<div className="overlay">
<h1>We are creative</h1>
<img src={arrow} alt="" />
</div>
</section>
</div>
)
}
export default Showcase;
----------
CSS Code
**<!-- language: lang-css -->**
/*ShowCase*/
.showcase{
background-image: url('./images/mobile/image-header.jpg');
height:100vh;
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
background-size: 100%
}
.showcase .overlay{
height:512px;
display:flex;
align-items: center;
justify-content: center;
}
<!-- end snippet -->
The Preview of Output is
[1]: https://i.stack.imgur.com/M1NRu.jpg
Try removing background-size: 100% from .showcase.
This should ensure that the size of the image can be larger than the container so your background-position: cover can be the full height and width of it's dimensions.
*Edit (full styles for showcase):
.showcase{
background-image: url('./images/mobile/image-header.jpg');
height:100vh;
width: 100vw;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

Image overlay when scrolling (javascript)

I want to use image overlay when a page is scrolled like here (see how raindrops and fish appear and a man disappears when scrolling).
I tried to make it with parallax effect using CSS only, but it's not what I need, because it doesn't work on mobiles like the example above.
I will be thankful if you advise me some javascript hacks with 'onscroll' or something else.
My code
HTML
<body>
<div class="parallax">
<div class="bg_one"></div>
<div class="bg_two"></div>
</div>
</body>
CSS
.parallax [class*="bg_"] {
position: relative;
height: 900px;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
.parallax .bg_one {
background-image: url(https://raw.githubusercontent.com/AYNesterov/data_sets/master/внутри%20пни.png);
}
.parallax .bg_two {
background-image: url(https://raw.githubusercontent.com/AYNesterov/data_sets/master/внутри%20квартиры.png);
}
It's a very nice idea!
I've tested your code not in a real mobil but on Chrome > inspect >toggle device toolbar (left top). This allows you to test a web page in a mobil like environment. I've made a few changes in your css and it seems to work:
.parallax [class*="bg_"] {
position: relative;
height: 100vh;
background-attachment: fixed;
background-position: top center;
background-size: cover;
}
.parallax .bg_one {
background-image: url(https://raw.githubusercontent.com/AYNesterov/data_sets/master/внутри%20пни.png);
}
.parallax .bg_two {
background-image: url(https://raw.githubusercontent.com/AYNesterov/data_sets/master/внутри%20квартиры.png);
}
<div class="parallax">
<div class="bg_one"></div>
<div class="bg_two"></div>
</div>

HTML, jquery adjust image size when displaying

I am trying to apply some CSS to a web page background but am a little unsure how to do so. I have a script that when someone clicks a button, it changes the background image. However, the images are not to scale and are not sized right. I want to add some style to the image but dont know where to do so. I am trying to add :
background:url(Pic/jungle.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Into each image. So when someone does click a button, its a single image thats fits the screen nicely. Does anyone have any sugguestions about where I might go about adding these styles to the background image? Thank you for your time and help.
<!DOCTYPE html>
<html>
<style>
body
{
background-image:url(Pic/jungle.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<body>
<button class="color" style="background-image: url('Pic/changebackground.png'); width:60px; height: 50px;background-repeat:no-repeat;background-color: transparent;border:none;"></button>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function () {
var rotate = 0;
var colors = ["url('Pic/hi.jpg')", "url('Pic/jungle.jpg')"];
$('body').on("click", function () {
$(this).css({
'background-image': colors[rotate]
});
rotate++;
if (rotate >= 2) {
rotate = 0;
}
});
});
</script>
</body>
</html>
You are overriding the background-property completely by using $(this).css('background'). Try using background-image instead.

How can I stretch content background image to full screen?

I have this HTML. With the following:
<div class="item">
<div class="bg_img"></div>
<h1>morning</h1>
<h2>today</h2>
<p>lorem ipsum.</p>
</div>
Background image to this content CSS:
#container .item .bg_img{background:url('../img/mainpage/demo.jpg') no-repeat;}
This structure is working ok. But I want to attach this background images to body and full screen size. How can I do this via JavaScript or pure jQuery (no plugin)?
Try below code...
#container .item .bg_img{
background: url('/img/mainpage/demo.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Use this CSS:
background-size: cover;
Do you mean an image that is related to the context of the body and not of .item?
You can use position:fixed for that. A top, left, bottom and right will ensure it will take the whole page.
background-size: cover will make sure the image itself will cover the page. Depending on the image you use, you might want another solution. Ex: you can center an image and fade to a background color (but that's up to you)
Use a z-Index of -1 to ensure it does not obscure your content
item .bg_img {
background:url('http://www.ninahale.com/wp-content/uploads/2013/08/Post-Enhanced-Campaigns-World.jpg') fixed center center;
background-size: cover;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
Fiddle: http://jsfiddle.net/Aa8fe/
Even i struggled for the same and atlast i got a solution..its below..
body //your container name
{
background-image: url(Images/caramel%20gradient%20for%20website.png);
background-size: 100%;
}

Centered background extending to the edge of the screen [duplicate]

This question already has answers here:
Stretch and scale CSS background
(16 answers)
How to make the background image to fit into the whole page without repeating using plain css?
(6 answers)
Closed 9 years ago.
I don't how to do background which extend and will be centered
now I have something like this:
body {
background: url(tlo.jpg) no-repeat;
background-attachment: fixed;
background-position: center;
}
It is centered and it have constant size....
I want that it will be just proportionally expanded......
I need to keep the proportions
thanks!
OK i have solution! :)
body {
background-image: url(tlo.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center center;
}
Try this
body {
background: url(tlo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
i think background-size: may help you..
body {
background: url(tlo.jpg) no-repeat;
background-position: center;
background-size: 100% 100%;
}
it will take 100% width of body's total width and 100% height of body's total height...

Categories