As the title suggests, I'm using Stellar.js. I only have one parallax element, and it's very simple. It's a section with a background image. The background image is set to fixed (like the documentation says to do to avoid jitter), but the image is still jittery--somewhat in Chrome, really bad in other browsers. It doesn't change when I remove the fixed CSS either.
Here is the element:
<!--Testimonial Section-->
<section id="testimonial" data-stellar-background-ratio="0.5" data-stellar-vertical-offset="-900">
<div class="container">
<div class="row">
<div class="span3 margin-30">
<img src="img/testimonial-img.png" alt="Title">
</div>
<div class="span9">
<h2>“Lava has been an asset to our company by providing us with a cutting edge look and a web presence that shows off our work and skills.”</h2>
<div class="testimonial-source pull-right">Jeff | Ceo - Creative Company</div>
</div>
</div>
</div>
</section>
And here is the CSS:
#testimonial {
background: url(../img/studio-10.jpg) no-repeat center;
background-size: 2000px 2000px;
background-attachment: fixed;
padding-top: 120px;
padding-bottom: 120px;
}
Pretty straightforward. Any advice?
The problem wound up being an image tag that was in the same div as the background image that was involved in the parallax scrolling. Upon removing this image, jitter stopped.
Have you tried using smaller images? Those used in stellar's demo are smaller (1280x640px) and do not have the background-size property. Try with smaller image and/or without the background-size property - that may cause those performance problems.
try this
#testimonial {
background: url(../img/studio-10.jpg) no-repeat 50% 0 fixed;
width: 2000px;
height: 2000px;
padding-top: 120px;
padding-bottom: 120px;
}
I know this is an old question but changing $.stellar() or $(window).stellar(); to :
$.stellar({
hideDistantElements: false
});
solved the flickering issue for me.
Related
I have a logo on my website. The code is as follows:
footer .logo {
margin: 1px auto 26px auto;
width: 150px;
}
<footer>
<div id="footer" class="container">
<div class="row">
<img class="logo" src="logo.png">
</div>
</div>
<!-- more content here -->
</footer>
For the sake of the question, I'm replacing the logo with a banana.
It looks good on desktop, android and simulated ios devices:
what the image should look like
But something happens in real ios devices that does not happen in the simulators:
what it looks like on an actual ios device
It appears that on an IOS device the image is somehow enlarged and then compressed into the width of 150px. Strangely this is the only image that behaves like this from all the images on the website.
Do you know what might be causing this or how to fix it?
try with max-width
footer .logo {
margin: 1px auto 26px auto;
max-width: 150px;
}
It turned out that div.row was the culprit as it had display: flex. Changing to display: block fixed it.
Whenever I resize the window, some spaces are not filled with image I coded to insert. Actually, I tried to handle this many times with several approaches.
Here are some parts of my code.
(I use jquery, jquery-ui, and bootstrap)
HTML
<div id="carouselSection" class="carousel slide" data-ride="carousel">
<!-- Indicators are skipped -->
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="carouselImage">
<div id="black">
<img src="img/carousel_img_opt/slide_001.png">
</div>
</div>
</div>
</div>
CSS
.carouselSection {
height: 100%;
width: 100%;
}
#black {
width:100%;
height:auto;
background: rgba(0, 0, 0, 0.7); /* for darkening */
position:absolute;
top:0;
left:0;
background-image: url('bg_dim.png'); /* for checkered */
background-repeat: repeat;
z-index:10;
}
.carousel-inner .carouselImage img {
/*position:absolute;*/
width: 100%;
height: auto;
top:0;
opacity: 0.5;
background-size: cover;
background-position: center center;
}
I made this function for adjusting carousel part (of course including images) to the window's size.
function resizeCarousel(){
$('#carouselSection').css('height', $(window).height());
$('.carouselImage, #black').css('height', $(window).height());
// $('.carouselImage img').css({'top': 'auto', 'left': 'auto', 'min-width': '100%'});
}
The comment part is problem.
If I change the .carouselImage img's css "min-width' make '100%', and then making window longer (vertically), just #black part is showing without image.
Or I change that img's "min-height" make "100%", and then making window widely (horizontally), #black part is showing without image.
So, I made both height & width 100% when resizing, then image go stretching. (But I don't want that stretching because it's ugly ㅠㅠ)
Does anybody know how to handle this problem?
Actually, I want this kind of effect (main images within carousel slide) in https://www.linefriends.com/.
I tried to copy the html(including js file), css code from that website. But I didn't get any idea from it.
(Actually, it seems like there's a little bit of zooming in/out effect on linefriends' website. But I could not find that effect on the code. I think the effect that I want might not the problem of height or width. But, if you catch how to build linefriends' effect, please let me know.)
Thanks for reading!
If you give your slide container a static height (you can use height: calc(100%);, you can use background-image and background-size: cover; to display an image which does NOT stretch when resized. See code below:
<div class="item active">
<div class="carouselImage" style="background-image: url('img/carousel_img_opt/slide_001.png');>
<div id="black">
</div>
</div>
</div>
I am using this tutorial to create an overlay on my images with text:
http://codepen.io/pdelsignore/pen/uqenH
It works great, however I have a responsive website and if I try to enter a % as the width / height of the '.box' the image disappears. It appears it can only be a fixed with (i.e. px) which obviously doesn't scale.
.box {
cursor: pointer;
height: 250px;
position: relative;
overflow: hidden;
width: 400px;
font-family: 'Open Sans', sans-serif;
}
Does anyone have any ideas? Thanks in advance!
Try giving min-width and min-height a try.
min-width: 100%;
min-height: 100%;
In live project usually we use any responsive framework. Like bootstrap or foundation. So I think you could ignore as framework will handle this properly. No need to use any % to make it responsive. For Bootstrap we use
<div class="row">
<div class="col-md-4">
<div class="box">
<img src="http://files.room1design.com/oldcity.jpg"/>
<div class="overbox">
<div class="title overtext">
Walk This Way
</div>
<div class="tagline overtext">
Follow the path of stone, a road towards an ancient past
</div>
</div>
</div> <!-- End box -->
</div> <!-- End Col-4 -->
</div> <!-- End row -->
I believe the dimensions of .box as a percentage would be based on the height of the parent. since no height is specified on the body it has no frame of reference. try adding the following to get percentages working on .box.
html, body {
height:100%;
}
here is an updated codepen with a few other changes to illustrate the use of percentages after giving your body dimension.
http://codepen.io/anon/pen/dPREBE
If you look at this page: http://www.groenesmoothiehandboek.nl/sp/ you will see that the video is slightly offcenter.
You will also see there is a counter (flipclock.js) above. To call the counter we use this code:
<div style="width:100%; background:url(img/bg-countdown.png) center top no-repeat; height:140px; margin:0 auto; z-index:9999;">
If i delete this part, the video centers perfectly.
I am already trying to fix this little bug for over an hour without success.
Does anyone know how i can maybe fix this?
Thanks in advance!
If you wrap this div:
<!-- notice no height attribute here -->
<div style="width:100%; background:url(img/bg-countdown.png) center top no-repeat; margin:0 auto; z-index:9999;">
<!-- stuff from inside this div -->
</div>
inside of this div:
<div style="height: 140px;">
<!-- Place the entire div from above here -->
</div>
Your problem is fixed.
Picture: http://i.imgur.com/HBiLUOz.png
I think ive fixed this one for you:
Add float: left to the wrapper of the counter. (the one with these properties
{
width: 100%;
background: url(img/bg-countdown.png) center top no-repeat;
height: 140px;
margin: 0 auto;
z-index: 9999;
}
Add these to the div underneath it
width: 100%;
float:left;
(the div with these properties):
background:url(img/bg-vid.jpg) center top no-repeat;
height:878px;
max-width:1920px;
margin:0 auto;
should be fixed. I strongly suggest you work with classes and id's to add CSS :). It's more readable that way. Good Luck with the smoothies ;)
I tried to display my photos horizontally, so i used
.stream {
white-space: nowrap;
}
.mod-pic {
padding-left: 5px;
}
.modelstream {
display: inline-block;
max-height: 90%;
width: auto;
}
for my photo's css
html looks like this: (I used javascript to render the photos)
<div class="stream">
<div class="alexContainer"></div>
<div class="template main alexTemplate">
<div class="mod-pic">
<img class="pic modelstream" src="" alt=""/>
</div>
</div>
</div>
The problem is when I resize the browser, the margin of the photo become too big, although
I want the photo to be responsive, but I don't want the margin between photo become too
big.
Can anyone help me to fix this problem? I would really appreciate it!
Thanks
It looks to me like your container div/divs are becoming too wide when the window is re-sized. I think using CSS to set the max-width on one or more of the outer divs would solve your problem.