I am curious on how is the sliding section on http://www.wearebeef.co.uk/ done?
I have tried Googling but I cant really find a way how it is done.
I'm the Lead Web Developer at Beef, so I will try and give you a run down on what we did. Most of this you should be able to work out from the source code, so wont post too many examples.
Each panel is a <section>, all with a width of 90%. Each panel is then given a fixed position, and left value of 0 5%, 95% etc to space them out. We then have a class on the body stating which panel is open, and give the other two a width of 5% e.g:
body.home panel.work,
body.home panel.noise {
width:5%;
}
And so on and so forth. We use JS to change the appropriate classes, and a CSS transition handles the actual animation. There is a backbone core as well that handles loading all the content into the panels, and jQuery fades them in. We built it in Middleman, so it pumps out a static html version, so should work without JS as well.
We encountered loads of bugs when building it, especially getting all the responsive stuff working, and scrolling on iPads etc. But have a good look though the source code to work out what we did.
Thanks for the interest though. Any more Q's just let us know.
Cheers!
Hmm, if you checked the website's source, there's a script file named application.js and it contains a function named cycleImages. When I searched for it, it led me in this site:
http://jquery.malsup.com/cycle/
-- It's different from the one in the site but I think it functions the same.
You could also go through the application.css in the code and you'll be able to see that the site implemented a CSS3 property: transition
You could see demos from css-tricks site or w3schools or... over here
http://www.css3.info/preview/css3-transitions/
There could be other tricks but you just have to go thoroughly in the site to see how it was done.
Related
I've been struggling at work to figure this out for a week and can't quite figure it out and none of my friends know HTML/CSS so I thought why not ask here? I work on my company’s internal website, it's kinda crap none of the apps work. They have a carousel that we don't much care for that I'm trying to get rid of so I was going to make a new one... only issue is the site doesn't allow any scripts or java so I'm really just limited to basic html and css and I can't for the life of me figure out how to animations to work. I've figured out how to make a carousel by researching online that's fine that seems pretty straight forward, animating photos on their own seems straightforward... but trying to make an animation with any kind of control without java or scripts of any kind I can't figure it out. Was hoping someone could help me make a super basic one even if it's just a general image rotator with a hover to pause, but preferably something that rotates automatically and has navigation arrows or page dots...
I found this as something that might work for our site, but I need to reach out to our provider to find out why our host site is replacing the ">" between ".st-slider > #play1:checked" with garbage text preventing me from seeing if this animation will actually work (It should since there are no scripts running it and other keyanimation based css sliders work on our site). Then I would like it to look better... But to give an idea of what kind of project I'm looking at please see the link below.
https://codepen.io/miriamcc/pen/KzGGqZ
enter code here
Hello dear did you try to use
#keyframes
?
that would do the automated part of the work
I'm new to web development, mostly just trying to teach myself how with internet tutorials and such. I'm a complete newbie, so this might be a dumb question, but I've searched google up and down, and have yet to find an answer.
Basically my problem is, I've created a web page with position: fixed; header at the top of the page. I've adjusted the margins of the page so that everything seems to look great. The page displays exactly as I intended it to.
However, I've come across a small flaw which I find myself incapable of fixing: I have a few links on the page that link to specific headings elsewhere on the same page. (For example, I have an element such as <section id="section_3">...</section>, and elsewhere on the same page I'm using .... It works and leads me to the appropriate header, but unfortunately the top of <section> element I linked to (mostly just the section heading) is being covered up by the fixed header at the top of the page, so I have to scroll up a little to read the section header. I've tried linking to an <h1> rather than a <section> element, thinking it might be incompatibility with html5 or some such, but I have the same problem that way too.
I'd like to have it so that the section header is the first visible element under the header when I follow these ID links. How can I do this? I would assume this is a common enough situation that there would be a simple fix to it, but I can't seem to find anything on the subject. (I have no issues using html5 or css3. Currently this is just a personal project, and by the time I'm making anything public I expect it will be far enough down the road that there won't be any issue using those. For the time being, it only needs to work on my browser.)
Thanks in advance for anyone who can help!
Just adding #johnniebenson comment, add the css like this for the related section. Let suppose the header's height is 60px and you would like to give some space below header about 40px then do this. Example: #section_3:target{ padding-top: 100px;margin-top: -100px}
You can try setting the padding-top of each section equal to the height of your header. Then link to the h1 in each section. That should do the trick.
I am trying to perform a scrolling effect.
On scroll, the next page section should cover the current one.
So the current section is docked to the top of the screen and while the next section arrives the current is progressively covered but doesn't move.
Basically I am trying to reproduce the effect I found on this website:
http://www.squarespace.com/seven/interface
It works only with css (I tried with js disabled)
I've tried to reverse engineer it but I am not successful so far.
If someone had so advices I would greatly appreciate.
Main idea is that every <section> has height and position: relative and 'overflow: hidden'. But every tag inside those sections has position: fixed.
I tried looking at the site with JavaScript turned off and got nothing but a blank screen and a scroll bar (same in Chrome, Firefox, and Safari/iOS). Furthermore, Chrome tells me that all kinds of functions get called as you scroll. Unless there is some serious trickery here, squarespace.com seems to be using JavaScript.
Though you may be able to pull of something like the checkbox-hack to set and/or animate the top of different sections, I don't think the result for the minority of users validates the development time.
I put together a small fiddle which should help you on your way if you want something like the website you linked to. Notice that this is still usable if you disable or comment out the JavaScript.
https://jsfiddle.net/kx94my17/1/
At first I apologize for my English.
Well, thats the deal
http://www.dotazoneapp.com/site/pt/
this site have a somekind of interesting scroll, when scroll down, the background-image is change his position, with the background-position (I check this on the source). But I don't even know HOW I CAN DO THIS, if is with Jquery or the own CSS. Well, please help me how do that effect
And...
This button have a animation too scrolling up, it acelerate and not automatic to the top like the reference using id Example2
Check out this (fantastically) easy guide on creating parallax effect using only CSS and without JQuery or any kind of Javascript, which can decrease performance, conflict with other plugins and plenty else.
http://davidwalsh.name/parallax
Regarding the cool parallax scrolling- Checked out the site on chrome dev tools and it looks like they're including this scipt: jquery.parallax-1.1.3. Don't know much about it but looks cool. Investigate here:
http://ianlunn.co.uk/plugins/jquery-parallax/
I'm working on my html project, and everything is going well.
Now I'm doing the same project with framesets, but I discovered that the page in a frame set won't scroll as a whole page (you can only scroll each frame at a time).
How can i solve this?
Please help
It sounds like what you want is perhaps a static design around your scrolling content, correct?
If so, what you should actually do is make a single page (not a frameset) with your desired DIV layout (a good example can be found here), and then have your content div use CSS that will allow it to scroll (e.g. overflow:scroll;).
Hope this helps.
Don't use frames! I know this is a horrible answer to your question, but believe me - loads of peeps would agree!
If you can, use plain ol' CSS and NO FRAMES.
Also, there is rogue synchronised scrolling Javascripts floating around on the Interwebs - But I wouldn't use them. People who have Javascript off won't get that effect.