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.
Related
I am using Fullpage.js in my site and would like to use one image for the background for the whole site, where different parts of the image are displayed as different sections and slides are scrolled. So far I have managed to get different parts of the image showing for sections by adding:
<div class="fullpage">
at the top of the body with corresponding CSS:
.fullpage {
background-image: url(../images/background_image.jpg);
background-size: cover;
}
Is there any way to get the image to move sideways as slides are displayed.
Here's a jsfiddle of what I've got so far.
In the end I decided to go a different route and convert the image into tiles. The image tiles are then assigned to the correct slide or section. This allows the image to continue from each slide or section without having to load the whole image at once.
Yep! You'll need to hook into that slider gallery's events.
What plugin are you using? Or did you write it yourself?
Either way, most plugin slide galleries have events like "onSlideStart" or things like that, which you can then use to update your background.
I'd start by writing a script, and setting onSlideStart to a function that calculates what slide the slider is on. Then you simply set your background position (or rather, animate it) to the proper x-value based on what slide you're on (you can figure out the math yourself, yeah?)
Hope this helps! :)
I'm wondering if it's possible to apply a loader image to only a specific part of content on a webpage?
All the tutorials I've seen for loader images are for entire webpages - what I would like to accomplish is to apply a simple loader only to a div.
I'm building a website that has 2 profile images for staff members layered on top of one another, so when you hover over the image, it fades to the image at the back. I used this method because we want the smooth transition when hovering.
The only problem is that when you open the page with a slower internet speed, you see the bottom / back image until the top one loads, which is not what we want. You should only see the bottom image when you hover over the profile image.
Any ideas how I can create a loader image for only this part of the content?
Here's one of the pages on the development server: http://hanrickcurran.azurewebsites.net/tony-hunt/
Thank you for the info DeeMac. I didn't even think of doing it the way you mention with hiding the bottom image until it is hovered.
I've changed the code, so now the content in the bottom / back is set to 'visibility:hidden;' and only 'visibility:visible;' when the area is hovered.
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;})
I want to have a DIV around my main navigation, which contains my navigation, its size will be fixed based on the .. e.g. 600 px, what I want is if the screen resolution is small than the size of navigation, it will add Arrows on left and right so once clicked it will scroll and show the hidden navigation buttons, please check the screenshot to make it more clear..
my question is, is there any jquery plugin that does something similar, if so it will save me a lot of time, OR where should I get started, any direction would be highly appreciated..
This shouldn't be to hard. Take a look at this plugin: http://owlgraphic.com/owlcarousel/
It's a responsive carousel and when you look around at the demo-section, you will see that what you want is possible with the carousel.
I am trying to make a sidebar div sit below a header secion, when you scroll down, it will turn into a fixed div and stay fixed until the bottom of the page, once it reaches a footer section, it will stick to the top of it and allow me to scroll down the footer area without seeing it anymore.
There is a perfect emaxple of what I am trying to describe on this site http://madebymany.com/blog/apples-aesthetic-dichotomy
In the left column, it sticks as you scroll down and then un-sticks at the bottom
I am looking for a good way to do this, hopefully an example or tutorial, I realize it is done with javascript changing the divs properties. I have tried searching but all I could find was old outdated articles over 5-6 years old and they only did half the job. I am not sure even what to call this feature?
That web site is using jQuery Scroll Follow.
Note that according to the jQuery Scoll Follow web site...
The Scroll Follow object will remain inside its immediate container.
... hence why the scrolling stops before the comments on your example web site; the element which is scrolling on the page is constrained inside of its parent <aside> element. You can check out the example.
You basically handle the page's scroll event and move the box around.
Most tutorials require jQuery, so get familiar with it. If you want a tutorial, here's a working one: http://designwoop.com/2011/01/how-to-create-a-jquery-sticky-sidebar/.
Why not dissect the code of that website too?