Parallax effect within bootstrap grid - javascript

Hello guys I'm trying to make simple parallax effect within bootstrap grid system and I've run into a problem. I made two divs side by side and I want one div to hold static image while other should have parallax effect.
I have a problem with parallax div background-size property no matter what I try I can't make it to cover my parallax div the way I want it, background image always end up being larger then it should be or not aligned correctly.
This is my code:
HTML:
<section id="twoImages" class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="parallax"></div>
</div>
<div class="col-md-6">
<img class="d-block img-fluid" src="https://placebear.com/715/470" alt="shoe newspaper">
</div>
</div>
</section>
CSS:
body {
margin-bottom: 50em;
}
#twoImages {
padding: 0;
margin: 0;
}
#twoImages .col-md-6 {
padding: 0;
margin: 0;
}
#twoImages .parallax {
/* The image used */
background-image: url("https://placebear.com/715/470");
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Here is the codepen so you can better understand my problem https://codepen.io/Karadjordje/pen/VpeBzp

Here is your answer
you need to use jquery
check this https://codepen.io/parthjasani/pen/YZwJMq
remove
background-attachment: fixed;
from css
and add this jquery code
var $ = jQuery.noConflict()
$(window).scroll(function(){
var scroll = $(this).scrollTop()
$(".parallax").css({"background-position":"0px "+scroll/2+"px"})
})

Related

Change fixed background depending by child div

I am trying to change the background image of the parent div depending on which child div am I scrolling. I tried in the past to work with scrollY but no luck because is no responsive at all.
Basically I want when the user scroll and is on graphic-interior-design to have image 1when is on graphic-architecture to have image 2 and so on. However, I need to keep all the images fixed to the top of the long-container.
$(window).scroll(function() {
console.log(scrollY)
if (window.scrollY > 9600) {
$(".graphic-augumented-reality-page").addClass("backgroun-img-augumented-reality")
$(".graphic-augumented-reality-page").removeClass("background-img-arhitecture")
}
else{
$(".graphic-augumented-reality-page").addClass("background-img-arhitecture")
$(".graphic-augumented-reality-page").removeClass("backgroun-img-augumented-reality")
}
});
.long-container{
background-attachment: fixed;
background-position: top;
background-image: url('https://www.gstatic.com/webp/gallery3/2.png');
background-color:white;
}
.graphic-interior-design, .graphic-arhitecture,.graphic-augumented-reality{
height: 100vh;
}
<div class="long-container">
<div class="graphic-interior-design"></div>
<div class="graphic-arhitecture"></div>
<div class="graphic-augumented-reality"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
This is the method that I tried but I find out is not a good idea to use scrolls. Instead of ScrollY I want to change position depending by the child div scroll position .
I changed the images to colors, but I think this should help you.
$(window).scroll(function() {
var run = true;
var color = 'blue';
$('.long-container > div').each(function(){
var top = $(this).position().top;
if(window.scrollY < top && run){
color = $(this).attr('data-image');
$('.long-container').css('background', color );
run = false;
}
})
})
.long-container{
background-attachment: fixed;
background-position: top;
background: blue;
}
.graphic-interior-design, .graphic-arhitecture,.graphic-augumented-reality{
height: 100vh;
outline: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="long-container">
<div class="graphic-interior-design" data-image="blue"></div>
<div class="graphic-arhitecture" data-image="green"></div>
<div class="graphic-augumented-reality" data-image="red"></div>
</div>

Particle-JS Responsive canvas height issue

I've been working with a Bootstrap portfolio where I am trying to use particle.js on the profile picture.
I set the particles inside a DIV and gave it a bg-image with profile photo. The fact is, when I reload the screen on XL screen and resize the screen to xl > lg > md, it stays fine. But when The screen size increased to md > lg > xl, the canvas height doesn't decrease according to its parent. Please HELP!
Here is the link:
https://sabbir030.github.io/portfolio/
Canvas Height Issue
<header id="main-header">
<!-- full row for image to the left and others to the right -->
<div class="row no-gutters">
<!-- images to the left with 4 col -->
<div class=" col-md-5 col-lg-4">
<!-- PARTICLE JS WITH PROFILE PICTURE -->
<div id="particles-js"></div>
</div>
<!-- Name and Menu to the right with 8 col -->
<div class=" col-md-7 col-lg-8">
</div>
</div>
</header>
#particles-js {
width: 100%;
height: 100%;
background-color: #b61924;
background-image: url('../img/profile.jpg');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
You can define max-width, max-height and margin: 0 auto on #particles-js id for centering particle div.
#particles-js {
max-width: 380px;
max-height: 401px;
margin: 0 auto;
}
Here's what worked for me
// the element in which you want to play the particles animation (in my case the body element)
var particleAnimationContainer = document.querySelector('body');
// initialize the dimensions of the animation container; in my case with the avalaible screen dimensions
var screenWIDTH = screen.availWidth;
var screenHEIGHT = screen.availHeight;
particleAnimationContainer.width(screenWIDTH);
particleAnimationContainer.height(screenHEIGHT);
//launch the animation particlesConfig provided in particles.json
particlesJS("id-of-body", particlesConfig);

Scrollbar disappears due to background image

I'm a new-bee and I am trying to build a web-page which has a background image throughout the application.
Problem is that when I move further in the application after login page and all, there is a page called family details which has a scroll-able content but due to the background image the scroll bar does not appear.
I've tried using image tag instead of using background image but then the content does not appear over the image, it appears below the image.
App.component.html
<div class="background-image">
<router-outlet></router-outlet>
</div>
styles.css
.background-image {
background-image: url('assets/icf.jpg');
background-position: center top;
background-size: 100% auto;
}
With image tag
App.component.html
<img src="assets/icf.jpg" alt="/">
<router-outlet></router-outlet>
You could use your image tag method, and assign a lower z-index to the img tag, than the rest of the content
<img src="assets/icf.jpg" alt="/" style="z-index: 0;">
<div class ="all-your-other-stuff" style="z-index: 1;"></>
.img{
background-image: url("https://dummyimage.com/200x200");
z-index: 0;
height: 200px;
width: 200px;
}
.content{
z-index: 1;
}
<div class="img">
<div class="content">TEXT ABOVE IMAGE</div>
body {
background-image: url('https://dummyimage.com/200x200');
height: 100%;
width: 100%;
}
<html>
<body>
<p>Test data</p>
</body>
</html>
Try adding image on Body tag using background-image and use repeat-x, repeat-y property from css.
Then the image will be at the background always.
Add the image to the index.html, and make sure that the div which houses your angular code has a higher z-index; relevant index.html below:
<div class='bkgClass'>
<div class='insideClass'>
<my-app>loading</my-app>
</div>
</div>
<style>
.bkgClass {
height: 100vh;
width: 100vw;
background: url("https://beta.akberiqbal.com/JumboMobT.JPG");
}
.insideClass {
z-index: 1;
}
</style>
No change to your app.component, or any other components;
you can check a working stackblitz here

How to position a div above another div?

My code is:
HTML:
<section>
<div id="banner">
<div class="container">
<p class="para">hello world</p>
</div>
<div class="container banner-bottom">
<div class="card card-primary text-center z-depth-2 contact-main-text">
<div class="card-block">
<p class="white-text">Please fill out the form below and ESC
staff will be in contact with you shortly.</p>
</div>
</div>
</div>
</div>
</section>
CSS:
.para{
color:white;
background: red;
padding:70px;
text-align:center;}
.white-text{
background:green;
padding:20px;}
Output is: Bootply
And i want:
Could anyone help me with that?
You can set negative top margin to overlay the second div, see the live example:
<div class="container banner-bottom" style="margin-top:-5%;padding:2%">
http://www.bootply.com/MorC45NB4V
PS: I have used inline css just to show, avoid inline css.
My solution uses jQuery and some calculations. My calculation works even if you move the elements around the document. I also used CSS for the margins you wanted.
jQuery
//location of bottom of the red container
var bottomOfContainer = $('#onTopOfMe').offset().top + $('#onTopOfMe').height();
//gets the bottom 4th of the red container
var placement = bottomOfContainer - ($('#onTopOfMe').height() / 4);
//setter of top for green container
$('#placeMe').offset({"top": placement});
CSS
p.white-text{
margin-left:5%;
margin-right:5%;
}
Output
bootply
1) In case you want your lower banner to have a full width:
You could add position: relative; to the lower banner and position it adding a bottom value and use margin to create the same visual effect asked in the question.
.banner-bottom {
position: relative;
bottom: 45px;
margin: 0 40px;
}
2) In case you don't need to have a banner with full width and just center it, then no need to use margins. Remember to set one parent as position: relative;:
#banner { position:relative;}
.banner-bottom {
position: absolute;
top:75%;
right:0;
bottom:auto;
left:0;
}
CODEPEN
http://codepen.io/alexincarnati/pen/PWOPjY
Here's my solution for this.
Basically just make the position of the card block "relative", position the "top" position accordingly, then set the margin to "auto" to center it.
.card-block {
position: relative;
top: -50px;
margin: auto;
width: 80%;
}
A bit of position could help you, here's a rough version that will hopefully get you thinking what you need to do:
#banner { position:relative;}
.banner-bottom { position: absolute; top:75%;right:0;bottom:auto;left:0; }
Heres a forked bootply: http://www.bootply.com/Imuh4wUj50

Overflow hidden property is not working with parallax scrolling

The overflow hidden property is not working as expected when trying it with parallax scrolling.
I am trying to accomplish parallax scrolling with JavaScript everything should work fine but when i try to set the overflow to hidden the image still appearing outside the div
Here is the HTML
<div id="page2">
<p id="bb">The title</p> //Some title
<div id="bg"></div> //Blue box in front of the image(design decision)
<img src="img/Food.jpg" alt="prlx" id="prlx"/> //The image which has the proprety
</div>
Here is my JavaScript eventListener and the function :
window.addEventListener("scroll",func,false);
function func(){
prlx_lyr_1 = document.getElementById("prlx");
prlx_lyr_1.style.top = (window.pageYOffset/4)+"px"
}
And this is my CSS for the image which i am trying to hide the overflowing parts :
#page2 img{
position:relative;
top:-300px;
}
And this is the CSS of the div which contain the image
#page2{
overflow:hidden;
height:250px;
}
There is some extra CSS for the #bg
Update:
here is a
You can notice that the overflow is not hidden the container div is the blue side in the page
Here is a js fiddle
So the issue is position: fixed breaks the element out of the flow of the document and unlike absolute it can't be contained by using relative on a parent. Instead you should set this image as a background set to fixed on a div that is position: absolute:
HTML
<div id="page2">
<p id="bb">The chef</p>
<div id="bg"></div>
<div id="bg-image"></div>
</div>
CSS
#page2{
overflow:hidden;
height:250px;
position: relative;
}
#bg{
background: #33c1c9;
height:250px;
width:100%;
position:relative;
z-index:74897;
opacity:0.4;
}
#bg-image{
background: url("http://im47.gulfup.com/1Y5tcL.jpg") no-repeat fixed;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
FIDDLE

Categories