So I have a site I am working on and I want it to load to a full background video with the title over it. However, I also want to the user to beable to scroll to other full screen sections of a page. How do I get this to work.
Here is a Codepen link
http://codepen.io/anon/pen/rskjF
The about div is the next section I want to make. It is supposed to be(well every section is) 100% height and width. It seems from the look of some sites, you can achieve this with clever positioning.
I've used Syd Lawrence's jquery.videoBG with good success. Just use this example to make your hero div have a video background. Then write the rest of your page below that div.
(Bonus tip: If you don't already know about using 'vh' and 'vw' as CSS units you may want to look into them. Example:.row{height: 100vh;})
Related
I have a blog. Here is the url you can check out --> https://dreamsummer0.blogspot.com/
The problem I have now is how can I turn the hero image into a slider? Is it possible to create a slider/carousel using Widget Image?
If not, I really don't mind manually inserting each and every image URL in the slider/carousel. I just need to know how to do it. And make sure the menu is placed on top of the carousel/slider as it is now.
If you view the blogsite in mobile or tablet (width: 980px and below), you can see all image are 100% width except the last three photos. Im using flex css for that one. How can I make it to turn 100% in width?
Any help?
Friends, I need to make a parallax effect exactly like this gif, with 4 sessions. Can someone help me? I don't even know where to start.
Basically the first, second and last sessions would have a height of 100vh. The third would have dynamic height, according to the amount of content.
The sessions would be covering each other and the one that is covered would be shown as the screen scrolls.
If possible (and if not, that's fine), I would also like to do a black overlay effect before showing the session underneath, like in the gif.
Here is an working example, but I need it without the sticky effect.
Thanks!
I'm trying to use fullpage.js (https://alvarotrigo.com/fullPage/) in order to realize a website with a particular section slider, with the requirement that the sections do not use the full height of the website.
This is a demo of the effect:
gif demo
I'm using the fp-auto-height option in order to realize the effect. The problem is I would like to give a preview of both the upper and the lower section's image, when I'm on a section, and I'd like to vertically center the active section.
The text that is on the top and on the bottom of the section would then appear after I scroll to a certain section, and therefore the previews should regard only the image and not the relative text.
The creator of the script advised me to ask here since it's a matter of CSS, but I've tried multiple combinations and still couldn't find a good solution.
I wonder how to achieve this effect on http://www.squarespace.com. What I mean is:
you scroll down and at one point the image of computer monitor stays at fixed position
after that, the images keep changing while you scroll.
How can you control content and change CSS using Javascript? It should be on window scroll event:
window.onscroll = function () {
// but I don't know what to use here
}
At smaller browser width, the above elements become a carousel, but I am not interested in that.
Because of the tags on this post I'm going to assume that this question is regarding the skrollr library
Skrollr is controlled via HTML data attributes. What you're seeing when the monitor scrolls, and then becomes fixed at a given position, is referred to as "pinning". How you define data attributes in Skrollr can be pretty confusing at first, but once that is understood, the library is kind of a dream to work with.
I printed and pinned Petr Tichy's cheat sheet next to my monitor the first few weeks of my first skrollr project.
An example of pinning in Skroller would be accomplished as such:
<div id="example"
data-100-top="position:fixed;"
data-anchor-target="#example">
These words are pinned 100px from the top of the screen
</div>
The purpose of Skrollr is that knowledge of jQuery/JavaScript isn't really required. The css is manipulated by the library, and defied in the data elements. The above example shows changing the position to fixed, but if you wanted the div to expand 100px from the top you could input width/height css parameters in there, or just about any other css you'd like.
If you're looking for a more robust skrolling library, in which jQuery knowledge is more of a requirement, I recommend you take a look at ScrollMagic (my lack of reputation prevents me from linking to scrollmagic).
I have a webpage which is visible nicely at a given width. I want it to remain at that width only. It can zoom in and out but I want the content to remain fixed with respect to that width.
The content of the webpage can be responsive also. Thats why I want it to remain fixed. Because I dont want the layout of the webpage to change with changing viewports of desktop or mobiles.
Red frame is viewport and green frame is webpage. Now image 1 shows a webpage with the given width. Images 2 shows webpage which has been scaled down to fit in the viewport but still has its content intact. Or it can be image 3 where the viewport is small and shows the same webpage with scrollbars.
I actually need this concept so that I can leave some markings(some points with fixed coordinates) on the page. And the markings remain fixed at their position despite of changing viewports.
I tried doing
<meta name="viewport" content="width=1286"> //1286 is the given fixed width here.
It solved the problem a bit but not totally.
Is this thing possible?
EDIT:
I think I was not clear enough. Let me explain it a bit further.
Actually the content inside is not in my control. I am trying to make a bookmark application. A static copy of the webpage of a specified URL will be saved with some modifications. Modifications will be addition of some markings as I explained before.
So the content inside can be anything.
Refer to this framework which is most widely used for Resposive Design CLICK HERE