background-attachment fixed alternatives - javascript

I just had an issue, that I have 2 hero image sections on the same page, and I had to use background-attachement: fixed on them. Don't have to say, that the scroll is very slow on most browsers (looking at you IE). So the performance is not very good. Oh and this site has also some parallax scrolled elements (with stellar.js)
with smooth scroll (used: nicescroll.js for this). Ofcourse I made the images as small as possible and try not to use background-size: cover (performance again).
Oh and I use the window.requestAnimationFrame() in my core.js file (performance again).
Is there a way to make this 2 hero sections images work like background-image: fixed ?
index.html
<div class="first-hero">
</div>
<div class="content">
.
.
lots of parallax content goes here
.
.
</div>
<div class="second-hero">
</div>
style.css
.first-hero{
background: transparent url('image1.jpg') no-repeat;
background-attachment: fixed;
height:400px;
width:100vw;
}
.second-hero{
background: transparent url('image2.jpg') no-repeat;
background-attachment: fixed;
height:350px;
width:100vw;
}
.content{
width:100vw;
height:2500px;
}

Historically, background-attachment:fixed;has always suffered from performance issues. I would suggest that instead of this, a position:fixed; element is used instead.
Then, you can make the fixed background and the scrollable content sections sit on their own layers in the GPU, by using transform:translateZ(0); - this should offer additional performances gains.
Fiddle: https://jsfiddle.net/gstnr9w5/1/
.fixed-background{
position:fixed;
left:0;
top:0;
right:0;
bottom:0;
background:url(https://unsplash.it/1000/1000?image=1080);
background-size:cover;
background-position:center center;
z-index:0;
}
.content{ position:relative; z-index:1; color:white; font-size:22px; line-height:32px; font:serif; padding:80px; }
.fixed-background, .content{
transform:translateZ(0);
-webkit-transform:translateZ(0);
-moz-transform:translateZ(0);
}

in your second hero CSS statement try the below:
.second-hero{
background: transparent url('image2.jpg') no-repeat;
background-attachment: fixed bottom;
height:350px;
width:100vw;
}

Related

Sticky order review section woocommerce

Im having a bit of trouble getting the review order (in this case enquiry) section to stick to the bottom of the header on scroll.
Ive gone through a few jquery examples with no luck and am now playing around with the sticky position for the element. Using a codepen example and playing around with it ive got it to work alright and have tried replicating it on the page through the inspector with no luck.
Codepen example
HTML
<main class="main-container">
<header class="main-header">HEADER</header>
<div class="main-content">MAIN CONTENT</div>
<div class="second-content">SECOND CONTENT</div>
<footer class="main-footer">FOOTER</footer>
</main>
CSS
body{color:#fff; font-family:arial; font-weight:bold; font-size:40px; }
.main-container{ max-width:1000px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.main-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.main-container * + *{margin-top:20px;}
.main-header{
height:50px; background:#aaa; border-color:red;
}
.main-content{
display:inline-block;
width:49%;
height:900px;
}
.second-content{
display:inline;
width: 49%;
height: 200px;
position: sticky;
top:0;
}
https://codepen.io/elad2412/pen/QYLEdK
Website URL
https://trolleys.wpengine.com/
Based on my understanding you would need jQuery to stop it from going through the footer as well correct?
Ive tried going about this a few different ways and tried it on a few different elements, some of which have stuck for a little while but i need to catch the whole column.
This is an example that best shows what im after, tried implementing this but couldnt get it working.
http://jsfiddle.net/bryanjamesross/VtPcm/
Fixed,
Had to give the form a few extra attributes, i was applying them to an outer div.
form.checkout {
height: 1500px;
position:relative;
display:block;
}

Unable to style specific view in Angular

I'm having a lot of trouble figuring out how to get one of my views in Angular to display with a specific background. I'm finding that, with the code below, the entire view that I'm trying to style disappears.
All relevant code is below:
HTML (index.html):
<div class="col-md-8 col-md-offset-2">
<div ng-view></div>
</div>
Angular view:
<div class="main-body">
<div ng-switch="xxCtrl.xxx">
</div>
</div>
CSS:
body {
margin-top: 50px;
background: url('../img/main-bg.jpeg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
text-align: center;
font-size: 16px;
height:100%;
width: 100%;
margin: 0;
padding: 0;
}
.main-body {
background-color: rgba(16, 16, 16, 0.6);
height: 100%;
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow: scroll; overflow-x:hidden;
z-index: -1000000;
}
I have tried moving the main-body class into the ng-switch, in the ng-switch itself, etc. I even tried setting in-line CSS using ng-style, but I couldn't get the height set to 100%, regardless of how I formatted it. The only time I've been able to get the background to display as I wished was when I set the wrapper div outside of ng-view in index.html to main-body. However, I really don't want the background I'm creating to display across all views - just the one.
I have a feeling this is likely a CSS-related issue, not an Angular one. If anyone can point me in the right direction here, it would be greatly appreciated! Thank you!
Was able to solve this problem by changing the height to 100vh instead of 100%.

Add a layer on top of an image that has priority over the image

I'm making a Chrome extension which stops all requests of images and will allow you to click on the broken image icon in order to load the image without the blocking. This is in order to save bandwidth.
I have setup the request blocking but I'm not sure how to go about the next step.
The next step would be adding a layer on top of that broken image icon which would intercept any clicks on that image. The reason I do this is because often an image will be anchored to another link so clicking on it would do something else to what is desired.
I thought of perhaps using the z-index CSS rule but I'm not entirely sure of how this works and also I'm not sure if this would be the best way to go about this.
Any suggestions? Thanks! :)
Add this css to your html
<style type="text/css">
//container div
.container{
width:300px;
position:relative;
}
//image css property
.imageHolder{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:10px;
}
// overlay css property
.imageOverlay{
position: absolute;
z-index:11px;
top:0px;
left:0px;
width:100%; height:100%;
text-align:center;
}
</style>
This is your html code will be
<div class="container">
<img src="myimage.png" class="imageHolder" />
<div class="imageOverlay"> Load </div>
</div>
Hope it helps... Thanks.
you'll have to do something like:
create a base div with css relative position
create your img tag with css absolute position, left:0px, top:0px, width:100%, height probably 50 and z-index probably 10.
create a top layer div with css position:absolute, z-index higher than that of the img, top:0px, left:0px, width: 100px and height probably 50.
The Code would look like
<div style="position:relative; width:50px;">
<img src="image.ext" border="0" style="position:absolute; left:0px; top:0px; width:50px; height:50px; z-index:10px;" />
<div style="position: absolute; z-index:11px; top:0px; left:0px; width:50px; height:50px; line-height:50px; text-align:center;"> Load </div>
</div>

Creating a parallax-like effect using an image that isn't the background

I'm trying to create a scrolling effect that preferably doesn't use javascript (CSS only) but I understand if it's not possible, just exploring options.
My page looks like this:
When scrolling down I want the background image to have a parallax-like effect, staying static while the body's background and frame move around it.
Here's a sample of code to work with:
http://jsfiddle.net/J8fFa/7/
HTML
<body>
<div class="border-bg">
<div class="image-bg"></div>
</div>
<div class="border-bg">
<div class="spacer">
</div>
</div>
</body>
CSS
body{
background-color:#aaa;
}
.border-bg{
width:80%;
margin:30px auto;
background-color:#fff;
padding:40px;
}
.image-bg{
background:url('http://i.imgur.com/7cM1oL6.jpg');
height:400px;
background-size:cover;
}
.spacer{
height:900px;
}
I can see how this would work if the image was the background for the body, but as this is sitting on top of the body is there any way I can manipulate it to have a similar visual effect?
change your .image-bg class to:
.image-bg{
background:url('http://i.imgur.com/7cM1oL6.jpg') fixed;
height:400px;
background-size:cover;
}
this will prevent the image from scrolling
updated fiddle: http://jsfiddle.net/J8fFa/9/

What's the best method to load html/texts inside a sliding div?

Here's what I'm trying to do. I want to create a sort of slide show effect on the main content. If the user click on the right or left arrow on this div, it will move forward/backward to the next "slide/text". The content inside this div or slide includes image, texts, hyperlinks, and can be styled by CSS. My question is, what's the best route to create this effect? I do not want to use flash. I am thinking of a combination of HTML5, CSS3, and jQuery and/or javascript. Does anyone have or know of examples similar to what I've described? Your suggestions or opinions are much appreciated.
There is lot of slide show scripts available, you can also try this
<div class="mosaic-slide" style="z-index: 10;">
<!-- The mosaic-slide div and the tiles are generated by jQuery -->
<div class="tile" style="..."></div>
<div class="tile" style="..."></div>
<div class="tile" style="..."></div>
<div class="tile" style="..."></div>
</div>
</div>
css:
#mosaic-slideshow{
/* The slideshow container div */
height:500px;
margin:0 auto;
position:relative;
width:670px;
}
.mosaic-slide{
/* This class is shared between all the slides */
left:80px;
position:absolute;
top:25px;
border:10px solid #555;
/* CSS3 rounded corners */
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
}
.tile{
/* The individual tiles */
height:60px;
width:60px;
float:left;
border:1px solid #555;
border-width:0 1px 1px 0;
background-color:#555;
}
Demo: http://demo.tutorialzine.com/2010/03/mosaic-slideshow-jquery-css/demo.html

Categories