I'm a front end intern and was asked to try and replicate a website mockup video which shows sliding content with a fixed background, but after reaching a certain section tag, the fixed background would switch to a different background. I'm using tailwind CSS to try and emulate the effect. Below is my way to emulating something which I think is similar:
<section class="bg-bg0 md:bg-bgB bg-fixed bg-no-repeat bg-center">
I achieve the effect by giving the sections tailwind css the aforementioned classes. When it reaches to the section I want to change backgrounds, the background is changed by switching the background class from bg-bgA to bg-bgB, and the effect is achieved, however on transition, the page lags TERRIBLY. Is there a more efficient way to go about achieving this effect? I want to apologize in advance if my solution is a dumpster fire, or if the way I ask is wrong.
Found out the issue, the background images were too large, decreasing them by 75% of their original size did the trick.
Related
This is an example of the effect I'm trying to acheive only without using images.
I want to create these screens that take up the entire screen like in the example. But instead of using background images to keep the content position, I'd like to use any HTML content within these screens. I'd also like to eventually ad a parallax effect similar to this.
So let's break it down. I got these background images on these screen elements. The background is fixed so it stays in the same position when you scroll. When you scroll down, the element moves out of view and another comes into view. It gives this effect as though the scrolling is causing a cover to slide up and reveal another screen. I want to keep this effect only without using background images. So I'll need some way to have some content remain fixed and have a contain hide it when it overflows an element that isn't fixed. But, as far as I know, there's no way to do this with CSS alone, am I wrong?
Like I said above, it would be interesting to have the content not remain exactly fixed, but instead slightly move it as you scroll giving it a slightly parallax effect. In order to do that tho, I'll need to use JavaScript. But, that's a bit out of the scope of my question, but I'd like to keep this in mind when coming up with the solution.
Thanks for all help in advance!
I've already had a look through some posts and couldn't find what I was after. I'm designing something in PS at the moment and I can foresee an issue when it comes to coding the design into html+css.
Imagine my centre div, it's 960px. It's going to have a semi-transparent .png as a background. The design is “full width” so this div will be contained in a larger div, set to 100% width. This is all ok until I get to the background on this outer div. It's also going to have a .png running the full width of the page. Problem is: I don't want it running through the middle, as it will result in the middle have a double thickness to it, if that makes sense?!
Basically, I need a way to either run a div either side that is elastic, or someway of stopping the background from running across the centre 960px portion of the browser window.
I have NO idea how this can be achieved, apart from using JS to set widths, which I don’t really want to do.
Any ideas?
Ok, I’ve tried to get the basic issue here: http://jsfiddle.net/8Bznc/1/
You can just put a non-transparent background on the center div, so the other background doesn't show through.
See here: http://jsfiddle.net/9bnHD/
Apply the background-image only to the wrapping div.
Alternatively, if the center and sides need to have different images, give the center div a non-transparent background-color as well.
Also, you could fake it by using multiple background-images. Demo
Keep in mind this won't work in old versions of IE, but something as non-essential as background transparency can be excepted as graceful degradation.
Hi I was trying to figure out how to create a border that fades into the background colour of a div and this is the only solution I could come up with.
I've googled around and it seems people suggest CSS3 but I was told it was still "under development" and not fully introduced in modern browsers, correct me if I'm wrong, probably am.
Anyway this is the solution I came up with, are there simpler ways of doing it or is this a reasonable approach?
Created numerous divs for each part of the border (as below), and set their background image according to the part of the border: http://i.imgur.com/sh6Z8.png
HTML & CSS: http://codeviewer.org/view/code:1e4f
(New to webdevelopment and stack overflow, sorry if I'm doing anything unorthodox, thanks).
So as Tim there already said it, if the width of your website is static, you can do something like that ( In fact even if css3 may be good option for your usage case This is super simple... )
http://jsfiddle.net/Xtw84/3/ - this is from a prior answer so the edges are not soft but the idea is the same. ( doesnt matter ) I also added image in the background so you can see how that would work. Theres no need.. actually makes no sense to slice the background image in half.
Heres a bit more stripped down version of it. http://jsfiddle.net/Xtw84/4/
With css3 i would do this with box-shadow and just expand the shadow as much as needed.
Is your layout going to be fluid? e.g. it will grow in width/height? If it isnt going to grow in width, then there is no reason that you can not just set the background image.
For what you are doing, I wouldn't use gradient borders and just stick with the images in the background.
I have a Div named splash which is 473px wide and 139px high. It has a background image applied to it. Within the Div I have 3 other Divs.
I want the background image of the splash container div to fade in and out through different pictures.
Is there any way to achieve this using CSS3?
You can see the splash div on http://blackburnseo.com/ensor/
CSS3 has a property/feature called 'transitions' which may be able to achieve the affect you're looking for, sans JS.
After a quick google, I believe this may be a good spot to get you started.
http://css3.bradshawenterprises.com/transitions/
I don't know how many browsers have implemented this feature, though; the other problem is that not every property supports transitions (you would probably be looking at background-position)
It can be done using transitions, but it wont change automatically.
User must trigger transition somehow (:hover, :focus, etc).
Check the example here: http://jsfiddle.net/seler/zZCyf/
I was looking at this HTML5 website, http://www.danhigbie.com, and found the "background image's scrolling" fascinating. I looked through its Javascript but found no code changing the background image.
Save the webpage to disk and play around with the files better.js and better.cs. The background scrolling is being done in the better.js file by changing the css classes (which are defined in better.css)
I am using some jQuery to change the background positioning of multiplebgs based on the scroll position. Each background image element is positioned from the top with a percentage, this may be a bit hard to follow since there are so many background images per section. I take each background elements vertical position value and modify it based on the current scroll bar position. Hope this helps.
Turns out that the effect is done simply by declaring the background position of different "section" as fixed. Found a excellent article that explains how that effect work:
Icon that changes color when scrolling
Here is a javascript library that does this for you and seems to work really well:
http://stolksdorf.github.com/Parallaxjs/